Edit Picture format

Ask the Community Customization
1

Issue description: I would like to be able to edit the format of the picture in the Event Calendar widget, or at least be able to crop the photo to best suit the existing format.

Link to the page with the widget in question: I’m currently using another widget on my website because of this issue. OrlandoMusicLive.com

2 Likes
3

Hi there, @Chris_Gonzalez :waving_hand:

This code should fix the image cropping issue:

.eapp-events-calendar-grid-item-imageContainer {
padding-top: 182%;
}
.eapp-events-calendar-grid-item-imageContainer img {
object-fit: cover;
}

Please add it to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

2 Likes
4

That is an improvement…but images are still being cropped. I use square format in my current widget.

This is how it’s now appearing …when you click on the event it looks great, but from the main widget page not so much

image.png
image.png930×725 264 KB

2 Likes
5

Got it, thanks!

I’ve passed it on to the devs and will update you once I have their response :slightly_smiling_face:

1 Like
6

Hi there, @Chris_Gonzalez :waving_hand:

The thing is that the images in your widget have different aspect ratio (most of them are 1/1, and some images - 4/5).

To adjust the images to a single format and fix the cropping issue, please use this CSS code on the Style tab:

/* image with aspect-ratio 1/1 */
.eapp-events-calendar-grid-item-imageContainer {
  padding-top: calc(100% + 64px);
}

/* image with aspect-ratio 4/5 */
.eapp-events-calendar-grid-item-imageContainer:has([alt="Picture for 'Hard Swingin' Country Soiree with Decker & Dimitrov' event"]) {
  padding-top: calc(135% + 64px);
}

Here we’ve added the image with the 4/5 aspect ratio:

image
image609×176 13.1 KB

If you have more image with 4/5 aspect ratio, you should add them to the code using this format:
alt="Picture for 'EVENT_NAME' event".

Give it a try and let me know if it worked :wink: