Images can bring an event page to life. Whether it's a striking Cover Block image, an animated GIF, or a brilliant picture of an important speaker, imagery can make a simple event page extraordinary.

This article walks through three types of images used in Splash and how to customize them to best serve you.

On this page:

Image Element

Watch a video

Quick Definition 

An Image Element is the most basic form of imagery used in Splash. There's no default cropping, re-sizing, nor stretching applied to the image by default. If you're adding an Image Element to the page, the image will take up 100% width of the container you are adding it to. If you increase or decrease the width of the Image Element, the entire element will scale proportionally.

Swapping out imagery 

Change the image housed inside an Image Element by clicking into the Image Element directly on page or find it in the page's Layout tab. Upload an image from your computer or select from our image or gif library.

Aspect Ratio

Use aspect ratio to control the shape of the container that an image sits inside. An aspect ratio describes the relationship between an image’s width and height. 

From the Aspect Ratio dropdown, choose one of the following options:

• Original Image - Keeps the original aspect ratio of your image while allowing you to adjust the width accordingly.
• 1:1 - The image container’s width and height will be equal, resulting in the shape of a perfect square.
• 4:3 - The image’s container will be slightly wider than its height. Think of the shape of a standard box television.
  Select Landscape or Portrait based on your preferred orientation.
• 16:9 - The image’s container will be widescreen, similar to a standard laptop computer.
  Select Landscape or Portrait based on your preferred orientation.
• Custom Dimensions - Set the width and height of the image container manually.

Resizing 

Make the image bigger or smaller by adjusting the width inside the Image Element's Width/Height tool. As you change the width, the entire Image Element will scale proportionally.

Alt Text 

Alt Text gives you the option to include a brief description of the image to improve search engine optimization (SEO) and accessibility. 

Square Element

Watch a video

Quick Definition 

A Square Element can also be called a “frame” since one it's a blank container. You can control how you'd like an image to live inside the frame and adjust the shape of the frame itself.

Swapping out imagery

To change the image housed inside a Square Element, click into the Square Element directly on page or find it within the Layout tab. The actual image will be located inside the element's Background tool. Upload an image from your computer or select from our image or gif library.

Resizing

Use the Width/Height tab to increase or decrease the width of the square. To change the height, adjust the bottom padding, or space inside the element, in the Margin/Padding tab.

Re-shaping 

Another option available to the designer is altering the actual shape of the frame of a Square Element. You can round the corners by accessing the Radius Input inside the Border tool.

Background Image

Watch a video

Quick Definition

A Background Image is not an actual element found in Splash’s element adder. It's actually an image that is applied to the background of an element or block. The Background Image is set to Fill by default, but can be changed to Contained, Normal, Fit Width, or Fit Height. You can also decide if you want the image to repeat horizontally or vertically as well.
 

Swapping out imagery

To change the Background Image of an element or block, click into the title of the element or block from the Layout tab. The actual image will be located inside the Background tool. You can then choose to upload an image from their computer, or select from image or gif libraries. 

Resizing

Since the Background Image is not an actual element, it relies on the sizing and proportions of the element or block it's being housed inside of. So if you want to make the Background Image of a block bigger or smaller, you'll need to change the size of the block (by adjusting the width or padding). There is no “perfect size” for the background image of blocks. Splash requires that images be smaller than 2000x2000 pixels or 10MB. Anything above those requirements will be downsized.

Key differences

Cropping

When you crop an Image Element, the exact portion of the image you have elected to crop will now be displayed on the page. If you elect to crop a Square Element or Background Image, the photo will fill the space of the frame. 

Rounded Corners

A common use case for rounded corners are for Button Elements but if you want to apply rounded corners to the imagery on your event page, you have to make sure it is either a Square Element or a Background Image. You can round the corners of entire blocks, or any element in Splash — EXCEPT FOR Image Elements — by using the Border tools. The reason for this is because Splash will not allow you to alter the original imagery used in the Image Element.