Fill in the title, write paragraphs, and upload images to the article. 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. I checked several of your other pages and do not see any with narrower header images like on that page, so I've limited this change to only that specific page by using its unique page id CSS class from the opening body html tag. It is working fine for mobile and tablet. 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. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. Created new Home page. Premium Responsive WordPress Themes with advanced functionality and awesome support. The function get_header is used for calling a new header file. If not, how do you go about fixing that problem? Do the same for footer.php to get the footer. has_header_image (): bool. You can click on the Scrape Again button or simply refresh the page and paste your post URL in the field once more. 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. The last page presents the bulk edit results, with details about the posts that now have new featured images. After that, youre able to insert the new version of that image into a post, page, as a featured image, or wherever you want it to show on your site. Regardless, select an image, or multiple images, by holding down the Shift key while choosing the images, and click the Choose Images button to proceed. You may find that the theme coding doesnt support a featured image. 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. The Screen Options section has a long list of fields to check off and sets what you want in your WordPress dashboard. The advantage of using a method like this is that theres no relying on a default featured image that may not apply to the post. Whats more, several settings are now available to make the featured images look professional. 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. All files/pages are in the root folder. You should avoid stuffing keywords just because you want to. Activating Open Graph on your WordPress site is pivotal in showing your featured images on platforms like Facebook. Feel free to go back and choose more images if you missed any. Youre better off editing a photo to meet those suggested dimensions before uploading it to WordPress. Once everything is configured, hit the Publish button. Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. For instance, you might consider including things like the Site Name and Post Title but not having the URL. Make sure thats checked off to reveal the Featured Image option in your posts and pages. For instance, you could cut down each featured image to 25% of its original size. To adjust the location of a featured image, go to the page or post template being used. Finally, the featured image shows up automatically when you create a feed or gallery of your blog posts or other webpages. As you can see, a different image appears in the Featured Image section. Even if they tell you that the image is too big, how do you move on from there? This means you must make a page and assign it as the Homepage in the WordPress Reading settings. I agree Pedro, I have never liked working Gutenberg editor, It has a way of messing things up. Page header meta box says it's using my featured image. Another element of image optimization involves how those images will show up in the search engines. Each file/page calls the header.php and displays it. This means that youve turned off a setting on your dashboard to reveal the Featured Images column. After all, its difficult to shrink, resize, and crop every image manually you plan to upload. 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. Talk with our experts by launching a chat in the MyKinsta dashboard. A big part of making sure featured images look right is to understand the best practices before uploading them to your WordPress site. As long as youre not making the image too small, you should still be able to offer a beautiful featured image. Featured images often carry the weight of your websites visual appeal. After that, click on the Save Changes button and test to see if Facebook sharing allows the featured image to appear. Besides, any image you use on your site, including featured images, shouldnt be that large, to begin with. When seeking out a featured image, always consider starting with a larger, high-resolution photo. You can still maintain the quality of an image after compression, cropping, or resizing. Make sure the area that says Your homepage displays is set to A Static page. This could be just above your site's title and menu, for example. This article shows you how you can fix WordPress featured images not showing properly on your website. Click on the Preferences menu (the three vertical dots at the top right). For instance, the Image Size field tells your website how large to make those featured images in the list or gallery. Select the first two checkboxes to grab the Open Graph image, while the other is for using the page or post featured image. Visit our Facebook page; Visit our Twitter account; Visit our Instagram account; Visit our LinkedIn account The new dimensions are also listed on the right side of the pop-up window. 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. You would select those images later and swap every single one of them out in place of the new one. 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. We recommend solutions like Optimoleand Imagify. 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 following page explains which current featured images will be replaced by the future featured image you specified from before. Reactivate each plugin one-by-one. Finding free images for personal and commercial is hard. There are many ways to go about it, and well cover them all. Legal information. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. The featured image should quickly appear whenever someone wants to share one of your posts or pages on a social network. Scroll through the list of pages to locate the one you assigned as the Homepage. You would usually find the featured image right below the title and above the first line. Here, youll see a Progress Bar at the top of the page. A thumbnail of the image you go with shows up under the Featured Image panel in your Post Settings. Larger images get compressed and lose quality, while smaller images get stretched out and end up looking terribly blurred. Find and select the triple-dot icon () in the far right corner of the dashboard. 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. An easy way to see if the Open Graph code is activated on your site is by utilizing an SEO plugin. It's only on select pages though (front page and blog page). Locate the Settings panel towards the right side of the page. 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. Therefore, you have to check each plugin to see if they have this feature enabled 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. Again, in this tutorial, we named the page Homepage, but you may have something different. We covered the Open Graph essentials in the section above. Replace featured images with the selected image. Explore our plans or talk to sales to find your best fit. Consider any WordPress issues that may be causing the problem with your featured image, like conflicts between plugins or a. You can also set featured images from more unique sources, like a book API or an ISBN, or even from a post title or search engine. There, below the disable section title, you can check all the boxes of the sections that you would like to remove. Thats what we were trying to accomplish. However, if you use any other hosting provider, it may prove useful. The Auto Featured Image plugin provides a unique option for fixing featured image problems. The Cover block gets placed into the content editor, far away from the area in which we saw the featured image. Kinsta Hosting already offers Open Graph support, along with the possibility to control this using Yoast SEO. 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. However, with the Default Featured Image plugin active, all you have to do is click on the posts Update button. This selects the entire block and reveals settings for that block in the right-side panel. If a featured image isnt assigned to a post, it will show a blank space in its block instead. Click on the area where you want to place a header image. Choose Preferences from the bottom of the menu that appears. It results in an image duplication issue like this: Obviously, you dont want this. Yet, leaving your larger, high-resolution photos in their original formats will surely cause loading problems. Auto Featured Image even has a bulk featured image generation tool. We would assume the first image in a post is relevant to the topic, so theres no need to worry about a default featured image getting pulled from a file and duplicating the same image on several posts. A featured image does not differ from other photos on your website. This tool scrapes any URL you want and tells you whether any errors occur with Facebook accessing the information. Thats how it should be if you want the functionality of a featured image with no duplication! On the way, you also learned tips to improve your image editing skills and workflows. We recommend checking boxes for the Title, URL, and Description. The reason it shows on that page is because the header image has white areas on the left and right. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. If the problem isnt fixed, proceed to deactivate all plugins. The Default Featured Image plugin offers a simple way to override all instances where a featured image is not set for a page or post. We dont recommend trying to enlarge an image as itll only make it blurry. There can be up to 3 different headers (and footers) in a document, or each Section of a document. First, you can do it from your WordPress site's dashboard via the Kinsta Cache tab in the left sidebar and the Clear cache button: How to clear Kinsta page cache in WordPress Dashboard Second, you can also clear your site's cache via your MyKinsta dashboard. Finally, you should check the box to Include Image, as this is the only way Twitter grabs your featured image from a post or page. To start, install and activate the Open Graph and Twitter Card Tags plugin on your WordPress site. Your dashboard settings could have the featured image fields completely turned off. With the OG plugin activated, you should now see the post information and the featured image in the preview. 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? The wrong featured image is showing up on Facebook. Check out our post on the 10 best places to find free images for WordPress, no strings att, Get started, migrations, and feature guides. If thats the case for you, youll have to consult with the plugins developer. You are not familiar with PHP so you can use this plugin for the header image. it's not working. The Ixion theme supports featured images on single Posts and Pages. You can check out the additional-features available in the theme. The Quick Featured Images plugin handles bulk editing for featured images along with a myriad of other functionalities, like adding a default featured image for all posts or setting presets for default featured images. It greatly benefits the website by turning what could very well be a dull website into something beautiful. After all, a theme or plugin could be causing the problem. February 22, 2022 at 2:36 am #300302. Thats a problem, so follow the steps below to ensure your featured image is always ready to go for social sharing. For instance, you could add or remove items like tags, categories, and the author. Stick with landscape sizes over portrait photos. 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. Where do you go from here? Locate the section titled Actions with a single image. Incorrect references in image URLs. Be sure to click the Save Changes button to activate the default featured image on your site. 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. Many image optimization plugins offer lazy loading functionality as an add-on. Get all your applications, databases and WordPress sites online and under one roof. Relevance also comes into play when you manually insert an image for each featured image in an article. Note the exact issue, like if the image isnt uploading. This code snippet is a reference to your featured image. However, you may have to update previously published posts for the default featured image to show up on those. Another Screen Options dilemma comes into play when you do not see the actual field to upload and insert a Featured Image. The set dimensions dictate the maximum dimensions youll see on your website for the given image sizes. Check out how this strategy can help get your blog get more traffic. It also provides a clean preview of what you can expect to see if you were to paste or share that URL on Facebook. Lets start with the simplest of solutions, making sure youre uploading your featured images properly. 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. Once on the Developers Debug Tool page, find the Sharing Debugger tab, and paste the URL in question. Unfortunately, you discover that the featured image doesnt look quite as nice as you had hoped it would. 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. You may have a lot of old posts that dont generate featured images when shared on Facebook. For instance, you may see the featured image appear on a list of Recent Posts or a blog feed on your homepage. 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. To call the header.php file, you should use get_header (); at the top of almost every template (Almost!) The only thing to do next is to review and publish the post. This helps speed up your featured image creation process while also helping your brand. Now I just need to fix everything else on my website that I had turned off and messed around with while going slowly insane trying to trouble shoot a problem that was nothing to do with WordPress, themes or plugins GRRRRRRRR. Click the Homepage dropdown field to reveal the list of pages you currently have active on your website. Your theme layout does not support featured images. Theres quite a bit of information about how your URL interacts with Facebook, but all you need to look at is the preview. The Thumbnail size is the featured image shown in other parts of your website, outside of the post itself. Another way to use featured images is by listing a feed of your blog posts on your sites homepage (or any other page). Now, go to your Facebook page (personal or business) and paste a link with a featured image into the Status field. 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. This is the only section of the dashboard that gets changed by the Default Featured Image plugin. Showing a gallery or list of your recent blog posts is done by adding a Gutenberg block element to the page designated as the WordPress Homepage. If allowed, you can also change the PHP memory limit on your own by editing your sites wp-config.php file. The plugin also has a wonderful native search engine that pulls from places like Google, Pixabay, and Unsplash. You have the option to choose one and click the Set Featured Image button. Youve noticed something wrong with one, or all, of your featured images. My Header media is not showing on my homepage on desktop view. 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. It would be troubling and potentially illegal to simply search for an image online, take its URL, and use the image for your featured image, as you do not know where the image URL is hosted. You also have the option to Save the crop, even though its done for you. It eliminates a significant amount of manual upload work that could be waiting for you. All selected images appear as thumbnail previews in the plugins dashboard. Some non-WordPress image editing tools you can use are GIMP, Photoshop Express, and Paint.NET. 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. Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. Upload the image here and click the Save button. 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. Search for the Cover block and click to add it. Kinsta and WordPress are registered trademarks. We also recommend looking at the Image Dimensions. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. Wrong file permission or ownership. You should now see a thumbnail of that image for all posts that dont have featured images already uploaded. 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. Go to Appearance Editor. This means you can upload several featured images and choose which one of them gets shown on different parts of your website. Regardless of whether setting a proper alt text for images helps with SEO, you should do it anyway for accessibility reasons. The key to fixing this issue is ensuring your user roles and permissions are all set properly. One way to ensure your featured image field is never empty is to set a default featured image for all posts. You can reach out to your current hosting provider and ask them to expand the PHP limit. If the goal is to have no featured image, you can remove it altogether. That means only those images will get replaced by the new image. For instance, all of your featured images could have a black and white filter. It is then presented as the primary image for that website item whenever the article gets shared on social media and other sites. You can upload an image to be your cover by clicking on the Select Media or Upload buttons. Therefore, you may have to use custom code to customize the featured images appearance. The first is going about it manually, clicking on each post and page on your site and collecting the URLs into a document. For example, you might complete an action with multiple pages. Therefore, I am trying to use the custom field name "header_image with the value using the the correct url. Every hosted image, including featured images, has metadata crawled by the search engines to figure out what your post or page is all about. Make sure the Featured image toggle is switched on. Also, I believe the classic editor should be a matter of choice instead of another plugin to install. 3. In general, a cover image is far more customizable directly from the WordPress dashboard than a featured image. We recommend reading our guide on WordPress user roles to ensure everyone on your team can access and view featured images at all times. Twitter Cards are a little different than Facebook sharing modules, so you can go through these settings to make sure everything looks good. Although automating the process isnt for everyone, there are tricks to ensure that a WordPress featured image is always shown for posts and pages, minimizing the chance that an author forgets to upload one. The great part about this plugin is that it doesnt replace the featured images you already have on your posts. Theres no reason to go into troubleshooting mode if your featured images and post content all come up fine on Facebook when the post gets shared. has_header_image (): bool. The default featured image then populates inside the posts Featured Image module. 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. Kind Regards, Skandha. This lists various settings for the entire post and can also reveal Block-specific settings if you have a WordPress Gutenberg block currently selected. Therefore, click on the Choose Images button under the section titled Select the featured images you want to replace by the selected image..