Blurry Image Quality – Staff Post Type

Home Forums Mustang Blurry Image Quality – Staff Post Type

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16512

    dreamcell
    Participant

    Blurry Image Quality – Staff Post Type

    Resolved

    Hi Oliver

    Please take a look at this URL:

    https://www.fmctalent.com/the-fmc-team/

    The staff pictures look great on retina screens, but on standard resolution screens they appear really blurry.

    Can you tell me how this could be improved? I think it is to do with which size versions get selected for display.

    Many thanks

    matthew

    #16515

    Oliver Juhas
    Keymaster

    Hi Matthew,

    Please note that this is because you have enlarged the Staff image with your custom CSS and it actually stretches the image that is smaller and that’s why it appears blurred.

    If you want to keep your stretched CSS image code, you will need to adapt the image size registered in WordPress. Probably the easiest way for you to do this would be with plugins:

    • Use Simple Image Sizes plugin to set your custom image size for admin-thumbnail (default is 100×100 px, and you want to enlarge it to 120×120 px judging by your custom CSS code).
    • Then use Force Regenerate Thumbnails plugin to regenerate the sizes for your staff photos.

    Best regards,

    Oliver Juhas
    WebMan Design

    #16551

    dreamcell
    Participant

    Hi Oliver

    Thank you – as ever – for your expert reply and your great help. I feel very fortunate to have your support, and it is really appreciated.

    I regenerated the thumbnails as you suggested, but actually what really worked better was to revert the CSS to the original size.

    Thanks again!

    #16552

    Oliver Juhas
    Keymaster

    Hi,

    Thank you, I’m glad I could help.

    To explain, when you enlarge images with CSS you need to do that also in PHP, otherwise you end up with blurry images. That’s why you need to use both plugins, the Simple Image Sizes to resize the image to your needs in Settings > Media WordPress admin and then use the Force Regenerate Thumbnails to regenerate images to the new sizes. Using Force Regenerate Thumbnails plugin only won’t resolve the issue.

    But surely, if you are OK with original theme image size, then you can work with CSS only ;)

    Best regards,

    Oliver Juhas
    WebMan Design

    #16553

    Oliver Juhas
    Keymaster

    Alternatively you can override admin-thumbnail size with a PHP code in your child theme‘s functions.php, but I think using aforementioned plugins will be easier if you are not familiar with PHP coding and child theme concept.

    Anyway, here is the code that should do the trick in your child theme‘s functions.php file:

    function child_theme_image_size_setup() {
      // This will set the image to 160x160 px, cropped
      add_image_size( 'admin-thumbnail', 160, 160, true );
    }
    add_action( 'after_setup_theme', 'child_theme_image_size_setup', 100 );
    

    Best regards,

    Oliver Juhas
    WebMan Design

    #16562

    dreamcell
    Participant

    Thank you Oliver. I tried your PHP code in my functions.php file on my sandbox site and it works really well.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.