Click the Homepage dropdown field to reveal the list of pages you currently have active on your website. I agree Pedro, I have never liked working Gutenberg editor, It has a way of messing things up. Therefore, I am trying to use the custom field name "header_image with the value using the the correct url. The only problem is that it doesnt tell you which of your Media Library images have been previously uploaded as featured images. It should have a Front Page label next to it. Yet, leaving your larger, high-resolution photos in their original formats will surely cause loading problems. If you see the same photo under the Featured Image tab and in your content, thats causing the problem! On the other hand, user roles dictate which areas of the WordPress dashboard and the frontend website are accessible to certain people. After that, feel free to drag it up or down on the homepage so that its located in the proper position. It could be a good thing but it downgrades the development experience. 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. 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. Your theme, or a plugin, has an error or is causing a conflict with your featured images working. Hello! Thats how it should be if you want the functionality of a featured image with no duplication! 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. Though, it varies depending on your WordPress sites configuration, theme, and plugins. You have to be on the Posts or Pages panel for the right Screen Options panel to appear. 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. You are not familiar with PHP so you can use this plugin for the header image. I don't understand why the image only works in . Thats because having four columns will require having much more space (and smaller images) than a block with two or three columns. You have the option to choose one and click the Set Featured Image button. You may see a simple list of links, along with descriptions from those posts. Three image sizes often get configured on WordPress: Thumbnail, Medium, and Large. It also works well with page builders like Gutenberg and Elementor. This should get you closer to the optimal featured image size for your theme. Begin by installing and activating the Default Featured Image plugin. All files/pages are in the root folder. Your dashboard settings could have the featured image fields completely turned off. I have created several files/pages, such as; index.php, front-page.php, page-about.php and single.php for example. Legal information. Therefore, Kinsta bans the majority of Open Graph plugins as they can cause conflicts. The great part about this plugin is that it doesnt replace the featured images you already have on your posts. I later deactivated the plugin, but that hasn't made a difference. However, you also want to use photos that actually look good, so you should still shoot for high-resolution photos as much as possible. This helps speed up your featured image creation process while also helping your brand. Go to Appearance Editor. But what if thats not the case? Make sure the Featured image toggle is switched on. Youre better off editing a photo to meet those suggested dimensions before uploading it to WordPress. Image optimization tools like ShortPixel and, Direct lazy loading plugins such as Lazy Load by, Database and site optimization tools such as. 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. Lets take a look at the basic differences between cover and featured images. My Header media is not showing on my homepage on desktop view. 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. The default featured image then populates inside the posts Featured Image module. To start, install and activate the Open Graph and Twitter Card Tags plugin on your WordPress site. Featured images break for various reasons, and its often on a case-by-case basis. As long as youre not making the image too small, you should still be able to offer a beautiful featured image. However, Lazy Loading often causes problems with featured images since some Lazy Loading plugins treat featured images as regular images. Figuring out the optimal dimensions before uploading the images allows you to minimize instances where the featured image gets stretched out or cropped strangely. Many image optimization plugins offer lazy loading functionality as an add-on. 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. 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. As an alternative, its often a better idea to leave the Crop Thumbnail box unchecked, so the Thumbnail dimensions are used as more of a guideline. The first is OG, which comes in handy for adding the Open Graph protocol to turn any webpage into rich objects for social media. These dont control your featured image, but they show up right below the featured image, so its important for displaying the content. There is a plug in or other theme option set which is changing the margin-left styling for .header-img. Yet, we should all take our time when deciding on a featured image, seeing as how its the book cover of the post thatll get people to pick it up and read. Still, its far easier to know the core approaches to featured images to minimize problems in the first place. Its the opposite of only showing a list of your Latest Posts. Yeah inside the Editor, when editing a post, clicking the Settings, then scrollow down past Permalink, Categories, Tags, etc. In that case, you should keep the photo under the Featured Image area and delete the one in the articles content editor. 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. That means only those images will get replaced by the new image. For more such image optimization tips and tricks, read our in-depth image optimization guide. header_image() | Function | WordPress Developer Resources This is due to a wide variety of reasons. Finally, you also have the option to visit theDevelopers Debug Tool on Facebook. My guess is your Head navigation is not called in header.php check you file page.php and see the lines following <?php get_header (); ?> if the lines below introduce header navigation either move them into header or copy them into same location in your single.php file Share Improve this answer Follow answered Nov 16, 2016 at 16:03 Artem Ankudovich Upon activation, you can go to Code Snippets Header & Footer from your WordPress dashboard. If your featured image problems dont stem from a misunderstanding of the upload process, continue reading. Youve noticed something wrong with one, or all, of your featured images. 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. Its used to show the start of a new section or an article. Once on the Developers Debug Tool page, find the Sharing Debugger tab, and paste the URL in question. 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. 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. Choose Preferences from the bottom of the menu that appears. Remove the selected image as the featured image. This setting controls the sizing of all featured images shown in the Latest Posts block. If you switch it to the Thumbnail option, those images shrink slightly and usually become perfect squares. You can upload a featured image to every post and page. In the Astra theme, launch the edit screen of your desired page and expand the Astra settings tab from the bottom right corner. To begin, go to your WordPress dashboard. 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. If thats the case for you, youll have to consult with the plugins developer. Why WordPress Images Aren't Showing and How to Fix them Checks whether a header image is set or not. 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. There should be no image at the beginning of the post nowjust an image thumbnail preview in the Featured Image module. Lets start with the simplest of solutions, making sure youre uploading your featured images properly. To move forward and see the featured image in action, click the Publish button. All of them allow you to adjust or get rid of the current featured image. I disabled it , proved it worked, then enabled it to test and noticed that when enabling it again, this time it had automatically added in the new websites into the exceptions list and now everything works again!! 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. However, you may have to update previously published posts for the default featured image to show up on those. 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. I felt I should post it here for those having same issues. It tells WordPress to display the featured image in the templates exact location. Thats what we were trying to accomplish. On the way, you also learned tips to improve your image editing skills and workflows. The last way to edit featured images in WordPress involves cropping the image but maintaining a certain aspect ratio. 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. There are many ways to go about it, and well cover them all. Theres also an Image Alignment setting to indicate if the images should slide to the right, center, or left. 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. That means therere no settings to look at or change before it working its magic. Stick with landscape sizes over portrait photos. If either is the case, open the page or post in question and look for the Featured Image block towards the pages right side. Whenever youre done editing an image, you can click Enter to active the edit, and then Save the image. Customizer: Header And Background Images | Learn WordPress With your position I solved a problem that lasted for months. For instance, we added a Recent Posts feed on the homepage of our test site. I don't think I've changed anything in setting to cause this. Each file/page calls the header.php and displays it. 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. 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. To edit featured images in WordPress, open a post and scroll to the Featured Images section in the Post Settings panel. Make sure thats checked off to reveal the Featured Image option in your posts and pages. An odd page header\footer. Here, select the Facebook tab. Usually, duplicate featured images arent two featured images, but one featured image and a separate photo in the articles content area. For instance, the last image in a long article doesnt necessarily have to load until the user scrolls down to the bottom of the page and gets to that image. Think about using the built-in image editing tools in WordPress for featured images that are already uploaded but could use some changes. This way, youre able to copy and paste them easily into the Facebook Sharing Debugger Tool. After each reinstallation, you should check to see if the featured images are still functioning and showing up properly. All of these come into play when highlighting your recent posts and ensuring they look presentable while also displaying your featured images. It promises to make the featured image upload process a little easier for website owners. 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. In this tutorial, we have a page called Homepage. Yours may have a different name depending on what youve named it. 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. Make sure its on the Block settings tab. Its possible a theme changed this. 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. But didn't notice the header image was missing from the desktop view until today. WordPress added the Cover block to its Gutenberg editor only recently. You may also want to set a Default Image URL to appear if a post doesnt have a featured image assigned to it. You have to call the header too. Update: finally used WordPress reset plugin and cleared everything out. A theme or plugin usually defines it. If not, reactivate the plugins and move onto a different cause of the problem. Under there, youll find a field called Featured Image. Activating Open Graph on your WordPress site is pivotal in showing your featured images on platforms like Facebook. Scroll down to the area called Image Settings. 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. Fix the Plugins or Themes 3. It may sound silly to some, but many WordPress beginners dont know how to upload a featured image in the first place. customization - Header image doesn't show up on page - WordPress Participant. When seeking out a featured image, always consider starting with a larger, high-resolution photo. This allows you to type in new dimensions, both the width and height, so that the already uploaded featured image shrinks. You can find the Featured Image in the right-side Settings panel for all posts and pages. 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 what if those thumbnail images are nowhere to be found? Another concern is that a certain page or post in your WordPress files isnt accessible because of user permissions. Regardless, a WordPress featured image not showing up is both frustrating and concerning. We covered the Quick Featured Images plugin above in this article. Talk with our experts by launching a chat in the MyKinsta dashboard. This means you can upload several featured images and choose which one of them gets shown on different parts of your website. When I exported post and media and imported on my new site everything was fine eventually. Fill in the title, write paragraphs, and upload images to the article. 2 Answers. Starting with dimensions, all websites, or more specifically, the website themes, have varying dimensions for featured images in posts. To remove that image block, click on the three-dot icon after selecting the image block. 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. Giving it a new position within the template will also tell WordPress that it should render somewhere else on the frontend. We dont recommend trying to enlarge an image as itll only make it blurry. Youll see a message that tells you the Image Saved. The Auto Featured Image plugin provides a unique option for fixing featured image problems. The good news is that WordPress blocking an image because of this reason means that WordPress has done its job! Click the Choose Image button to proceed. All you have to do is click on the icon to insert it somewhere on the homepage. Featured images are wonderful, but you may find that youre unable to see a featured image for a post or page for one reason or another. Incorrect image URLs. Learn how to fix it once and for all Click to Tweet. Upload a Header Image - WordPress.com Support Or they simply arent updated, leading to all sorts of conflicts. A featured image does not differ from other photos on your website. Click on the Preferences menu (the three vertical dots at the top right). February 22, 2022 at 2:36 am #300302. 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. As you can see, the image we inserted into the post content is shown second since the featured image gets prioritized. As you can see, the two posts shown from before had their featured images swapped out by the one I had wanted. The problem prevents images from displaying on both the backend and frontend. The Link Preview area shows you exactly what your post will look like if you, or someone else, shares it on Facebook. Furthermore, an engaging story isnt complete without the introduction, and thats exactly the purpose of a featured image. Note the exact issue, like if the image isnt uploading. Learn how to fix it once and for all , Featured images matter. I looked at the Graphene theme and didn't see anything in the theme which would do that so it's probably a plugin. 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. 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. Explore our plans or talk to sales to find your best fit. Allow Featured Image for Viewing 6. Kind Regards, Skandha. Click the Preview Filtering button to see which bulk replacements will occur. Thats because theres no need to activate an Open Graph plugin with Kinsta. This is particularly important if youre highlighting your recent posts on the homepage. Be sure to Save the settings after youre done. 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. Sometimes, featured images for pages are completely blocked. It is primarily used for replacing featured images in bulk. Its getting placed on a digital medium where the photos resolution doesnt necessarily have to be print-worthy to look good. Also, you may have to configure a specific theme setting so that featured images are populating for all posts. The next part is the most important element since it activates the featured images in the Latest Posts block. One way to complete this task is by opening up your Facebook account and pretending youre about to share a status update. Its also rather common to adjust the cover to fill the pages full width, making it even more effective to introduce an article or a separator between sections. Its also possible to generate featured images based on post authors, tags, and post types. Furthermore, theres an option in the Edit Image panel that lets you revert to the original dimensions whenever you want. This is still common for many pages, or you may have rolled back the Gutenberg editor to use the old editor instead. Hence, many hosts, and WordPress itself, define a maximum upload file size. A WordPress featured image functions as a visual welcome card, a cue to visitors to come on in and enjoy whats behind a link. Another specific Open Graph module from this plugin is for Twitter. As a good rule of thumb: If you didnt take the photo yourself or pay for rights, you might not be able to use it. 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. Click on the page specified as the Front Page. For more details, you can see our guide on how to add header and footer code in WordPress. You can go to Post > All Posts to review your list of articles. 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. Besides, any image you use on your site, including featured images, shouldnt be that large, to begin with. Youll typically see this happens on post lists or at the top of a page or post, resulting in two of the same photos stacked on top of each other. Below well cover every problem we know of when it comes to featured images and outline the steps you can take to fix them. The .header-img is a common css class in WordPress themes. The next step is to Add a Filter, which essentially asks you to choose the images you want to replace. For free, a fee, or with attribution. Search for the Cover block and click to add it. Editing inside WordPress is also an option, but that doesnt typically resolve to get the WordPress image to begin with. Here, you need to fill in fields like the Description Length, Homepage Description, and Default Description. A lazy loading plugin may be preventing the featured image from showing up or loading quickly. You can click on the Scrape Again button or simply refresh the page and paste your post URL in the field once more. 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. As you can see, a different image appears in the Featured Image section. Problem with image name. You never know when a human error may result in a featured image not being uploaded to your website. Click the Background Image section of the Customizer panel. 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.