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 6
  • 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? 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.