Pet photos are very large

That is odd – I see Petfinder is returning larger images than the plugin is requesting. Can you give me your shelter ID so I can investigate what is returned with the API call? My shelter site does not have this issue so I can’t debug it with my Petfinder account.

Our shelter ID is NC282. Thanks for looking into it!

@deannemott, @unsungwilliam For some reason Petfinder’s API isn’t returning sized images for your Shelters. You can fix the image displays by adding some CSS to your sites like this:

.petfinder-thumbnails .img{
width: 100px;
height: 100px;
object-fit: cover;
margin-right: 10px;
margin-bottom: 10px;
}

.pets .images .petfinder-big-img{
max-width: 300px;
}

I hope this helps!

Same results here. I switched to the PetFinder widget for now.

I had a mistake in my CSS, try this instead (dot before img in first line is removed. I would also remove the second part because your theme is already limiting the size of the big image.):

.petfinder-thumbnails img{
width: 100px;
height: 100px;
object-fit: cover;
margin-right: 10px;
margin-bottom: 10px;
}

Thanks so much, I used the update from bridgetwes and also the first css to reduce the size of the primary image. Looks great now!

I just checked your page out. It looks great.However, if you look at Rhett, who has more images, you see the descriptiin is pushed far right. If you try the second Thumb Container snippet, the 6 thumbs will wrap to 2 rows and allow the description to be consistent all the way down the page.

Thanks, I’m testing both ways and deciding which I like better. Sometimes the extra rows create alot of white space underneath the text.

Edit: I updated 360px to 480 px for four small photos and that works for me. Really appreciate the code fixes!

• This reply was modified 10 months, 3 weeks ago by deannemott.