Its easy to grab a quick image that relates to the article just to save time. Check to see if you can now upload and see your featured images. After all, its difficult to shrink, resize, and crop every image manually you plan to upload. Honestly, I really dont like the Gutnberg editor. Simply having a header.php in your theme's folder will not output your header to the browser. Open the Media Library in your WordPress dashboard Select the desired image Uncheck the box Protect this file in the attachment details Fix Images not Showing in Media Library You might suffer a nightmare when there are no images available in the WordPress Media Library. Its getting placed on a digital medium where the photos resolution doesnt necessarily have to be print-worthy to look good. If its not there, click the Screen Options tab and mark the Featured Image checkbox to reveal it in the editor. 2023 Kinsta Inc. All rights reserved. The image is showing on pages that use a different header. Again, in this tutorial, we named the page Homepage, but you may have something different. There are several reasons for images to disappear from WordPress. Avoid images that are way too large or small. Overall, photos on your website take up a significant amount of server space, potentially slowing down your site loading times. Scroll through the list of pages to locate the one you assigned as the Homepage. Make sure the area that says Your homepage displays is set to A Static page. Reactivate each plugin one-by-one. However, we usually recommend clicking the Select Image button, as that provides a few extra choices for deciding on a source for the featured image. After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. An even page header\footer. Now that you have the featured images ready, get sharing! Hence, many hosts, and WordPress itself, define a maximum upload file size. This could lead to a photo owner reaching out and asking you to remove many of your featured images, or worse, threatening legal action. If youre having problems with the SEO plugins discussed above, or you simply dont plan on using an SEO plugin (and therefore, dont have access to a quick Open Graph activation button), there are a few other options to activate Open Graph. Configure WordPress Dashboard Settings 5. Pay for photos on sites like Shutterstock and iStockPhoto. The featured images for all blog posts in that feed appear as smaller thumbnails, providing a more visual experience for those looking for content. Another option is to take action with no selected image, like removing a featured image that repeats several times on multiple posts, or if you need to remove all featured images without existing image files. Switching it to Large or Medium adjusts the sizing of all featured images in the block and adds more of a landscape view depending on your featured images dimensions. You can troubleshoot a featured image not showing up or edit each featured image manually. Many blind people are using the internet through screen readers. Wrong file permission or ownership. Each social network has its own display for shared content, but Facebook is a solid starting point considering its the most popular one. Its usually located at the top of the post or page. This way, the thumbnails remain proportional, and you dont see any unexpected cropping effects. Thats how it should be if you want the functionality of a featured image with no duplication! Instead, it detects the posts that lack featured images and sets a default featured image for them. This article shows you how you can fix WordPress featured images not showing properly on your website. Its also possible to locate all images on your WordPress site by going to the Media Library. You can find the Featured Image in the right-side Settings panel for all posts and pages. Kinsta and WordPress are registered trademarks. After the plugin is installed and activated, go to Featured Images > Bulk Edit. You may unsubscribe at any time by following the instructions in the communications received. Thats a tremendous problem. By default, WordPress offers a featured image for all posts and pages. You never know when a human error may result in a featured image not being uploaded to your website. There are many ways to go about it, and well cover them all. Unfortunately, we cant walk you through the solutions to these issues as it requires you to either look into the theme settings or contact the theme developer. Other times, you may notice that a theme presents a featured image in a different spot than whats expected. Overall, if youre editing an image, like a cover or a standard media item, youre not using a featured image in the WordPress post or page editors. Or if the featured image fails to show up on social media, but its working fine on your website. In the WordPress Customizer, click the Change button for the Active Theme Select the Twenty Fifteen theme or another theme you want to use that supports and displays a background image. If thats the case for you, youll have to consult with the plugins developer. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. Weve outlined both common and uncommon problems with featured images. To remove the header, check the top box called disable primary header and update the page. Still, its far easier to know the core approaches to featured images to minimize problems in the first place. This could be just above your site's title and menu, for example. Next, enter the custom code in the 'Header' section. It also provides a clean preview of what you can expect to see if you were to paste or share that URL on Facebook. Therefore, it serves as a backup to the real featured image field, just in case you forget to upload the featured image but still want something to show up. Fix Featured Image Not Showing on a Blog Post Gallery Page 7. You can also do this with pages or click on the All Posts option if youre interested in adding a featured image to a previously generated post. That means therere no settings to look at or change before it working its magic. Is there a way to do that without using an external plugin? Make sure its on the Block settings tab. For simplicity, well stick to uploading featured images to regular WordPress posts and pages but if youre interested in learning more, heres a complete WooCommerce SEO guide that covers this & everything else, including Schema Markup up for your products and more. For more details, you can see our guide on how to add header and footer code in WordPress. As a test, lets visit a post that already has a featured image included with the article. Both cover and featured images function in similar ways, providing large photos at the top of posts and pages, yet they have some differences. Besides, any image you use on your site, including featured images, shouldnt be that large, to begin with. Run your Node.js, Python, Go, PHP, Ruby, Java, and Scala apps, (or almost anything else if you use your own custom Dockerfiles), in three, easy steps! However, only the front-page.php file shows the image. Creating a website with stunning content to find that featured images dont show is both frustrating and potentially harmful to your brand. Its also possible to generate featured images based on post authors, tags, and post types. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. Its separate from the main content. Though, it varies depending on your WordPress sites configuration, theme, and plugins. Its most likely because youve uploaded a featured image while also including the same image in your content as a cover or regular image. It is primarily used for replacing featured images in bulk. You may want to move the featured image to another location, like below the first bit of content or above the byline with the authors name. Regardless, the best course of action is to follow these steps: An interesting thing about featured images is that some WordPress themes may not support them. Replace featured images with the selected image. Finally, a cover image allows for its own unique customization options, like the ability to place overlaying text on top of the image or including a filter. This helps speed up your featured image creation process while also helping your brand. If you find that its missing, follow the next few steps to activate it. Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. It often presents useful information in the form of a photograph or graphic image, granting the user a sneak peek into the information behind that link. Under there, youll find a field called Featured Image. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. Test a deployment on our modern App Hosting. All you have to do is click on the icon to insert it somewhere on the homepage. Here, you can set everything for the Open Graph sharing protocol, yet specific unique traits for Facebook only. there is no Featured Image section in there at all. For instance, you may want to revamp your homepage completely, and its easier to just make an entirely new page instead of editing the current one. Update: finally used WordPress reset plugin and cleared everything out. You also agree to receive information from Kinsta related to our services, events, and promotions. One way to ensure your featured image field is never empty is to set a default featured image for all posts. This gets around the idea of uploading an image to your WordPress Media Library and activating that image as a featured image. We recommend only using a media hosting platform, or maybe another website host that you own yourself. The first few settings dont have anything to do with the featured image, but they can affect how the posts show up in the block and make your featured images look strange. This button has disappeared for me on WordPress. This means that as you move the crop box, and it sticks to the aspect ratio. You can also configure settings to have a default Post Image Source, like pulling the first image from a post or going with the Featured Image. Consider any WordPress issues that may be causing the problem with your featured image, like conflicts between plugins or a. Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. You can upload as many images as youd like while also choosing which featured image should display in certain areas and how big those images should be. This means that as long as you click Save Draft or Publish, the image remains active on that post until you remove it. The most common ones are: Incorrect home and site URL. Theres a long list of settings to mess around with, so its entirely up to you. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. If the problem is solved, then it was an error stemming from an outdated plugin. Note: Youre always able to come in here and change the static homepage. As you can see, a different image appears in the Featured Image section. This is due to a wide variety of reasons. But this is a reminder to ensure that your hosting provider either provides the tools needed to render featured images or find a plugin that activates the Open Graph protocol. The the_post_thumbnail(); function may lie before the page title or after the contentthat depends on your page and theme configuration. A featured image does not differ from other photos on your website. You can now go to Posts > All Posts in your dashboard to view the posts in a list and make sure the featured images truly got replaced in the posts. I felt I should post it here for those having same issues. Created new Home page. 'Posts > Add New' link in WordPress dashboard Insert any content you want for the blog post. Reinstalled GP plug in. If you switch it to the Thumbnail option, those images shrink slightly and usually become perfect squares. Its also possible that you would like to replace a certain category of post or page to all have the same featured image, whether thats a professionally designed image that indicates the article is for a tutorial or maybe for putting your logo a relevant image on all webpages. The only time youll find that its okay to share an image on your website for free is when you pull from a website like Pexels or Unsplash. You can type in custom width and height, or decide on a percentage, so that the tool automatically changes the size of all featured images based on the percentage given. Once on the Developers Debug Tool page, find the Sharing Debugger tab, and paste the URL in question. Finding free images for personal and commercial is hard. Upon activation, you can go to Code Snippets Header & Footer from your WordPress dashboard. Your dashboard settings could have the featured image fields completely turned off. As a quick reminder, you can turn any WordPress page into the homepage by going to Settings > Reading in the dashboard. If you find yourself in this situation, we recommend returning to the Facebook Sharing Debugger Tool and clicking on the Batch Invalidator option. For instance, we added a Recent Posts feed on the homepage of our test site. That means only those images will get replaced by the new image. The Add Block button looks like a + sign. Click the Edit Image link to proceed with the edit. To begin, go to your WordPress dashboard. The problem prevents images from displaying on both the backend and frontend. I think its work for you Share Improve this answer Follow answered Mar 22, 2019 at 4:32 Harsh Khare 509 1 3 13 I tried this as well and it didn't override the current theme's headers and didn't add anything unfortunately. A lazy loading plugin may be preventing the featured image from showing up or loading quickly. To adjust the location of a featured image, go to the page or post template being used. such as page.php, single.php, archive.php and so on. @chrissel: Hello there, I am afraid the option to display Header Images on all pages is only available in the pro version of the theme. Select the Twitter Cards tab to show the settings to configure your Twitter Card Tags. I don't understand why the image only works in . Visuals can be decisive in your content marketing plan. There are two solutions to this. To edit featured images in WordPress, open a post and scroll to the Featured Images section in the Post Settings panel. Therefore, Kinsta bans the majority of Open Graph plugins as they can cause conflicts. Theres a completely different section that handles the featured image. The Multiple Featured Images plugin boasts several features that come in handy when troubleshooting and resolving your featured images problems. For instance, if your article has tips on using Instagram, the featured image better have elements that reference Instagram (legal ones, of course), along with creative items that make the article look appealing. Several images are pulled from the post, but you must choose which one you want to use. Rather, quickly explain whats in the picture and potentially add the keyword to boost your rankings. If not, then WordPress will render the default header file. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. We usually recommend editing an image before uploading it as a featured image (third-party editing tools have more advanced features). Some of WordPress built-in image editing features include: The Crop tool is usually the most important, so click on that to activate the edit module. Post thumbnails are what featured images used to be called in WordPress from its early days. Your theme layout does not support featured images. These are the general Media settings for your entire WordPress website. Incorrect permalink setup. Click on Preferences to reveal a new pop-up window. This tool scrapes any URL you want and tells you whether any errors occur with Facebook accessing the information. The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. 3. Note: You can upload WordPress featured images to posts and pages, but that basic rule expands once you start adding things like WooCommerce product pages and custom post types. The plugin generates a featured image from the first image in a post, but only if the featured image is not already configured. Locate the Settings panel towards the right side of the page. If allowed, you can also change the PHP memory limit on your own by editing your sites wp-config.php file. Find and select the triple-dot icon () in the far right corner of the dashboard. Theres also an Image Alignment setting to indicate if the images should slide to the right, center, or left. All files/pages are in the root folder. Youll see this image get populated in the dashboard. Now, go to Settings > Media in your WordPress dashboard. Its settings are located in the WordPress Media Settings, but you have only one field you to fill out. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. It looks like only two of the images selected are actually stored as featured images in our posts. Some WordPress users complete all the right steps to upload a featured image but realize that a duplicate of the featured image appears. Because of this, pasting and Debugging the URL in the Sharing Debugger Tool from Facebook could actually solve your problems altogether. Start your free trial today. This is important because the bulk edit is permanent, so you want to be sure of your actions at each step. After that, every time you drag the crop box, it will always keep to the 2 x 1 ratio, giving you less freedom to crop and ensuring your ratio remains consistent when creating featured images. Its also prudent to understand what types of photos work well as featured images, seeing how it may be the original photos causing the issues to begin with. It also helps when your older posts dont have appropriate featured images. The last page presents the bulk edit results, with details about the posts that now have new featured images. Usually, duplicate featured images arent two featured images, but one featured image and a separate photo in the articles content area. I agree Pedro, I have never liked working Gutenberg editor, It has a way of messing things up. In this module, you can select multiple images from your Media Library. The Featured Image from URL, or FIFU, plugin allows you to take an external image and use it as a featured image for a post or page. You would select those images later and swap every single one of them out in place of the new one. Sometimes the best solution is to install a plugin and hope that it provides the features needed to fix everything. Whenever you make a change, its good to go back to the Facebook Sharing Debugger Tool to promote Facebook to search for more data on the post. Regardless of whether setting a proper alt text for images helps with SEO, you should do it anyway for accessibility reasons. Another simple yet common mistake made by WordPress users is to implement a cover image for a post or page and assume it works like a featured image. The Progress Bar indicates exactly where you are in the process of bulk editing the featured images. Click on the Featured Image panel to open its settings. Make your site accessible to them. The big question is whether or not the featured image for a post gets rendered properly when you share a link on Facebook. As an alternative, the Media Library also has a tab to Upload Files, where you select from the files on your computer and upload them to your WordPress Media Library. This isnt a rule, but its also common to see issues with featured images when some plugins have access to your media library or alter all images functionality. Again, Kinsta bans many Open Graph plugins, including this one. It seems there is a conflict with your theme because I have tried to add an image header but it doesn't show at all. Another Screen Options dilemma comes into play when you do not see the actual field to upload and insert a Featured Image. Incorrect references in image URLs. By default, this featured should be enabled, but its possible you turned it off at some point. After that, feel free to drag it up or down on the homepage so that its located in the proper position. Because of this, a cover image is part of the post or page itself, and not separated like a featured image. Featured images dont show up as thumbnails in your lists of posts and pages on the dashboard. Make sure to get this agreement in writing (email works too). There is a plug in or other theme option set which is changing the margin-left styling for .header-img. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. The solution often involves going to the theme settings and locating the featured images custom area. To change the featured images location, cut this piece of code and paste it somewhere else in the page/post template. If the goal is to have no featured image, you can remove it altogether. Click on the area where you want to place a header image. You may see a simple list of links, along with descriptions from those posts. Get premium content from an award-winning cloud hosting platform. We also recommend looking at the Image Dimensions. Here are some general rules to follow before uploading your featured image: Another tactic for finding and setting the perfect featured image size is to visit the Media section of your WordPress dashboard. This code snippet is a reference to your featured image. Or maybe they include colorful animations while still representing whats in the posts. A big part of making sure featured images look right is to understand the best practices before uploading them to your WordPress site. You can also test this out for the other social networks like Twitter and Pinterest.