These two design items apply to images in event details (accordion and pop-up). They allow you to choose the size of your image and how it occupies the image space, i.e., the space available for the image.

To find these design items...

Step 1: After you log in, click on Calendars (brown box below).

The Your Calendars page will open.

Step 2: Choose the calendar you wish to modify (brown box below).

Step 3: Click on Design (brown box below).


Step 4: Click on Events (brown box below).

Step 5: Scroll down until you find Image aspect ratio and Image object fit.

To modify these design items...

IMAGE ASPECT RATIO

Click on the arrow to open the dropdown menu. Click on the option you prefer.

About the options...

EventOn Original

This is the most optimized choice for EventOn but not for CCB images which are 16:9. EventOn Original uses 40% of the viewport height, so this will determine the image space.

If you choose this option, then Image object fit may not longer be relevant. It depends on the dimensions of the image. If the image is square, you would see differences between object fit, cover and fill options. Here is an example that explains all the options and includes a demo, so you can select different options to see what happens: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit.

All other options

These are sizing options. The first number is the length and the second number is the height. So, 3:2 means, for example, that the length will be 1/3 longer than the relative height.


IMAGE OBJECT FIT

Click on the arrow to open the dropdown menu. Click on the option you prefer.

About the options...

All these options work with a larger image space than the EventOn option.

Here is how each interacts with the image space:

Option

Aspect ratio

If aspect ratio does not match aspect ratio of the image space

Cover

Sized to maintain aspect ratio

Image will be clipped to fit

Contain

Scaled to maintain aspect ratio

Image will be "letterboxed" (top/bottom borders)

Fill

Sized to fill image space

Image will be stretched to fit

Again, in case you missed it above, here is an example that explains all the options and includes a demo, so you can select different options to see what happens: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit.

Click Save at the bottom to save your changes.

Did this answer your question?