etsy

[HONEY AND OCEAN] fixing aspect ratios on himmel template

Aspect ratio on blog posts


1. Search for
<div class='post-thumb hidden'>

2. select the code indicated on the screenshot below

3. replace it with the code below
<div class='post-thumb hidden'>
 <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;4:3&quot;) : data:post.thumbnail' var='image'>
  <a expr:href='data:post.url'>
   <img alt='' border='0' expr:src='data:image'/>
  </a>
 </b:with>
</div>

The search result it will be displayed 5 times, related respectively to these pages:
- homepage
- category page
- search results page
- index page
- archive page

you will have to be replace the code on the five spots.

aspect ratio options

See the pink and blue numbers highlighted on the example below:

<div class='post-thumb hidden'>
 <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;4:3&quot;) : data:post.thumbnail' var='image'>
  <a expr:href='data:post.url'>
   <img alt='' border='0' expr:src='data:image'/>
  </a>
 </b:with>
</div>

  • the pink is the size of the image;
  • the blue is the aspect ratio;
You can change to aspect ratio to:
1:1 (will be a square)
16:9 (rectangle)
or you can use a numbers to set the size , like 700:450
Note: the height can not be higher than the width, so options like 3:4 are not allowed. The first number always have to be higher than the second.

the popular posts


If you want to change the popular posts thumbnails, follow the guide:

1. search for
<div class='pp-thumbnail-outer'>

2. select the indicated code on the screenshot below

3. replace with
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600, &quot;4:3&quot;) : data:post.thumbnail' var='image'>
 <a expr:href='data:post.url'>
  <img alt='' border='0' expr:src='data:image'/>
 </a>
</b:with>

4. Search for 
resizeImgs(".pp-thumbnail-outer img");

5. Delete the line

Contact Form