One place for hosting & domains

      How to Fix 16 Common Image Issues in WordPress

      High-quality imagery can do wonders for your website. When used right, images can make your content highly engaging and easier to digest. More importantly, blog posts with images tend to rank better in search engines than those lacking visuals. Therefore, it’s essential to know how to use images on your site adequately.

      WordPress enables excellent flexibility when it comes to adding photos to pages and posts. You can format your images and arrange them within your content any way you wish. You can also make your site more visually appealing with features such as photo galleries, headers, and background images.

      If you want to learn more about using images on your WordPress site, you’ve come to the right place. In this post, we’ll show you how to fix 16 common image issues in WordPress with clear, step-by-step instructions. Let’s get started!

      We Make WordPress Easier for You

      Leave migrating your site, installing WordPress, managing security and updates, and optimizing server performance to us. Now you can focus on what matters most — growing your website!

      1. How to Upload Images in WordPress

      To upload an image in a WordPress post or page, simply click on the black button with the plus symbol (in this post, we’ll refer to it as the Add Block button). This will ask you to choose a block to insert into your content.

      Select the Image button, and a block will appear.

      Uploading an image in WordPress.

      Next, click on the Upload button and select the image you want to add. Select Open, and then you’re done!

      2. How to Align an Image to the Left or Right

      When you select an image, a toolbar will appear above it. Click on the alignment button and choose Align left or Align right.

      Aligning an image in WordPress.

      As you can see, this toolbar also gives you other options as well. This includes replacing the image and adding a link to it.

      3. How to Add Captions Below Images

      To add a caption, simply click on your image, and you’ll see the option to write something below.

      Writing an image caption in WordPress.

      Note that you’ll also get a few styling options for your caption. You can link to another page by clicking on the third button in the caption toolbar.

      4. How to Display Images in Columns and Rows

      If you want to display images in columns and rows, you can click on the Add Block button and select Gallery from the options. Next, click on Upload in the gallery block, and then select the images you want to add and choose Open.

      Adding an image gallery in WordPress.

      Once your images have been uploaded, you’ll be able to move them around. To do this, you can click on an image and use the arrow buttons. You’ll also see an option to write a caption for your images and the gallery.

      5. How to Create Responsive Image Galleries

      The default WordPress gallery is very basic. If you use your site to showcase your photography, you might want to consider adding a plugin that lets you build and customize your own image galleries.

      For beautiful responsive galleries, we recommend using the Envira Gallery plugin. After installing and activating the plugin, navigate to Envira Gallery > Add New. There you can create your first gallery, which you can then insert into your posts by selecting the Envira Gallery block.

      The Envira Gallery settings page.

      You can start by uploading some photos to your gallery and then clicking on Config to select the number of columns, set the lazy loading delay, and use the other available features.

      Adding an Envira Gallery in WordPress.

      Remember to name your galleries. This way, you’ll be able to find them more easily when adding them to your posts.

      6. How to Set Featured Images for Posts

      WordPress lets you select a featured image for your posts. This image will be attributed to your post when it appears in your blog feed. Without a featured image, your post will have a missing thumbnail image. A post thumbnail is a reduced-size picture that appears on your blog’s homepage to help users sort through and identify relevant content.

      To set a featured image, head to the sidebar on the right, select the Post tab, and navigate to the Featured image section.

      Setting a featured image in WordPress.

      Next, click on Set featured image and upload your image file. Alternatively, you can choose an image that is already uploaded to your site by clicking on the Media Library tab.

      7. How to Add Cover Images in Posts and Pages

      If you’re writing a long post, you might want to add a wide cover image between different sections so that your content is more digestible. To add a cover image, start by clicking on the Add Block button and typing “cover” into the search bar.

      Once you select the Cover button, the block will appear. Click on Upload to add an image from your computer, or select Media Library to choose an image you’ve already uploaded to your site.

      Adding a cover image in a WordPress post.

      If you want to make some changes to the cover image, you can use the options in the tool section in the post.

      8. How to Fix the Featured Image Appearing Twice

      Some WordPress themes display the featured images at the top of published posts. This image will not be visible in your post when using the content editor.

      Therefore, you might think you have to insert it into your content in addition to setting it as the featured image (as shown in step six). If you do this, you’ll get the same image twice in your live post.

      Fixing a featured image appearing twice issue.

      To fix the multiple images problem, simply delete the image from the post editor. Then you can just use the one you selected in the Set featured image box.

      9. How to Crop Images

      WordPress offers some basic photo editing features. To edit a photo, you can go to your WordPress dashboard and navigate to Media > Library. After you select the image, a window will pop up.

      Cropping images manually in WordPress.

      Click on the Edit Image button below the image, and you’ll be taken to a page with editing tools. Select the Crop button at the top, and drag the corners of the box to crop the image to your liking.

      Alternatively, you can change the image size by entering the dimensions and aspect ratio in the right sidebar.

      Cropping images in WordPress.

      At the top, you can find options to rotate and flip the image. Once you’ve finished editing your photo, click on Save. Note that the changes will be applied to the original photo.

      10. How to Add Header Images

      Some WordPress themes feature header images. To change the default header image, go to your dashboard and navigate to Appearance > Customize.

      On the customization page, click on Header Image. If you can’t see this option in the menu, it means that your current theme does not support header images.

      Changing the header of a WordPress theme.

      On the Header Image page, select Add new image to replace the default image in your header.

      Changing the header of your WordPress site.

      When you’re done, you can click on the Publish button at the top of the screen. This will save your changes.

      11. How to Add Background Images

      Your WordPress theme might also come with support for background images. To set a one, access the theme’s customization page by navigating to Appearance > Customize from your WordPress dashboard.

      Next, click on Colors. Locate Body Background and click on Select image.

      Changing the background of your WordPress site.

      When you set your background image, you’ll get some options for adjusting the preset and image position. Remember to save your changes before exiting.

      12. How to Find Free Images for Your WordPress Site

      When sourcing images for your posts and pages, we recommend accessing free stock photo sites to avoid copyright infringement. Several sites offer royalty-free images, including Pixabay, UnsplashFlickr Creative Commons, and Pexels.

      A site offering free stock photos.

      The images available on these sites are free to use. However, it’s always a good idea to credit the photographer or artist with a link in the image caption.

      13. How to Tag Images

      Tags make it easier to organize and filter photos on your site. However, WordPress currently does not offer an image tagging feature. Therefore, you might want to download a plugin that lets you sort your images with categories and tags.

      For categorizing and tagging images, we recommend using the Media Library Assistant plugin. Start by installing and activating the plugin, and then head to Media > Library.

      You can see all the photos you’ve uploaded to your WordPress site on the Media Library page. Click on the list view button at the top, then find the photo you want to tag and click on Edit.

      The WordPress Media Library.

      On the Edit Media page, find the Att. Categories and Att. Tags sections on the right-hand side, and start adding categories and tags to your image.

      Tagging images in WordPress.

      You can also rename your image on this page, write a caption, and add alternative text. When you’re done, click on the Update button on the right to save your changes.

      14. How to Import External Images to WordPress

      To import external images to WordPress, you’ll need to access your old website’s files directly using a Secure File Transfer Protocol (SFTP) tool such as FileZilla. Locate your site’s root directory, and then go to wp-content/uploads.

      Accessing the WordPress uploads folder.

      There, you’ll find the media files that you’ve uploaded to your site. Download them to a secure location, and then log into your new WordPress site. Navigate to wp-content/uploads again, and copy over your media files.

      You may still encounter image-related errors after doing this since your image URLs may be pointing back to your old site. If that’s the case, you’ll need to go through and update your image URLs so they point to your new site instead, which can be a time-consuming process.

      To avoid that problem, we recommend using a plugin such as Duplicator to move your website between domains or web hosts. You may also benefit from reaching out to your new host for assistance to make sure everything on your site gets transferred over properly.

      15. How to Require a Featured Image in Your Posts

      If your site has multiple authors, you might want to set a reminder for everyone to select a featured image before publishing a post. To do this, you’ll need to add some custom code to your site.

      Before getting started, we recommend backing up your site and creating a child theme. Then you can add the following code at the end of your theme’s functions.php file:

      * Require a featured image to be set before a post can be published.
      add_filter( 'wp_insert_post_data', function ( $data, $postarr ) {
      $post_id              = $postarr['ID'];
      $post_status          = $data['post_status'];
      $original_post_status = $postarr['original_post_status'];
      if ( $post_id && 'publish' === $post_status && 'publish' !== $original_post_status ) {
      $post_type = get_post_type( $post_id );
      if ( post_type_supports( $post_type, 'thumbnail' ) && ! has_post_thumbnail( $post_id ) ) {
      $data['post_status'] = 'draft';
      return $data;
      }, 10, 2 );
      add_action( 'admin_notices', function () {
      $post = get_post();
      if ( 'publish' !== get_post_status( $post->ID ) && ! has_post_thumbnail( $post->ID ) ) { ?>
      <div id="message" class="error">
      <strong><?php _e( 'Please set a Featured Image. This post cannot be published without one.' ); ?></strong>
      } );

      Save your changes, and users will be required to add featured images to all post types that support them.

      16. How to Set a Default Featured Image

      If you want to set a default featured image for those occasions when you can’t find the right photo, the Default Featured Image plugin is a handy tool to have. It lets you choose a photo that will automatically appear as the featured image for posts published without one.

      After installing and activating the plugin, navigate to Settings > Media in your dashboard.

      Using the Default Featured Image plugin.

      Click on the Select default feature image button and choose your photo. Finally, hit Save Changes at the bottom of the page.

      Take Your WordPress Website to the Next Level

      Whether you need help navigating the WordPress dashboard, choosing the perfect product image, or writing alt text, we can help! Subscribe to our monthly newsletter so you never miss an article.

      Additional WordPress Resources

      If you’re new to WordPress, you may run into some common issues while working with images and other content. To help you navigate any WordPress problem you encounter, we’ve put together several how-to guides:

      If you’re looking for more WordPress tips and hacks, check out our WordPress Tutorials. This collection of guides will help you set up and design your first WordPress site.

      Now You Can Fix That Common Image Issue

      Images can improve your site’s User Experience (UX) and increase the visibility of your content in search engine results. Therefore, it’s important to know how to use photos to engage readers with your content.

      Fortunately, WordPress makes it easy to upload and manage photos on your site. It lets you crop and customize images, as well as create beautiful photo galleries and headers to make your pages more interesting.

      If your business relies on high-quality imagery, you might want to consider using a web hosting service that offers full WordPress support. Our DreamPress plans are perfect for site owners who want to focus on growing their businesses and spend less time troubleshooting errors in WordPress.

      Source link

      Common WordPress Image Upload Issues and How to Fix Them (5 Methods)

      Since about 65% of people are visual learners, images are an important part of any website. And when you’re regularly uploading images for your WordPress website, it’s natural to run into the occasion error message.

      Fortunately, there are ways to diagnose even the vaguest image upload issue. By running through a checklist of common fixes, you should have no problems adding beautiful, eye-catching visuals to your website.

      In this article, we’ll look at why image-related errors can be tricky to diagnose. We’ll then share five solutions to try the next time the WordPress Media Library doesn’t want to cooperate with your creative vision. Let’s get started!

      An Introduction to WordPress Image Errors (And Why They’re a Problem)

      Beautiful, eye-catching images are a crucial part of almost any website. If you’re running an e-commerce store, product images are particularly important for driving sales, as they enable people to see what they’re purchasing. Maybe that explains why on average, images make up almost 17% of a web page’s total weight.

      The WordPress media library upload screen.

      However, uploading images to WordPress isn’t always straightforward. Sometimes, this popular Content Management System (CMS) may display a failure to upload error. These issues are notoriously difficult to diagnose, as they’re triggered by a wide range of factors. That can make it difficult to know where to start to address the problem.

      The good news? We can walk you through the steps we take to take to identify and fix image upload issues in WordPress.

      We’ll Fix Your Image Upload Issue

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      Common WordPress Image Upload Errors and How to Fix Them (5 Methods)

      Nothing is more frustrating than having your workflow interrupted by a vague error message. Here are five ways to fix upload errors, so you can get back to adding striking visuals to your website.

      1. Rename, Resize, and Re-Upload the Image

      If you’re only encountering issues with a specific image, you can start by taking a look at the file’s name. If you’re using special characters ($, *, &, #) or accent letters (ñ, á, é), these can cause issues with the WordPress uploader.

      The image may also be too large — both in terms of dimensions and file size. You can change an image’s dimensions using your favorite editing program. If you’re trying to upload a particularly high-resolution graphic, you can reduce the size without impacting the quality using a compression tool such as TinyPNG.

      The TinyPNG plugin upload screen.

      If you regularly encounter issues due to file size, then WordPress’ limit may be set too low. You can raise the limit by adding code to your site’s php.ini file:

      upload_max_filesize = 128M
      post_max_size = 128M
      max_execution_time = 300

      If your site doesn’t already contain a php.ini file, you can create it inside the PHP folder for the current PHP version your site is running.  Then, simply add the above code at the end of the file.

      2. Increase the Memory Limit

      When you try to upload an image, you may encounter the WordPress HTTP error. This can sometimes be caused by low server resources or unusual traffic. For this reason, it’s always worth waiting a few minutes and then attempting to re-upload the image.

      If the issue doesn’t resolve itself, then you may be exceeding the WordPress memory limit. You can increase the amount of memory that PHP has to use on your server by connecting to your site over SFTP.

      Next, open your wp-config file. You can then add the following, which will increase the limit to 256MB:

      define( 'WP_MEMORY_LIMIT', '256M' );

      If this doesn’t resolve your issue, your problem may be related to threading. WordPress processes images using either the GD Library or Imagick module, depending on which one is available.

      Imagick was designed to use multiple threads in order to accelerate image processing.  However, some shared hosting providers limit Imagick’s ability to use multiple threads, which can result in an HTTP error. You can often resolve this issue by adding the following to your .htaccess file:


      3. Deactivate Your Plugins

      Third-party software can sometimes interfere with your image uploads. If you’re using any plugins, it’s always worth deactivating each one in turn and testing to see whether this resolves your image upload issue.

      Deactivating plugins in the WordPress dashboard

      If a plugin is to blame, you can double-check to make sure you’re running the latest version. If you’ve fallen behind on your updates, you may be struggling with a problem that’s already been addressed.

      If you’re running the latest version, we recommend contacting the plugin’s developer to ensure that they’re aware of the issue. This can also be an opportunity to ask whether they plan to solve this problem in their next release. If the plugin is critical to your site and no fix is forthcoming, it may be time to look for an alternative solution.

      4. Clear the Cache

      If you’re using a caching plugin, then clearing the cache may be enough to resolve your image upload errors. It’s important to note, however, that it is incredibly rare for the cache to prevent a file upload, so we’re including this fix out of an abundance of caution.

      If you think that caching could be causing the error, the steps you take will depend on your chosen caching solution. For example, if you’re using the W3 Total Cache plugin, you can clear the cache by selecting Performance > Purge All Caches from the WordPress toolbar.

      Purging all caches in the WordPress dashboard Appearance menu.

      If you’re unsure how to clear the cache in your specific tool, the plugin’s Settings menu is often a good place to start. You can also check the developer’s official documentation for more details.

      5. Try the Browser Uploader

      If you’ve tried all of the above fixes and are still encountering problems, you can use your browser’s built-in file uploader. Unlike WordPress’ image uploader, the browser uploader doesn’t support multiple file selection or drag and drop. However, it can be a useful workaround when you need to upload an image quickly.

      To access the native image uploader, navigate to Media > Add New. You can then select the browser uploader link.

      Selecting the ‘browser uploader’ link in the WordPress native image uploader.

      Next, click on Choose file. This launches the familiar file selection dialog, where you can upload the image as normal. If this workaround succeeds, we recommend trying to upload an image using WordPress’ standard image uploader afterward, to see whether this has resolved your problem.

      Take Your WordPress Site to the Next Level

      Whether you need help tweaking directory permissions, choosing a WordPress theme, or finding the uploads folder, we can help! Subscribe to our monthly email newsletter so you never miss an article.

      Additional WordPress Error Tutorials

      Once you’ve solved your image upload error, the adventure isn’t over. There’s always more to learn about WordPress! We’ve put together several tutorials to help you troubleshoot other common WordPress errors:

      Want more information on managing a WordPress site? Check out our WordPress Tutorials, a collection of guides designed to help you navigate the WordPress dashboard like an expert.

      WordPress Images Made Easy  

      Visuals are crucial for catching (and holding) the visitor’s attention, but image upload errors are frustratingly common. By following some simple steps, we’re confident that you can get your site back on track — even when the error message itself doesn’t provide much information.

      Let’s recap five ways to resolve common WordPress image upload issues:

      1. Rename, resize, and re-upload the image.
      2. Increase the memory limit.
      3. Deactivate your plugins.
      4. Clear the cache.
      5. Try the browser uploader.

      Are you tired of handling WordPress errors with no help? All of our DreamPress hosting packages include 24/7 customer support as a standard option. Regardless of the problem, our expert team will be on hand to help you get back on track!

      Source link

      Comment changer l’opacité d’une image d’arrière-plan CSS

      Même si avec CSS et CSS3 vous pouvez faire un grand nombre de choses, ils ne vous permettent pas de configurer une opacité sur un arrière-plan CSS. Cependant, en faisant preuve de créativité, il existe une tonne de solutions originales qui donneront l’impression que l’opacité de l’image d’arrière-plan CSS a été modifiée. Ces deux méthodes suivantes intègrent une excellente prise en charge des navigateurs, Internet Explorer 8 inclus.

      Méthode 1 : utiliser un positionnement absolu et une image

      Cette méthode porte parfaitement son nom. Il vous suffit, tout simplement, d’utiliser le positionnement absolu sur une balise img normale pour donner l’impression d’avoir utilisé la propriété background-image de CSS. Tout ce que vous avez à faire, c’est de positionner l’image à l’intérieur d’un conteneur position: relative;. Voici à quoi ressemble généralement le balisage HTML :

      <div class="demo_wrap">
        <h1>Hello World!</h1>
        <img src="" />

      Et voici à quoi ressemblera votre CSS :

      .demo_wrap {
          position: relative;
          overflow: hidden;
          padding: 16px;
          border: 1px dashed green;
      .demo_wrap h1 {
          padding: 100px;
          position: relative;
          z-index: 2;
      .demo_wrap img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
          opacity: 0.6;

      Ici, l’astuce est de positionner l’img de manière absolue et de l’étirer jusqu’à remplir l’intégralité du conteneur parent. Et de positionner relatively tout le reste de façon à pouvoir configurer un z-index qui le positionnera au-dessus de l’img.

      Voici une démo en direct :

      Méthode 2 : utiliser des pseudo-éléments CSS

      Une fois que vous saurez comment ça marche, cette méthode est relativement simple à comprendre. Il s’agit sans nul doute de la méthode que je préfère. En utilisant les pseudo-éléments CSS :before ou :after, vous obtenez un div avec une image d’arrière-plan et configurez une opacité au-dessus. Voici à quoi devrait ressembler votre balisage HTML :

      <div class="demo_wrap">
        <h1>Hello World!</h1>

      Et voici à quoi ressemble le CSS :

         .demo_wrap {
          position: relative;
          background: #5C97FF;
          overflow: hidden;
      .demo_wrap h1 {
          padding: 50px;
          position: relative;
          z-index: 2;
      /* You could use :after - it doesn't really matter */
      .demo_wrap:before {
          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0.6;
          background-image: url('');
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: cover;

      Ici, nous devons à nouveau déplacer le z-index de contenu (dans le cas présent, le <h1>) au-dessus du pseudo-élément de l’arrière-plan et explicitement configurer la position: absolute; et le z-index: 1 sur le pseudo-élément :before.

      Les autres attributs du pseudo-élément sont là pour le positionner de manière à chevaucher à 100 % le parent. Ils peuvent également utiliser une nouvelle propriété CSS intelligente : background-size: cover qui dimensionne l’arrière-plan de manière à couvrir l’élément sans en changer les proportions. Voici une belle petite démo de cette méthode :

      Source link