Like our Facebook Page Subscribe to LTG on YouTube RSS Feed Contact or Tip Us

How To Fix The Nextgen Gallery Featured Image in Your WordPress Theme

Radford C. Jan 21, 2013 3

Image Not Available

This has been an ongoing problem in the WordPress community where the featured image would not display on most (if not all) themes when you select “Use as Featured Image” in the NextGEN Gallery (NGG). For months, I’ve combed through several forum posts regarding “Featured Images” and NextGen and there hasn’t been a clear cut solution.

Instead of cutting and pasting a solution for every type of image size and situation, I’ve decided to turn it into a simple function that you can call on a whim.

The only bad thing about this method is that it pulls a larger WordPress image off the bat before the resize.

There’s no existing plugin I can create to magically have featured pics appear on your theme.  Even if I did, you’d still have to make modifications to your theme.

I believe this is best way to get this to work without much overhead.

1. Locate your FUNCTIONS.PHP file  

First locate your functions.php file. It’s usually located under:

/wp-content/themes/your_theme/functions.php


Functions-PHP-File-Location

2. Add the following code to your FUNCTIONS.PHP

Place the following at the top or the bottom of your PHP code. Usually right after the <?php is the easiest.

<?php 

function Display_Featured_Image_URL ($SomeImageID, $ImageSize)
{
     // Get the ID of the Image using the Post ID
     $IMGid = get_post_thumbnail_id($SomeImageID);
     // Check to see if it's a NGG Featured Picture 
     if(stripos($IMGid,'ngg-') !== false && class_exists('nggdb'))
     {
          // So it is. Now, look for the ngg- tag and match it up with the Post's Image ID 
          $ParseNGG = nggdb::find_image(str_replace('ngg-','',$IMGid));
          // Get the URL of the NextGen Pic that was set as a Featured Pic
          $imageURL = array($ParseNGG->imageURL,$ParseNGG->width,$ParseNGG->height);
     } 
     else
     {
          // No NGG Picture used as featured, default to regular featured pic
           $imageURL = wp_get_attachment_image_src($IMGid,$ImageSize, true);
     }
return $imageURL;
 }

// BEYOND THIS POINT IS A BUNCH OF CODE THAT YOU MAY OR MAY NOT UNDERSTAND

?>
3. Locate and Modify your INDEX.PHP file

Usually, that’s located in /wp-content/themes/your_theme/index.php

Open up the file and start looking for the following line.

if ( have_posts() ) : while ( have_posts() ) : the_post();

That, right there folks, is the beginning of what WordPress coins as “The Loop” and it does exactly that – it loops and displays things – like an author’s name, a headline, you get the point. The Loop usually ends with:

endwhile;

Inside the loop, you should be seeing something like:

<img src="<?php echo $image[0]; ?>" />

or

<img src="<?php echo wp_get_attachment_image_src($id,'thumbnail', true); ?>" />

You’ll want to change either of those to these two lines to:

<?php $image = Display_Featured_Image_URL($post->ID, 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" />

After that, just make sure to have backups of those files for emergency rollbacks and upload them via FTP. If you’re smart, you’ll have a development or staging server to get this to work before pushing it into your production site.

Important Notes

NOTE: The parameter ‘thumbnail‘ is usually labeled something else simple like ‘small’, ‘medium’, or ‘full’ by the person or company that created the theme. To find out what kind of image sizes your theme supports,  reopen the functions.php file and search for add_image_size.

You’ll find that there’s usually a list that may look similar to this.

add_image_size('post-image', 610, 250, true);
add_image_size('featured-image', 516, 340, true);
add_image_size('widget-image-thumb', 50, 50, true);
add_image_size('media-thumb', 140, 90, true);
add_image_size('related-thumb', 134, 90, true);
add_image_size('db-image', 610, 2000, true);

Under this case, you can essentially enter in ‘post-image’ or ‘featured-image’ (or whatever is in that list) in place of ‘thumbnail’ as the parameter. The numbers next to those parameters are the sizes of the images based on width and height, respectively. For example, a ‘post-image’ has a width and height of 610 x 250 pixels. So if you do something like:

<?php $image = Display_Featured_Image_URL($post->ID, 'post-image'); ?>

You’ll be looping images with the dimensions of 610 x 250. Make sense?

If, for whatever reason, you can’t find the img src tags inside your index.php file, it’s probably buried as a function or include file somewhere – and if that’s the case, the theme is way more complex than it needs to be.

  • http://www.lazytechguys.com Radford Castro

    Try this:

    // ##### Call the variables
    ID, ‘slider-thumb’);
    $MyPostID = $post->ID
    ?>

    // ##### Call the Image Path

    <div id="post-” style=”background:url() center no-repeat” />

    // ### the rest of your code

  • stuindxb

    I was having the same issue with retrieving the featured image and used your code to help me resolve the issue. Not sure I found the ‘correct’ fix though but it works for me.

    Your code returns the $ParseNGG->imageURL which is not, as far as I can see, the featured image but the path to the image URL in the NextGen library. It may or may not be what you want. I am assuming the featured image is kept in the WP media library not NextGen library.

    I used the following function in the posts loop to find the actual featured image and seemed to work without worrying about NextGen.

    the_post_thumbnail(); // without parameters Is this correct?

    It returns the html code for the image not the URL but I was able to specify the thumbnail and apply ‘css styling’ as follows:

    the_post_thumbnail(‘thumb-size’, array(‘class’ => ‘img_nofade frame’));

    thumb_size is defined in functions.php
    img_nofade and frame are classes that are used to style in css

    Thx

    • http://www.lazytechguys.com Radford C.

      You’re correct in that the $ParseNGG->imageURL does NOT return the featured image. I was using $image[0] to do that. The problem, at the time of the writing, was that the NextGen plugin did NOT place the featured image inside WP’s media library. It still does not. HOWEVER, WP has been updated to deal with it so that’s why the_post_thumbnail(); which used to NOT do it, now does.