Learn how to fix it once and for all , Featured images matter. The .header-img is a common css class in WordPress themes. To begin, install and activate the OG plugin on your WordPress site. With your position I solved a problem that lasted for months. Sometimes, featured images for pages are completely blocked. Whether youre overriding existing featured images or trying to fix ones that werent existent in the first place, the Quick Featured Images plugin does the trick for all of that. Plugins, although rather useful for building a WordPress website, occasionally have questionable coding. You can go to Post > All Posts to review your list of articles. However, you may have to update previously published posts for the default featured image to show up on those. 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. By submitting this form: You agree to the processing of the submitted personal data in accordance with Kinsta's Privacy Policy, including the transfer of data to the United States. Do the same for footer.php to get the footer. Plugin Conflicts. For this section, well show you how to activate the Open Graph markup with two of the most popular SEO plugins: AIO (All In One) SEO and Yoast SEO. Click on Preferences to reveal a new pop-up window. Think about using a default featured image plugin to fill in the blanks and list temporary or permanent featured images when you forget to do so. You can see that two of my posts now have a new featured image, and theyre the same images. To edit featured images in WordPress, open a post and scroll to the Featured Images section in the Post Settings panel. Its usually located at the top of the post or page. Both can be accessed and implemented by going to the Posts or Pages menus and creating a new item or visiting an old page or post. Again, the images from Pexels are free, but you must give a linked credit to the photographer, which is automatically inserted when using Pexels through WordPress. Or if the featured image fails to show up on social media, but its working fine on your website. We covered this solution already in the previous section, yet it fits well in the best practices, too. Youve noticed something wrong with one, or all, of your featured images. 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. 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. However, the 1200 x 628 pixels suggestion is just a starting off point. Several images are pulled from the post, but you must choose which one you want to use. Its getting placed on a digital medium where the photos resolution doesnt necessarily have to be print-worthy to look good. You may already have the Latest Posts block activated on your homepage, but if not, you can find it by searching in the Gutenberg block library. In general, the following solutions tend to help with error codes telling you that an image is either too large or not currently supported for uploading: Your hosting provider often sets the WordPress memory limitations. All you have to do is paste the post link into the Facebook status field (you can also do this on personal or business pages) and wait to see if the post content gets rendered, along with the featured image. Its important to test out how the Default Featured Image works on your site. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. Incorrect permalink setup. The last page presents the bulk edit results, with details about the posts that now have new featured images. Lets take a look at the basic differences between cover and featured images. Yet, even with those websites, youre usually asked to provide attribution for all photos (which is tough as featured images often dont allow captions). After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. Besides, the featured images for each post should be shown above the post title and link. Insert any content you want for the blog post. In some cases, you will have to upgrade to a bigger hosting plan that offers more resources for your site. After all, a theme or plugin could be causing the problem. Its more common to see something with specifics, like a message that tells you an image or video Exceeds the Maximum Upload Size For This Site.. Here, youll see a Progress Bar at the top of the page. Click the Save & Activate button. You may discover that your theme does well with slightly wider or shorter featured images. An image optimization plugin does much of the work for you, ensuring that your featured images actually show up and dont slow down your website. 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. You may find that the theme coding doesnt support a featured image. I always prefer the classic editor. Youll see this image get populated in the dashboard. To begin, go to your WordPress dashboard. I installed the plugin: "Options for Twenty Seventeen" and made some changes to my site. Checks whether a header image is set or not. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. Its possible a theme changed this. Unfortunately, an image with malware or a virus is already compromised. Click on the Select Default Featured Image button. Your latest posts should appear wherever you placed the block on your homepage. body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border-left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt .novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height:18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4}body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}WordPress featured images not showing properly on your site? Because of this, a cover image is part of the post or page itself, and not separated like a featured image. In terms of featured images on Facebook, we often see the following problems: All the concerns listed above stem from similar problems. Its also possible to locate all images on your WordPress site by going to the Media Library. Your dashboard settings could have the featured image fields completely turned off. Many blind people are using the internet through screen readers. The featured image may not be in the right place inside the page or post template. Although it may be a temporary fix, this can also prove useful for setting permanent featured images on pages and general blog posts. Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. It also provides a clean preview of what you can expect to see if you were to paste or share that URL on Facebook. The reason it shows on that page is because the header image has white areas on the left and right. Lazy loading is preventing your featured image from showing. Theres a field for choosing where the image should come from when sharing a post or page to social media. https://wordpress.org/plugins/unique-headers/ 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. These are the general Media settings for your entire WordPress website. For instance, you could cut down each featured image to 25% of its original size. But thats fine, as we all start learning somewhere. We recommend taking a look at his guide to walk you through those steps in detail. Also, make sure the width of the image is set to 1080px. Theyre all telling you that Facebook is either having trouble accessing the Open Graph data from your website, or theres no Open Graph data, to begin with. Because of this, pasting and Debugging the URL in the Sharing Debugger Tool from Facebook could actually solve your problems altogether. Pay for photos on sites like Shutterstock and iStockPhoto. Take a photo with your own camera. Scroll down to find a new field called Default Featured Image. The following screenshot shows a post working well on Facebook since it includes a summary of the post content, with a link, the title, and the featured image. A thumbnail of the image you go with shows up under the Featured Image panel in your Post Settings. Not all themes have the same featured image settings. The featured images for all blog posts in that feed appear as smaller thumbnails, providing a more visual experience for those looking for content. Upload multiple photo sizes on a test post and mark down the dimensions of each one. Incorrect image URLs. However, you may find that the theme has removed featured images in the coding, and it doesnt have any additional tools to override the lack of featured images. The plugin also has a wonderful native search engine that pulls from places like Google, Pixabay, and Unsplash. Therefore, Kinsta bans the majority of Open Graph plugins as they can cause conflicts. But, several systems (about 25% of known systems) don't show the images, only a blank rectangle with a small image icon in the center. Thats the main reason you would take advantage of this plugin. No featured image complements the posts when sharing on Facebook. Click the Choose Image button to proceed. In the Astra theme, launch the edit screen of your desired page and expand the Astra settings tab from the bottom right corner. As a quick reminder, you can turn any WordPress page into the homepage by going to Settings > Reading in the dashboard. Whenever youre done editing an image, you can click Enter to active the edit, and then Save the image. I don't understand why the image only works in . Three options are available for you to bulk edit the featured images: Choose the right option depending on what youre trying to achieve. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. Click the Background Image section of the Customizer panel. Still, its far easier to know the core approaches to featured images to minimize problems in the first place. One way to get in serious trouble with your images is by using photos and graphics you randomly find online. However, Lazy Loading often causes problems with featured images since some Lazy Loading plugins treat featured images as regular images. Editing a featured image in WordPress is often the easiest and quickest way to resolve an issue with a featured image thats too large or needs some cropping done. All of these come into play when highlighting your recent posts and ensuring they look presentable while also displaying your featured images. Follow these rules to ensure your featured images are legal: Its one thing to ensure all featured images are relevant to the posts theyre attached to. This brings you to the settings required to activate the Open Graph protocol and calibrate which content elements youd like to see when your posts and pages get shared to social media sites. It looks like only two of the images selected are actually stored as featured images in our posts. Visit our Facebook page; Visit our Twitter account; Visit our Instagram account; Visit our LinkedIn account That means therere no settings to look at or change before it working its magic. Hello! Once everything is configured, hit the Publish button. Its possible that your current user role doesnt allow you to upload or view featured images. If not, how do you go about fixing that problem? My Header media is not showing on my homepage on desktop view. Editing inside WordPress is also an option, but that doesnt typically resolve to get the WordPress image to begin with. The problem prevents images from displaying on both the backend and frontend. 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. Now its time to look at the content within that page to ensure the featured images show up the way they should. You can search for specific keywords and set them as your featured images. Once everything looks good and youve decided that those old featured images are ready to be replaced, click the Apply button to finish the bulk edit. The most important option right now is the Include Image field. I have created several files/pages, such as; index.php, front-page.php, page-about.php and single.php for example. If you switch it to the Thumbnail option, those images shrink slightly and usually become perfect squares. This tool scrapes any URL you want and tells you whether any errors occur with Facebook accessing the information. has_header_image (): bool. To start, install and activate the Open Graph and Twitter Card Tags plugin on your WordPress site. Go to Posts > Add New to create a new blog post. 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. Note: Featured images get pulled from WordPress and populated on social media sites with the use of something called Open Graph. Itll avoid causing problems with your own server. For instance, we added a Recent Posts feed on the homepage of our test site. Click the Edit Image link to proceed with the edit. It is then presented as the primary image for that website item whenever the article gets shared on social media and other sites. Thats because theres no need to activate an Open Graph plugin with Kinsta. If youre still not having success with that, consider going to the Facebook Sharing Debugger to ensure Facebook knows how to crawl your website, as thats usually the problem if you already have the Open Graph protocol activated. Here are some common reasons that lead to issues with featured images in the first place: A few errors are more common than others when uploading images to the Media Library in WordPress. Essentially, this plugin suits those struggling to decide which featured image to use, or when one featured image makes sense at the beginning of the article, but another one looks better in a sidebar. Note: Youre always able to come in here and change the static homepage. Think about installing a plugin that resolves problems for featured images without you having to do much work. As always, we recommend backing up your WordPress site before making edits to the code. For instance, you could type in a 2 x 1 aspect ratio. 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. 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. There is a plug in or other theme option set which is changing the margin-left styling for .header-img. We have an excellent guide on optimizing your WordPress images. Even if they tell you that the image is too big, how do you move on from there? Many image optimization plugins offer lazy loading functionality as an add-on. This is a frustrating one because its a simple setting in the dashboard that tells WordPress to either show the Featured Image section or not. You would usually find the featured image right below the title and above the first line. Youre better off using a plugin that can override the conflict than swapping out your entire theme and redesigning your website just to fix featured images. All you have to do is click on the icon to insert it somewhere on the homepage. The following page explains which current featured images will be replaced by the future featured image you specified from before. The downside of setting a default featured image is that theres a chance you end up with several featured images that arent relevant to the post. The first is OG, which comes in handy for adding the Open Graph protocol to turn any webpage into rich objects for social media. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. Along with activating the Open Graph for all social networking sites, this plugin has the added advantage of including Twitter tags to improve your Twitter sharing results. Some non-WordPress image editing tools you can use are GIMP, Photoshop Express, and Paint.NET. When seeking out a featured image, always consider starting with a larger, high-resolution photo. Added a featured image and it was finally appearing. A Cover block, in contrast, is housed in the Gutenberg Block Library, which is accessible by clicking on an Add Block button in the editor. Luckily, as WordPress has evolved, the errors have become a little less ambiguous, making it somewhat easier to determine their cause. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. Skandha. The only thing to do next is to review and publish the post. Be sure to Save Changes and try sharing another post to see if it now allows for featured images in the shared posts. Where do you go from here? Click the Homepage dropdown field to reveal the list of pages you currently have active on your website. All selected images appear as thumbnail previews in the plugins dashboard. It results in an image duplication issue like this: Obviously, you dont want this. Its not uncommon for brands to share a list of the most recent posts, yet a gallery or feed with just links may not attract as much attention. To adjust the location of a featured image, go to the page or post template being used. Deleted all plugins. The longest list of the most common WordPress errors and how to quickly fix/troubleshoot them (continuously updated). Its also possible to generate featured images based on post authors, tags, and post types. It allows you to swap out several previously listed uploaded featured images, making all of them the same image. Search for the Cover block and click to add it. Reinstalled GP plug in. Here's the definitive guide to fix WordPress featured image not showing properly on your site , reach out to your current hosting provider, reading our guide on WordPress user roles, cut this piece of code and paste it somewhere else, Kinsta bans the majority of Open Graph plugins, The Ultimate Guide to Fixing and Troubleshooting the Most Common WordPress Errors (70+ Issues), Visual Content Strategy: How to Use Visuals to Get More Traffic, 10 Stunning Places to Find Free Images For WordPress. The most common ones are: Incorrect home and site URL. Depending on your theme settings and various other factors, like certain plugins that change image settings, the featured image should appear first in your published blog post. Every hosted image, including featured images, has metadata crawled by the search engines to figure out what your post or page is all about. In this tutorial, we have a page called Homepage. Yours may have a different name depending on what youve named it. Again, in this tutorial, we named the page Homepage, but you may have something different. Youve figured out how to upload a featured image and completed your post content. Another way to see if this works is if you have any social sharing buttons on your website. This way, youre able to present somewhat of a media portfolio for your posts instead of a bunch of links with only text. You may have a lot of old posts that dont generate featured images when shared on Facebook. The the_post_thumbnail(); function may lie before the page title or after the contentthat depends on your page and theme configuration. Featured images look much better when the width is longer than the heightoften around a 2:1 ratio. If youre going with this route, we recommend an image compression plugin that automatically shrinks and optimizes all images uploaded to WordPress, such as Optimole or Imagify. This gets around the idea of uploading an image to your WordPress Media Library and activating that image as a featured image. The new dimensions are also listed on the right side of the pop-up window. Do you have to have a certain plugin to have it show up? There are several reasons for images to disappear from WordPress. Such plugins may not be the best solution if they block the featured image from being shown on a Latest Posts list, or if they make the featured image load slowlythe featured image should load immediately for optimal user experience. This turns on the featured images for all the latest posts being pulled. With the OG plugin activated, you should now see the post information and the featured image in the preview. Kinsta Hosting already offers Open Graph support, along with the possibility to control this using Yoast SEO. After all, its difficult to shrink, resize, and crop every image manually you plan to upload. Make sure to get this agreement in writing (email works too). Scroll down to the section called Document Settings. You can insert a Cover block anywhere in a post or page, not just at the beginning. To add content to your homepage, and to adjust the settings for the blog feed on that page, go to Pages > All Pages in the dashboard. Select the Twitter Cards tab to show the settings to configure your Twitter Card Tags. Its separate from the main content. To check, go to the WordPress post or page editor in question. Scroll down to the area called Image Settings. As a test, lets visit a post that already has a featured image included with the article. Fill in the title, write paragraphs, and upload images to the article. But what if the featured images arent showing on the blog page? You may have to switch it from Page to Block. Themes and plugins are some of the more common reasons featured images fail or get blocked. Just make sure to test your featured images are uploaded and set properly before embarking on more advanced solutions. A featured image does not differ from other photos on your website. Creating a website with stunning content to find that featured images dont show is both frustrating and potentially harmful to your brand.