• I manage a site for our Video Game publishing company that has individual game posts with a Featured Image at the top of each. In other areas of the site (“Top Games”, “All Games”, “Coming Soon”, “Latest Releases”), you see a preview / thumbnail of that featured image. Without making any changes to the code, these preview images show up now as blue question mark boxes. See link:
    https://www.maximumgames.com/games/

    I know the image is there because you can click on the box and it takes you to the game post where you can see the featured image. Some help would be much appreciated.

Viewing 11 replies - 1 through 11 (of 11 total)
  • I get a message saying, “This Account Has Been Suspended” when I click on the link.

    Thread Starter MaximumGames

    (@maximumgames)

    Odd! Try it again: https://www.maximumgames.com

    Not sure how the thumbnail images are inserted, but the source links look like this, as if they’re pointing to the folder on your server:

    src="/home/maximum/public_html/wp-content/uploads/et_temp/Air-Conflicts-123279_304x170.jpg"

    where, instead, they should look like this:

    src="https://www.maximumgames.com/wp-content/uploads/et_temp/Air-Conflicts-123279_304x170.jpg"

    or even this would work:

    src="/wp-content/uploads/et_temp/Air-Conflicts-123279_304x170.jpg"

    Thread Starter MaximumGames

    (@maximumgames)

    We tried both lines of code in the (Firefox) Inspector and debugging option from the browser but it didn’t work. From a preview stand point it should have worked, but we’re wondering if it makes a difference to incorporate the code in the Editor? The problem is we don’t know how to locate that line of code in question in order to make a permanent change.

    [ Please do not bump. ]

    The problem is we don’t know how to locate that line of code in question in order to make a permanent change.

    I think that will be key. I just tried sticking in /wp-content/uploads/et_temp/Air-Conflicts-123279_304x170.jpg using Firebug and the thumbnail loaded right up. So you don’t hand-code that page, there’s either a plugin or the theme itself creates it? What happens when you add a new game, it appears automatically on that page?

    Thread Starter MaximumGames

    (@maximumgames)

    We add a new game by creating a Post in WP. We don’t do any coding when we create the posts, it’s all checking boxes, uploading images, and pasting copy.

    It looks like someone (Pulse Solutions?) put together a custom theme for you. Can you go to them to find out what’s happening? All of the theme-related files should be in your /wp-content/themes/TheSource folder.

    If you still can’t figure it out, you can try adding some JavaScript that will change the src attribute once the page loads:

    <script>
    jQuery(document).ready(function($){
    
      var oldSrc;
      var newSrc;
    
      // Cycle through all images having class = thumb
      $("img.thumb").each(function(index)
        {
        // Get the value of the src attribute for the image
        oldSrc = $(this).attr("src");
    
        // Remove the string '/home/maximum/public_html'
        newSrc = oldSrc.replace('/home/maximum/public_html', '');
    
        // Set the new src attribute for the image
        $(this).attr("src", newSrc);
        });
    
    });
    </script>

    Thread Starter MaximumGames

    (@maximumgames)

    This looks like it may work, but we’re running into the same issue of not knowing where to place the code.

    Easiest would be to put it into a Text widget in a sidebar, but I don’t see a sidebar/widget area on your site. Or, if your theme has some sort of option that allows you to enter custom code, that would be easy, too.

    You can also install a plugin that allows you to add JavaScript.

    Lastly, you can put it into the head section of your page (like most other scripts) by editing your theme’s header.php file. If you go to Appearance > Editor from your dashboard, on the right should be a list of files that go with your theme. One of them should be labeled Header (with maybe header.php in parenthesis). Click on that. In that file, look for the closing head tag (you’ll probably also see a call to wp_head() just before it). Copy & paste the script just before the closing head tag.

    ...
    wp_head() ?>
    <!-- Add your code in here -->
    </head>
    ...

    Click Update File when you’re done.

    Thread Starter MaximumGames

    (@maximumgames)

    It worked! The images are there, only thing is the pages are taking extra long to load.

    https://www.maximumgames.com/games/

    The images are there, only thing is the pages are taking extra long to load.

    Yes, it takes longer because the thumbnails don’t get loaded until after the rest of the page is loaded. It’s not a perfect solution, the page will load faster if you can dig into the code and figure out why the incorrect home directory is being output in the first place and fix it there. But at least you get the images now.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Preview images not appearing; show blue box with question mark’ is closed to new replies.