Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. Scroll down on that panel and open the Featured Image dropdown item. Maybe you encounter one of the following: Luckily, WordPress already includes a wide range of photo editing tools for you to ensure the featured image looks professional. The image src is the full file path. I agree Pedro, I have never liked working Gutenberg editor, It has a way of messing things up. Both cover and featured images function in similar ways, providing large photos at the top of posts and pages, yet they have some differences. To call the header.php file, you should use get_header (); at the top of almost every template (Almost!) 2023 Kinsta Inc. All rights reserved. This field is available on all WordPress posts and pages by going to the Post Settings panel on the right side of the article or page. Three options are available for you to bulk edit the featured images: Choose the right option depending on what youre trying to achieve. The only thing to do next is to review and publish the post. Other times, you may notice that a theme presents a featured image in a different spot than whats expected. You can upload an image to be your cover by clicking on the Select Media or Upload buttons. You must host the image in a third-party location and ensure that it will be hosted there for the future. Visit our Facebook page; Visit our Twitter account; Visit our Instagram account; Visit our LinkedIn account A thumbnail of the image you go with shows up under the Featured Image panel in your Post Settings. However, the 1200 x 628 pixels suggestion is just a starting off point. Several factors can influence your header image not showing in WordPress, such as: An HTTP error due to the WordPress memory limit exhaustion. If you switch it to the Thumbnail option, those images shrink slightly and usually become perfect squares. To begin, go to your WordPress dashboard. Theres a field for choosing where the image should come from when sharing a post or page to social media. You may find that the theme coding doesnt support a featured image. This allows you to paste in up to 50 URLs and run the tool so that Facebook scraps their metadata properly again. Themes and plugins are some of the more common reasons featured images fail or get blocked. 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. 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. On the other hand, user roles dictate which areas of the WordPress dashboard and the frontend website are accessible to certain people. After all, a theme or plugin could be causing the problem. Thats a tremendous problem. By default, WordPress offers a featured image for all posts and pages. Is there a way to do that without using an external plugin? This way, youre able to copy and paste them easily into the Facebook Sharing Debugger Tool. You can still maintain the quality of an image after compression, cropping, or resizing. Make sure the Featured image toggle is switched on. Considering you should be uploading high-resolution images as featured images, it makes sense to automate optimization. After youve located the potential culprit, turn off lazy loading, clear your site cache, and check if that resolves any issues you may have with your featured images. This means that as you move the crop box, and it sticks to the aspect ratio. In terms of featured images on Facebook, we often see the following problems: All the concerns listed above stem from similar problems. 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. Insert any content you want for the blog post. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. If the featured image is showing on Facebook, then theres a good chance it also appears on other social sites. There can be up to 3 different headers (and footers) in a document, or each Section of a document. 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 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. 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. You have to be on the Posts or Pages panel for the right Screen Options panel to appear. Page header meta box says it's using my featured image. Reinstalled GP plug in. You also have the option to Save the crop, even though its done for you. We hope this guide helped you troubleshoot the common problems with featured images not showing on WordPress. For example, you may rather have one featured image appear in the sidebar, but a different one shows up when the post is in a list on your homepage. Get all your applications, databases and WordPress sites online and under one roof. This means that youve turned off a setting on your dashboard to reveal the Featured Images column. Get premium content from an award-winning cloud hosting platform. Find the Add Open Graph Meta Data switch and make sure its set to Enabled. Do the same for footer.php to get the footer. Its a must-read to speed up your WordPress site. Go to Posts > Add New to create a new blog post. Its also common to see varying degrees of featured image problems. If you find a photo that you really love, reach out to the photographer or artist and ask if you can use their work on your website. Note: Sometimes newer websites have trouble with Facebook and other social sites because Facebook hasnt crawled the site already. Thats the main reason you would take advantage of this plugin. Scroll down to the section called Document Settings. 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. This usually means that theres something wrong with the image itself, or you need to allow larger uploads to your WordPress site. This code snippet is a reference to your featured image. Its usually located at the top of the post or page. Its also possible to generate featured images based on post authors, tags, and post types. Still, WordPress provides simple editing features which may prove easier for some users, or for those who want to edit featured images that have already been uploaded to WordPress. Find the section called Featured image settings. It may sound silly to some, but many WordPress beginners dont know how to upload a featured image in the first place. It also works well with page builders like Gutenberg and Elementor. As with most WordPress settings, these also tend to modify the way your featured images appear. Problem with image name. Sometimes, featured images for pages are completely blocked. Simply, the above code is informing WordPress that if someone opens the page, which is 'about' then WordPress will display a file called header-about.php if it is existing. 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. The new cover shows up in the editor preview, and you can also edit the blocks settings on the right-hand panel. Where do you go from here? THANKS I suggest you to upgrade to pro. If a featured image isnt assigned to a post, it will show a blank space in its block instead. Theres also an Image Alignment setting to indicate if the images should slide to the right, center, or left. Be sure to click the Save Changes button to activate the default featured image on your site. For instance, you could type in a 2 x 1 aspect ratio. The Ixion theme page provides details of setting up your Header images and also the size specifications at the bottom of the page. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. In this module, you can select multiple images from your Media Library. Go to the post in question, click on the Share to Facebook link, and see if the featured image appears in the pop-up window. Again, in this tutorial, we named the page Homepage, but you may have something different. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. 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. To edit featured images in WordPress, open a post and scroll to the Featured Images section in the Post Settings panel. 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? Fix the Plugins or Themes 3. In this tutorial, we have a page called Homepage. Yours may have a different name depending on what youve named it. You have to call the header too. Its used to show the start of a new section or an article. The block is called Latest Posts. You can fix it by following these instructions: The solution often involves going to the theme settings and locating the featured images custom area. Note: Youre always able to come in here and change the static homepage. This is due to a wide variety of reasons. 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. Open the post or page in the editor. These best practices cover everything from design recommendations to uploading tactics, enabling you to feel confident about all featured images while also cutting down on the amount of time you spend with featured images. 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. Update: finally used WordPress reset plugin and cleared everything out. One of the last areas to consider for the Featured Image section (in the Latest Posts block) is the number of items you show in the block and how many columns make up the block. Lets take a look at the basic differences between cover and featured images. In this situation, you would randomly set multiple featured images for your posts based on photos you choose from the Media Library. The theme is not coded well, or the developer has removed the default featured image functionality on purposemainly because they have other settings to control the featured image. Think about installing a plugin that resolves problems for featured images without you having to do much work. Another specific Open Graph module from this plugin is for Twitter. You may only need a basic photo thats relevant to your website on those pages. Note the exact issue, like if the image isnt uploading. Some WordPress users complete all the right steps to upload a featured image but realize that a duplicate of the featured image appears. Images in my header seem to be spontaneously not showing in my headers. The preview image should look a bit smaller than before unless the change is so minuscule that you dont notice it. The default featured image then populates inside the posts Featured Image module. The thumbnail images arent showing up as the right sizes. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. Not all themes have the same featured image settings. An alternative is to install and activate a plugin like Export All URLs. The featured image is prone to human error, considering the page or post author must manually upload a featured image whenever creating a new webpage. Unfortunately, an image with malware or a virus is already compromised. 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. I have experienced similar issues, I exported my post from another website to another new site I am building when I tried importing, it didnt come with the featured images. Here, select the Facebook tab. A column called Featured Image is supposed to appear after the Post Date. It tells WordPress to display the featured image in the templates exact location. Featured images dont show up as thumbnails in your lists of posts and pages on the dashboard. But what if those thumbnail images are nowhere to be found? Were most interested in the bulk editing tool for this tutorial. If the featured image fails, you know which plugin is causing the problem. For instance, you may see the featured image appear on a list of Recent Posts or a blog feed on your homepage. Whenever youre done editing an image, you can click Enter to active the edit, and then Save the image. It is then presented as the primary image for that website item whenever the article gets shared on social media and other sites. The opportunities are plentiful with the Quick Featured Images plugin, so we suggest testing out the tools and seeing how you can bulk edit some of your older or non-functioning featured images to clean up the overall visual appeal of your website. The Link Preview area shows you exactly what your post will look like if you, or someone else, shares it on Facebook. Our feature-packed, high-performance cloud platform includes: Get started with a free trial of our Application Hosting or Database Hosting. Therefore, Kinsta bans the majority of Open Graph plugins as they can cause conflicts. This tells us the plugin is doing its job by adding the default featured image to the right posts and leaving out the ones that already have featured images. Auto Featured Image even has a bulk featured image generation tool. such as page.php, single.php, archive.php and so on. After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. When seeking out a featured image, always consider starting with a larger, high-resolution photo. Type in the new dimensions and click the Scale button. To remove that image block, click on the three-dot icon after selecting the image block. Returning back to the original page, the image suddenly shows up. Visuals can be decisive in your content marketing plan. Another way to use featured images is by listing a feed of your blog posts on your sites homepage (or any other page). 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. As promised, three choices appear when uploading an image through a Kinsta-hosted website: Choose one based on whether or not you have your own photos and where theyre stored. WordPress makes it easier to align images to the left, right, or center. Check out how this strategy can help get your blog get more traffic. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. Click on the Preferences menu (the three vertical dots at the top right). Choose the Facebook option and scroll down to locate the field to Enable Open Graph Markup. Its getting placed on a digital medium where the photos resolution doesnt necessarily have to be print-worthy to look good. However, you also want to stick to a consistent theme. This gets around the idea of uploading an image to your WordPress Media Library and activating that image as a featured image. Make sure to get this agreement in writing (email works too). After all, its difficult to shrink, resize, and crop every image manually you plan to upload. For instance, you may simply want to remove all the old featured images or make sure that all new featured images are set as one specific image. Search for the Cover block and click to add it. Your theme layout does not support featured images. Thats because theres no need to activate an Open Graph plugin with Kinsta. Make sure its on the Block settings tab. Its possible a theme changed this. The Ixion theme supports featured images on single Posts and Pages. Problematic WordPress themes or plugins. WordPress permissions decide who can read, write, or edit website files. This button has disappeared for me on WordPress. Once on the Developers Debug Tool page, find the Sharing Debugger tab, and paste the URL in question. But what if the featured images arent showing on the blog page? I have spent MONTHS trying to figure out why my images were not working it was the Hotlink thing ALL along!!! You can troubleshoot a featured image not showing up or edit each featured image manually. has_header_image (): bool. You can go to Post > All Posts to review your list of articles. That means only those images will get replaced by the new image. 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. We recommend experimenting with the content settings, like showing Post Content, Display Author Name, or Display Post Date. Locate the section titled Actions with a single image. A theme or plugin usually defines it. This section is outputting a style with a .site-header background image with a relative url; and is overwriting whatever it outputed before with the conditional is_page() codes. However, youre usually going to opt for the one titled Replace featured images by the selected image. This allows you to upload an image that will replace as many current featured images as you want. it's not working. This shows that youd like to have a customizable homepage with the ability to add and remove block elements through page builders like Gutenberg. Overall, photos on your website take up a significant amount of server space, potentially slowing down your site loading times. I always prefer the classic editor. However, keep in mind that an image uploaded to your blog posts content area doesnt have anything to do with the featured image, even if its the first photo you upload to that article. However, you still may see a vague error, as the following HTTP error. message. 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. Click the Remove Block option at the very end of the list. For more details, you can see our guide on how to add header and footer code in WordPress. It allows you to swap out several previously listed uploaded featured images, making all of them the same image. In the Preferences overlay, click on Panels on the left. To move forward and see the featured image in action, click the Publish button. Easy setup and management in the MyKinsta dashboard, The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability, An enterprise-level Cloudflare integration for speed and security, Global audience reach with up to 35 data centers and 275 PoPs worldwide. However, well recommend a few Open Graph plugins to resolve issues if any of your websites are running on another web host. Giving it a new position within the template will also tell WordPress that it should render somewhere else on the frontend. Another way to see your featured image is to create Recent Post galleries or feeds to your blog, usually elsewhere on your website. We covered this solution already in the previous section, yet it fits well in the best practices, too. Another element of image optimization involves how those images will show up in the search engines. Simply having a header.php in your theme's folder will not output your header to the browser. Whats more, several settings are now available to make the featured images look professional. Be sure to Save the settings after youre done. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. Honestly, I really dont like the Gutnberg editor. Thats a sure-fire way to eliminating legal problems. Activating Open Graph on your WordPress site is pivotal in showing your featured images on platforms like Facebook. Scroll down the list of settings to locate the Preferences option. Set the selected image as the new featured image. 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! That means you cant simply take any photo and expect it to look great as a featured image. Kinsta and WordPress are registered trademarks. 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. Plugin Conflicts. 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. The Large Size often dictates the featured image dimensions when shown at the top of a post or page. A cover image provides a wide or full-width image section to add anywhere on the site. 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. It takes every URL on your site and exports them into a simple document. You can find the Featured Image in the right-side Settings panel for all posts and pages. Checks whether a header image is set or not. You would select those images later and swap every single one of them out in place of the new one. The the_post_thumbnail(); function may lie before the page title or after the contentthat depends on your page and theme configuration. @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. Editing inside WordPress is also an option, but that doesnt typically resolve to get the WordPress image to begin with. It greatly benefits the website by turning what could very well be a dull website into something beautiful. The true advantage of a plugin like OG is that it doesnt require any configuration after the installation. The Crop tool reveals a square within the preview thumbnail, asking you to click and drag the crop box so that it gets to the exact dimensions you desire. WordPress added the Cover block to its Gutenberg editor only recently. We also recommend looking at the Image Dimensions. In general, a cover image is far more customizable directly from the WordPress dashboard than a featured image. There are several reasons for images to disappear from WordPress. Unfortunately, you discover that the featured image doesnt look quite as nice as you had hoped it would. The screenshot below tells us that our featured image is showing up just fine. Another way to see if this works is if you have any social sharing buttons on your website. I felt I should post it here for those having same issues. One way to ensure your featured image field is never empty is to set a default featured image for all posts. You may unsubscribe at any time by following the instructions in the communications received. 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. Fill in the title, write paragraphs, and upload images to the article. There, below the disable section title, you can check all the boxes of the sections that you would like to remove. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. For example, you might complete an action with multiple pages. It can also prevent people from sharing your work, considering its not all that appealing to share a blog post on Facebook that doesnt have a featured image. We dont recommend trying to enlarge an image as itll only make it blurry. Click the + Block Inserter icon to add a new block. Hello! Overall, the best way to activate the Open Graph protocol for properly sharing content and featured images on social media is by installing a plugin like Yoast SEO or OG. First, the plugin opens up the default limit that WordPress sets of having one featured image per post. Make sure thats checked off to reveal the Featured Image option in your posts and pages. For instance, you might consider including things like the Site Name and Post Title but not having the URL. The Cover block gets placed into the content editor, far away from the area in which we saw the featured image. Although not all featured image correction plugins complete the same tasks, there are a few that we recommend looking into before trying any drastic changes with your website. Scroll through the list of pages to locate the one you assigned as the Homepage. We recommend only using a media hosting platform, or maybe another website host that you own yourself. 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. You can see that two of my posts now have a new featured image, and theyre the same images. Check out our post on the 10 best places to find free images for WordPress, no strings att, Get started, migrations, and feature guides. Every hosted image, including featured images, has metadata crawled by the search engines to figure out what your post or page is all about. But didn't notice the header image was missing from the desktop view until today. 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. Theres a long list of settings to mess around with, so its entirely up to you. Try to set the images as featured images for the Posts and the pages. 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. It helps with cleaning out those posts where you forgot to add a featured image or, at some point, removed it due to the original featured image not holding up to your standards. Added a featured image and it was finally appearing. The following block of code is what you can insert (or look for) in the functions.php file: Lazy Loading serves as one of the many methods used for optimizing images to improve site performance. The following page explains which current featured images will be replaced by the future featured image you specified from before. Incorrect references in image URLs. This might be the root of your featured image problems. Start your free trial today. This means you must make a page and assign it as the Homepage in the WordPress Reading settings. You should avoid stuffing keywords just because you want to. Some websites already have hundreds or even thousands of featured images, so a bulk editing tool is required. A featured image does not differ from other photos on your website. Scroll down to find a new field called Default Featured Image. As a quick reminder, you can turn any WordPress page into the homepage by going to Settings > Reading in the dashboard. Disable Lazy Loading 4. Do you have to have a certain plugin to have it show up? 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. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. Itll avoid causing problems with your own server. We'll get back to you in one business day. This could be just above your site's title and menu, for example. The featured image may not be in the right place inside the page or post template. Several images are pulled from the post, but you must choose which one you want to use. You may have to switch it from Page to Block. The max height shouldnt matter as much since your featured images shouldnt be that tall. You can search for specific keywords and set them as your featured images.