CODEWITHSUNDEEP
phphtmlcssimagepinterest
new503
new503

Reputation: 23

How can I achieve dynamic image heights like Pinterest?

I'm trying to get a layout similar to Pinterst. So far I have images that are randomly generated in php between like 125px and 400px.

This did not result in a Pinterest-like effect, where the right aspect-ratios seem to be dynamic. Does anyone know how Pinterest dynamically generates the height of their images? 

<div class="pin_image">

          <a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>" 
            src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a>
            </div>

Upvotes: 0

Views: 893

Answers (4)

Jamal Ali
Jamal Ali

Reputation: 109

You just need to set the width on the tag to that of the width of the column. The aspect ratio of the image will be kept and the height will be set accordingly.

Upvotes: 0

xelber
xelber

Reputation: 4637

When you resize the images, you need to do this based on the WIDTH of the image. As what you want is a fix with and a popotionate height. For example if you have an image which is 1000 by 2000 and if your column is 100px, you need to resize it to 100 by 200. (i.e. calculate the ratio for width and apply the same to height)

Upvotes: 0

r_31415
r_31415

Reputation: 8982

You need something like Isotope or Masonry

It doesn't change image height but it reorders the layout in a pleasant way.

Upvotes: 1

Kevin Lawrence
Kevin Lawrence

Reputation: 751

They base the image width on the column width. So for example, if their columns are 200px wide, and the original image is 600px height and 400px width, they would scale the image by half to get it to fit the column width. So 600px * 0.5 = 300px height, and 400px * 0.5 = 200px width. By multiplying both dimensions by the same percent, you maintain the aspect ratio.

Upvotes: 1

Related Questions