Image in Product Block distorting my page

Hi - appreciate any help with this.

I run a training site so have used events with product panel inserts.

The product image is displayed automatically at 1600x1600 - it's actual size, and distorts the view. I'm looking for some way to resize this to smaller, but can't work it out. I've tried resizing the product panel but cannot, when I select it, the resizing squares do not appear around the panel.

https://freediving.ie/events/aida-12-combo-scubadive-west-co-galway-30/08/24-01/09/24

Thank you

Try this in Custom CSS:

// limit event widths
.eventitem-column-content {
    max-width: 460px;
}
.eventitem-column-meta {
    max-width: 320px;
}

Thanks Ziggy - this is helpful, it's makes the product panel in the listing better.

But, when I go back to the full event's listing, the image is there, distorting the page...

Is there code available to change the image sizes on this view?

https://freediving.ie/events

5 minutes ago, Daithi said:

Is there code available to change the image sizes on this view?

Have you added any code? This view doesn't seem default.

I've removed all other formatting code and it remains the same.

With the changes your code made to the product block in the event detail panel, I have selected image=yes, your code resizes the image as intended. But when i go back to the Events listing which lists all events, a second image is now appearing fullsize. 

https://freediving.ie/events/aida-12-combo-scubadive-west-co-galway-30/08/24-01/09/24

Vs.

https://freediving.ie/events

Is there some way I can access the image dimensions in the event panel using code like this?

.tweak-events-stacked-thumbnail-size-11-square .eventlist-column-thumbnail {
    padding-bottom: 15% !important;
    width: 15% !important;
}

This is for the event listing - but I need to access the image dimenions in the product block in the event panel.

Sorry, I'm now confused as to what you're trying to achieve, do you want the images in the main event page to be square? And what do you want to add to the individual event listing page?

Ideally, the event panel with the product block would look like this, with the product image nicely re-sized to the left of the product info. Any help with this greatly appreciated.

My products are courses which have dates associated with them. So, in order to display the courses chronologically to customers, I have to create events with product blocks in them, so customers can add the courses to their carts when they view the events in the calendar.

The standard events page, as confirgured by squarespace looks like this, i have not altered with any code.

https://freediving.ie/events

When I click on one of these events, it brings me to the event details panel, in which I've inserted a product block. When I tured image=on in this product block, that's when things get messed up. Without additional code, it renders in the product block fullsize and then starts showing up as a second image in the general events listing page.

That's the best I can describe. Hopefully with the screenshot above, that explains. Thanks.

57 minutes ago, Daithi said:

it renders in the product block fullsize

I may be able to rearrange those with some code for you.

57 minutes ago, Daithi said:

starts showing up as a second image in the general events listing page.

This sounds wrong, like a bug which would be worth reporting to Squarespace, I don't think that block should be pulling through to the main events page.

OK - thanks for you help.

Placing the product image in the event panel has worked perfectly.

https://freediving.ie/events/aida-12-combo-scubadive-west-co-galway-30/08/24-01/09/24

But it still appears in the main event listing...

https://freediving.ie/events

I can't find any reference to this happening to other people in the forum... what's the bext way to let squarespace know about this?

6 minutes ago, Daithi said:

I can't find any reference to this happening to other people in the forum... what's the bext way to let squarespace know about this?

Live chat:

https://support.squarespace.com/hc/en-us/requests/new#choose-topic

There was an option in the main Events page display to "show excerpt" - once I turned this off, the bleed from the product panel stopped.

So I think I'm at a solution which works. One last question, is there any way to decrese the size of this whitespace? Thanks for all your help.

If that is this page it looks very different to the screenshot:

https://freediving.ie/events/aida-12-combo-scubadive-west-co-galway-30/08/24-01/09/24

No, that's it, event detail panel. The code you gave me placed the image to the left of the text.

It's the whitespace to the left of the image I'd like to reduce...

I've changed the main event listing page to a grid view.

https://freediving.ie/events

I don't suppose you might know why some of the images are out of alignment?

I'm using this code:

@media screen and (min-width:992px) {
.eventlist.eventlist--upcoming {
    display: grid;
    column-gap: 25px;
    row-gap: 25px;
    grid-template-columns: repeat(6,5fr);
}
.eventlist.eventlist--upcoming img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;

}
.eventlist-column-thumbnail {
    background-color: transparent;
    width: 100% !important;
    padding-bottom: 100% !important;

}
.eventlist-event {
    flex-direction: column;
    justify-content: center;
    margin-top: 0 !important;

}
.eventlist-column-info {
    width: 100% !important;
    margin: 10px !important;
}
}

33 minutes ago, Daithi said:

It's the whitespace to the left of the image I'd like to reduce...

I can see it now, use this:

.eventitem-column-meta {
    max-width: 300px;
}

Thanks - your code fixed the whitespace issue on the event details panel.

On the main event listings page, I fixed the irregular image rendering. Now, some of the events are showing times, and some are not. In addition, the text beneath the images is not left-aligned. No idea why... Any ideas?

12 minutes ago, Daithi said:

On the main event listings page, I fixed the irregular image rendering. Now, some of the events are showing times, and some are not. In addition, the text beneath the images is not left-aligned. No idea why... Any ideas?

Any examples?

https://freediving.ie/events

If you look under the images, times for the course are displayed sometimes, and sometimes not. Also, the text beneath the images is not left-aligned.

The times aren't showing on multi-day events, I'm not sure exactly why. Would you prefer to hide the times from all of the events on the main page?

Ah, good catch. I've removed the times. Now if I could just get the text and button underneath the image to align left, that would be amazing. Thanks.

Everything is left aligned, but with padding, do you want to remove the padding?

.eventlist-column-info {
  left-padding:0px;
}

15 minutes ago, Ziggy said:

Everything is left aligned, but with padding, do you want to remove the padding?

.eventlist-column-info {
  left-padding:0px;
}

 

This fixed it

padding-left: 0px !important;

Thanks.