How to Change Post Thumbnail Ratio in Median UI Template ?

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 :-

Step 1 :- First of All Go To Blogger.Com And Login Your Blogger Account.
Step 2 :- Then Click on Theme Menu.
Step 3 :- Then Click on Edit Html.
Step 4 :- Then Find The Css Code given Below.

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}
Step 5 :- Then Replace it With the Css Code Given Below.
.postThumbnail > *{display:block;position:relative;padding-top:55%; transition:var(--transition-2); color:inherit}
Step 6 :- Then Find The Html Code given Below.

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>
Step 7 :- Then Replace it With the Html Code Given Below.
      <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>
Step 8 :- Then Don't Forget to Click on Save Theme.

Important Notes :-

1. Before starting the editing process, don't forget to back up the HTML template first.
2. 55% in the code section, replace it with a percentage that matches the size of the new ratio.
3. In the 16:9 code section, you can change it to the length x width ratio you want.

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.Online

Read Also :