How to Change Post Thumbnail Ratio in Median UI Template ?

Hello Everyone, on this occasion I will share How to Change Post Thumbnail Ratio in Median UI Template. Median UI is the best Blogger template ever. People like to use this template because of its fast loading. Also it is completely seo friendly due to which people like to use it even more.

This template is actually created by Mas Muhammad Maki of the Jago Design Team. Along with creating a variety of great features, I decided to upgrade the blog page to give it a more attractive look.

But there is one thing behind all this which I do not like at all, that is the clipping of post thumbnails. Right now Mean UI uses a 18:9 thumbnail ratio in v1.5, which doesn’t look that great. So if you want to convert this size to 16:9 youtube ratio then read the full post.

Median UI template has very low post thumbnail ratio which seems pretty useless. You can clearly see that the template you have used so far has a higher thumbnail ratio and width. As a result, the image is cropped to follow the smaller 18:9 ratio size. However, to get around this problem, you can change the thumbnail ratio as you wish by editing the HTML and CSS.

How to Change Post Thumbnail Ratio in Median UI Template :-

This code will be found under this code /* Article Section */.

.postThumbnail > *{display:block;position:relative;padding-top:52.335%; transition:var(--transition-2); color:inherit}

.postThumbnail > *{display:block;position:relative;padding-top:55%; transition:var(--transition-2); color:inherit}

This code will be found under this code <b:defaultmarkups>

<!–[ Blogger defaultmarkups ]–>

<b:defaultmarkup type=’Common’>.

      <b:includable id='postEntryThumbnail'>
        <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;18:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </b:includable>

      <b:includable id='postEntryThumbnail'>
        <img class='imgThumb lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 600, &quot;16:9&quot;)' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </b:includable>

Important Notes :-

Note :- This Article Updated For Median UI v1.5. But You Can Try on Another Version.

Conclusion :-

In this post I have told you How to Change Post Thumbnail Ratio in Median UI Template. If you have any other question related to editing Median UI Template then you can tell by commenting. How did you like this post, you can tell by commenting.

Refrence:
Www.SmartTechMukesh.Com