Topic: How To Resize Related Posts Images

ananttah
April 17, 2023 at 10:04 am

Hi Team,

I am using Info theme of generatepress but it lacks a related posts widget to show at the bottom of articles.

So I had to install a 3rd party widget called “Related Post Thumbnails”. It displays related posts at the bottom of articles but the image size of thumbnail is too small.

How can I change it so that 3 posts/images occupy full width and body content and appear without getting blurred?
I tried to play with it but it asks for custom field name if not using default thumbnail which I am unable to crack. Ideally I guess an image of width 250px and 125 height would do the job.

Please help with this. Without a proper related posts widget, it really looks weird. Shared sample article link and login credentials both in private info.
David
April 17, 2023 at 1:35 pm

Hi there,

is it this plugin?

https://wordpress.org/plugins/related-posts-thumbnails/

As its documentation says you can choose from the Thumbnail and Medium size image in its settings.
Can you check with the plugin author how to do that ?
ananttah
April 19, 2023 at 10:24 am

Hi David,

I was expecting if this can be managed through theme. I have raised the concern with the plugin author just now.
David
April 20, 2023 at 1:13 am

I had a look at the Plugins settings.
In Dashboard > Related Posts, the Thumbnails tab there is: Related posts thumbnail size: option where i can select Medium and larger sizes.
ananttah
April 20, 2023 at 1:42 am

Hi David,

Yes its there but all the options are of square dimensions. We would need to show 3 rectangular thumbnails to show 3 posts by occupying the full width.

Ideally I guess an image of width 250px and 125 height would do the job.

If I go to Dashboard > Related Posts > Thumbnails > Select thumbnails source

It has the option to select “Custom Field”. But there it asks for the ACF/Custom field name about which I am unaware. Directly just entering width and heigh there, stretches the image but it gets blurry.
David
April 20, 2023 at 2:29 am

Open a topic with the plugin support.
And in the meant time, set the image size to medium so i can see it on your site, and ill see what CSS can be used to make it work.
ananttah
April 20, 2023 at 3:01 am

Hi David,

I have done the same please check.
Also the plugin support don’t seem that active. Haven’t yet heard from them. The Generate Press team is just awesome.

David

April 20, 2023 at 3:52 am

Try this CSS:

.relpost-block-container {
  display: flex;
  gap: 10px;
}

.relpost-block-single {
  width: 33% !important;
}

.relpost-custom-block-single {
  height: auto !important;
  width: auto !important;
}

.relpost-block-single-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
  object-fit: cover;
}

@media(max-width: 768px) {
  .relpost-block-container {
    flex-direction: column;
  }

  .relpost-block-single {
    width: 100% !important;
  }
}

ananttah
April 20, 2023 at 4:09 am

This works perfect David! Thanks a ton.
There’s just one thing, the images are blurry. I assume that’s because we are stretching the small thumbnail. Any way to show clear images here?
David
April 20, 2023 at 4:28 am

If theres a bigger image to choose from in the plugin settings then you can choose that for better quality.
Otherwise theres nothing we can do to change that
ananttah
April 20, 2023 at 5:08 am

Thanks a ton David! Really appreciate this.
David
April 20, 2023 at 5:11 am

You’re welcome

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How To Resize Related Posts Images