Support » Plugin: Yet Another Related Posts Plugin (YARPP) » Thumbnails Theme shows distorted images

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Michael Nelson

    (@mnelson4)

    Hi @ivano098, thanks for the screenshot and explanation of the problem. Sorry you’re having that.

    The images do look skewed. That’s because those images were uploaded before YARPP was installed, so YARPP’s thumbnail isn’t available and its using a large image and then resizing it to fit. This FAQ has the answer you need (basically just install and run the Resize Thumbnails plugin once).

    To get the entire post title to appear, try adding this custom CSS by
    1. Go to wp-admin on your website
    2. On the left, under “Appearance”, click “Customize”
    3. On the left, under Additional CSS” add the the following code:

    
    .yarpp-thumbnails-horizontal .yarpp-thumbnail-title{
    	overflow:visible;
    }
    .yarpp-thumbnails-horizontal .yarpp-thumbnail{
    	height:auto !important;
    }
    

    Also I don’t see that images are rotated from your screenshot (skewed yes, but I don’t see that they’re rotated). But maybe that’s appearing elsewhere in the site? If so I think using Regenerate Thumbnails plugin should help. If not, please provide a link to your site so we can debug further.

    Does that all make sense?

    Thread Starter ivano098

    (@ivano098)

    Hello @mnelson4, thank you for the detailed response.

    On a second look, you are correct: the images are only stretched, not rotated.

    I run a plugin to re-generate the thumbnails, but the image remained stretched. Possibly the size is not registered or the plugin is not working. The code generated is (cache purged):
    <img width="120" height="90" src="https://www.domain.com/wp-content/uploads/IMAGE.jpg" class="attachment-yarpp-thumbnail size-yarpp-thumbnail wp-post-image" alt="" loading="lazy" data-pin-nopin="true" srcset="https://www.domain.com/wp-content/uploads/IMAGE.jpg 4032w, https://www.domain.com/wp-content/uploads/IMAGE-740x555.jpg 740w, https://www.domain.com/wp-content/uploads/IMAGE-300x225.jpg 300w, https://www.domain.com/wp-content/uploads/IMAGE-768x576.jpg 768w, https://www.domain.com/wp-content/uploads/IMAGE-1024x768.jpg 1024w, https://www.domain.com/wp-content/uploads/IMAGE-1536x1152.jpg 1536w, https://www.domain.com/wp-content/uploads/IMAGE-2048x1536.jpg 2048w, https://www.domain.com/wp-content/uploads/IMAGE-1440x1080.jpg 1440w" sizes="(max-width: 120px) 100vw, 120px">

    The CSS works so I just wrote a custom theme that incorporates these changes and correctly displays the images.

    Thank you!

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