Events Page: Thumbnail sizing and date squares

Site URL: http://www.outmontclair.org/events

On our site's Events page (/events), the thumbnail images consistently give us problems. Most often the automatic sizing cuts off the edges of the image, either top and bottom or left and right. Is there a standard size that will always preserve the entire image? Or a piece of code that will ensure the entire image is preserved but will size it up or down appropriately to fit in the allowed box?

Second, the square showing the date of the event is not wanted -- we would prefer that the date just be displayed in text on the right side of the page, with the other information about the event. We have found a piece of code that fixes this on our site's homepage but not yet on the /events page. 

Thank you for your help!

1 hour ago, pmholm said:

Site URL: http://www.outmontclair.org/events

On our site's Events page (/events), the thumbnail images consistently give us problems. Most often the automatic sizing cuts off the edges of the image, either top and bottom or left and right. Is there a standard size that will always preserve the entire image? Or a piece of code that will ensure the entire image is preserved but will size it up or down appropriately to fit in the allowed box?

Second, the square showing the date of the event is not wanted -- we would prefer that the date just be displayed in text on the right side of the page, with the other information about the event. We have found a piece of code that fixes this on our site's homepage but not yet on the /events page. 

Thank you for your help!

I can not see your image cropped when checking your site. Could you take a screenshot of your issue? 

Thanks for your help! Here's an example -- the thumbnail looks/works fine on the homepage but not on the /events page. For other events we've done a lot of trial and error to get things to look right but would like to avoid that in the future.

On 9/28/2021 at 11:36 PM, pmholm said:

Thanks for your help! Here's an example -- the thumbnail looks/works fine on the homepage but not on the /events page. For other events we've done a lot of trial and error to get things to look right but would like to avoid that in the future.

Add to Design > Custom CSS

/* Resize Events images */
article.eventlist-event img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.tweak-events-stacked-thumbnail-size-32-standard .eventlist-column-thumbnail {
    padding-bottom: 17% !important;
}

@tuanphan Thank you for your help with this! Unfortunately this code didn't work as written -- it actually cut more of the thumbnails off, but now all on the bottom. If I increase the padding-bottom number to 40% it does work, but now there is an unsightly blank box at the bottom of most of the thumbnails that is not the same color as the page background. Can I set that color so that it becomes invisible?

On 10/6/2021 at 8:37 PM, pmholm said:

@tuanphan Thank you for your help with this! Unfortunately this code didn't work as written -- it actually cut more of the thumbnails off, but now all on the bottom. If I increase the padding-bottom number to 40% it does work, but now there is an unsightly blank box at the bottom of most of the thumbnails that is not the same color as the page background. Can I set that color so that it becomes invisible?

Use this CSS

.eventlist-column-thumbnail {
    background-color: transparent !important;
}

@tuanphan Thank you! 

Thank you for the help Tuan! I sent you an email hoping I'll get a faster response. Here is the issue I am having with after entering the css codes.

I was able to make the thumbnail smaller, but now the white date tag is out of place. I would like for it to stay with the thumbnail. Also, how to make the space between the thumbnail and event info smaller?

On 2/24/2024 at 2:08 AM, ssapple said:

Thank you for the help Tuan! I sent you an email hoping I'll get a faster response. Here is the issue I am having with after entering the css codes.

I was able to make the thumbnail smaller, but now the white date tag is out of place. I would like for it to stay with the thumbnail. Also, how to make the space between the thumbnail and event info smaller?

 

I don't see email.. Can you share link?