Featured images vs grab the first post image

Elegant Themes gives you a few options for displaying images on blog posts as well as blog and category pages and using the Divi blog module. It’s much easier to achieve your desired layout if you have a basic understanding of how the images will be generated and displayed BEFORE you start creating blog posts. The purpose of this tutorial is to provide the basics to get you started.

 

Featured Images

If you set a featured image for a blog post, your theme will default to this image when viewing the post itself and will use the thumbnail of this image when viewing blog pages, category pages, and the Divi blog module. The only setting you can change with a featured image is whether an image is displayed at all. It’s all or nothing.

Removing featured image thumbnails from preview pages

You can turn the featured image off by going to the Epanel->Layout Settings->General Settings and disabling “Show Thumbs on Index pages”. This will remove the thumbnail from category pages and Divi blog modules. Even if you have an image manually inserted into your post, no image will be displayed.

Removing featured image from blog posts

You can also remove the featured image from the top of the blog post by going to Epanel->Layout Settings->Single Post Layout and disabling “Place Thumbs on Posts”. This will remove the featured image but still display images you’ve manually inserted into the post. This might be helpful if you want to display similar images on preview pages for design purposes but a different image once the post is clicked on.

Most people want the featured image displayed in both places so the default settings are usually ideal and none of the changes above need to be made.

 

Grab the first post image

The other option with Elegant Themes is to use the first image of each post as the thumbnail to be displayed on blog pages, category pages, and the Divi blog module. To enable this feature, navigate to the Epanel General Settings and enable “Grab the first post image”. Now if you manually insert an image into a post, that image will be used on preview pages. It will also be inserted into a post twice, once at the top and again wherever you have manually inserted it.

Removing duplicate images in posts

To disable this, go to Epanel->Layout Settings->Single Post Layout and disable “Place Thumbs on Posts”.

The main advantage to using the first post image instead of the featured image is if you want more control of how the image is displayed in the blog post. Maybe you want to have a few paragraphs explaining the picture before displaying it. Maybe you want to add a caption under the picture or would like to have more control over the size. In any case, enabling the “Grab the first post image” setting will give you more control.

Featured image thumbnails override first post image thumbnails

There is one important exception to grabbing the first post image. If you have a featured image set, it will override the first post image on preview pages. This could actually work to your advantage if you wanted most posts to display the first image but maybe have a few you would like to show a different image as the thumbnail preview. For example, you might have a post category called “Friday Freebies” and want all thumbnails of these posts to have the same image but don’t want that image displayed once the post is opened. Just set the featured image for all “Friday Freebies” to the same image and it will override the first post image, but only for those posts since your other posts won’t have a featured image set.

 

Which should you use?

Confused yet? It’s not rocket science but it does require a little brain power to wrap your mind around it. The general rule of thumb is to just set the featured image and use that for both thumbnails and the post itself.

If you want the thumbnail image to be different than the post image, you’ll need to use the Featured Images method. Just remember to go to Epanel->Layout Settings->Single Post Layout and disable “Place Thumbs on Posts”. That way the featured image is not displayed on the post and you can manually insert your own image.

If you will always manually insert the image so you can control its placement, size or other display features, you should probably enable grabbing the first post image. That way you only have to insert the image once.

 

    15 Comments

  1. Hi,…

    i love the synopsys,… very good information. I seem to be having trouble getting the first post image to dispaly on the blog when i have disabled the featured image setting in the e-panel,… its driving me crazy and i have tried every combination of setting in e-panel

    jarrett

    February 1, 2015

    • Hi Jarrett. Would you mind sharing your website’s URL? Or you can email it to me using the “Request a Tweak” link in my navigation. So you’ve disabled featured images. Did you enable “Grab the first post image”? Where is the image not showing up? In the post or on the blog and category pages as a thumbnail?

      Brad (admin)

      February 3, 2015

  2. Hi and thanks in advance for the help. When posting the site address to social media, it grabs an image I’m not wanting it to. It’s a one page design site. Please advise as to how I can select a particular, more attractive image of my choosing. It’s been a year since I used Divi or done any designing, so I’m very rusty and trying to make a quick fix. THANKS IN ADVANCE FOR THE MUCH APPRECIATED HELP!

    renee

    October 12, 2015

    • Well, ole “rusty” here figured it out. Thanks anyway!!!

      renee

      October 12, 2015

      • How did you figure this out?

        Elle

        October 14, 2015

  3. WELL, I REMEMBERED HOW TO CHANGE THE FEATURED IMAGE; HOWEVER, IT’S STILL GRABBING THE PREVIOUSLY SET FEATURED IMAGE DESPITE MY SAVING THE NEW FEATURED IMAGE. FOR EXAMPLE, WHEN POSTING THE WEB ADDRESS TO FB, http://WWW.MIYONGSTAILORSHOP.COM I WANT THE HEADER IMAGE TO POST, BUT THE LAST IMAGE IS POSTING. HELP AND THANKS!

    renee

    October 12, 2015

    • Hi Renee. You should try the Yoast SEO plugin. Once installed and activated, go to the page/post and scroll down to the Yoast settings. Click on the Social tab and you’ll have an option to select/upload an image to be used for FB. There are other plugins that do this, but Yoast offers so many other benefits. Let me know if you still have issues.

      Brad (admin)

      October 17, 2015

  4. Thank you. I do this with my Pure Type theme. I’m looking to switch to Divi. I was wondering if you know if the post slider will grab the first image for the post slide…if the featured image is turned off? I tried using it in divi page builder and I can’t get it to work. I’m also trying to figure out if the text can be left out, since my images already contain the title?

    Valerie

    April 6, 2016

    • Sorry for the late response Valerie. It does not appear that the post slider will grab the first image. You’ll have to set the featured image. The text can be left out if you have it in the image. Just keep in mind that the text may get cut off depending on how you have it in the image and depending on what device you are viewing it from.

      Brad (admin)

      May 19, 2016

  5. I dont want a thumbnail right before the post excerpt. Please guide me to get the size lower

    Abdul manan

    December 14, 2016

  6. Thanks, it’s work.

    I’m not programer, and get crazy for my e-panel setting.

    Noq I just insert my image manually, and use sliding image code, sometime.

    Arsitek Surabaya

    March 7, 2017

  7. Brad ==

    I just switched to Divi 3.0 from another brand of builder theme. I’m finding Divi to be very capable in some areas, but confusing and lacking important tools/features in others.

    One of the biggest surprises for me is how AWFUL Divi is when it comes to Post Page (blog page) image display. Every image gets expanded to full width. Looks terrible, and I’ve found no way around it yet.

    I spent waaaay too much time trying to understand the image/thumbnails relationships, and found this great post of yours just as I was about to cash in my “30-DAY-MONEY-BACK GUARANTEE.” Ha.

    Thanks for such a clearly written and concise explanation.

    Tom

    March 15, 2017

  8. Trying to help someone with their Elegant theme/Divi and I cannot see how to use the post thumbnail in Recent Posts. The Recent Posts page is fine and displays the excerpts and the More link, but doesn’t show the featured image for the post. I would expect to see a thumbnail image at the top of the excerpt.

    Help please!

    Fred Boulton

    March 17, 2017

  9. Hi – Is there really no way to show a caption for the Featured Image? This seems rather strange. I’ve even tried using two separate plug ins for creating a Featured Image caption, but neither work with Divi. Thanks for your help with this.

    Donna

    April 8, 2018

  10. Thanks for the great post. It really helped me out.

    Jeff

    December 9, 2020

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This