Jump to content

Events Page: Thumbnail sizing and date squares

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

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? 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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.

image.png.b2b251ac465dedf686d29bb54a59c09f.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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?

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

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?

 

Screenshot 2024-02-23 at 1.00.24 PM.png

Link to comment
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?

 

Screenshot 2024-02-23 at 1.00.24 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.