portfolio thumbnails are blurry: how to make them sharp?

Homepage Community Forums Agile Theme Support portfolio thumbnails are blurry: how to make them sharp?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22002
    Arvin
    Customer

      Hi,

      I’m very pleased with my purchase of Agile which I bought a few months ago. I’ve opted to build my site very similar to the demo. Everything is working fine except for the quality of the portfolio thumbnail images. This is noticeable when I view my site on my iPhone. Can you please give me any advice as how to improve the quality. Right now, they’re are not as crisp compared to the original jpgs I outputted from Photoshop. Thank you.

      portfolio thumbnail size: 220×140

      my site:
      http://www.arvinfdesigns.com

      my original jpgs:
      https://www.dropbox.com/sh/3nj1pqj2egh33uh/AAA2KZ1O5JIsJsD0VUnSrRZya?dl=0

      #22005
      Wes
      Moderator

        The images that are uploaded are showing up at 220px width and 140px height. So when the site is being viewed from your phone or a mobile device, the images are set to 100% width, which means they’re being stretched to fit the screen. We can try turning that off and allowing the images to show up at their regular size of 220 x 140.

        To do this, look for this code around line 2638 and/or 2667 –

        .content .portfolio .post-image {
            width: 100%;
        }

        Change it to auto and the images will show up at their original size (220 x 140) which means it should show up clearer since they’re not being stretched.

        If you want to change the size of the thumbnail images, you can do so by looking in your functions.php file for the home-portfolio-thumbnail code around line 50 –

        // Add new image sizes 
        add_image_size( 'featured-img', 730, 420, TRUE );
        add_image_size( 'featured-page', 341, 173, TRUE );
        add_image_size( 'home-portfolio-thumbnail', 220, 140, TRUE );
        add_image_size( 'portfolio-thumbnail', 348, 240, TRUE );

        Anytime you make changes to Thumbnail Image sizes (this goes for any theme you use in WordPress) run a plugin called Regenerate Thumbnails. Once you run this plugin, it will go through and adjust all your Thumbnails to show up properly at the size you have specified – https://wordpress.org/plugins/regenerate-thumbnails/

        Let me know if that helps

        #22013
        Arvin
        Customer

          Hi Wes,

          I did exactly what you instructed and the home-portfolio-thumbnail are definitely crispier and sharper. Thanks for running down the basics of image size in relation to the different devices that my agile site will be viewed on. Thanks again for your help.

          Arvin

          #22016
          Wes
          Moderator

            You’re Welcome!

          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.