Splash supports many forms of visual media on event pages, including images.

In this article, learn how to use the image element to add, format, and manipulate images while keeping design and performance best practices in mind.

You can follow along in Splash by reading the steps below or watching the video tutorial.

On this page:

Adding the image element

On your event page:

1. Click the circular + icon.
2. Under Add an Element, select Elements.
3. Choose Image.

Uploading and changing images

To replace your image with another option, hover over your image and click Change or select Change in the Layout tab.

You have three options:

1. Upload: Upload your own image. Keep in mind:        
• Splash supports the following file types: .jpg, .png, jpeg, .gif, and .svg. SVGs can only be uploaded by users with a Builder license.
• To keep your page loading quickly, make sure your image is no more than 2,000 pixels wide with no more than 72 dots per inch (dpi).
2. Stock: Select from a library of provided images.
3. Giphy: Select from a library of provided GIFs.

To crop your image, select Crop in the Layout tab.

Editing and formatting images

The Layout tab includes built-in tools for editing images within the context of your event page. These tools include aspect ratio, width, position, accessibility text, and more. 

Your Splash plan and user license determine your access to these tools:

Image Options

To start making edits, click on the image. This will open the image element in the Layout tab.

The Image Options dropdown includes controls for changing the shape and size of the image’s container — aspect ratio and width — and controls for deciding how the image will sit inside of that container — size, repeat, and image position.

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.

Width

To make the image container bigger or smaller, click on the image, then click on Width in the Layout tab. Use these options to adjust the width of the image container while keeping the aspect ratio intact.

The dropdown options correspond to percentages. From top to bottom, the options are 25%, 33.3%, 50%, 66.6%, 75%, and 100% (or full-width). To enter a custom percentage, click Custom.

Size

The size determines how the image will scale to fit inside the image container. 

• Fill - The image will stretch to fill the entire container.
• Original - The image will keep its original size.
• Fit Width - The image will scale to fit horizontally within the container.
• Fit Height - The image will scale to fit vertically within the container.
• Contain - The image will scale to fit horizontally and vertically within the container.

Repeat

Repeat determines how many times an image appears in the container.

• No Repeat - The image will not repeat inside of the container. This is the default setting.
• Horizontal - The image will repeat horizontally across the container.
• Vertical - The image will repeat vertically in the container.
• Tile - The image will be tiled, or repeated, inside of the container.

Image Position

Pick where you want the image to sit inside of the container by selecting a spot on the Image Position grid.

The Fixed Position checkbox locks, or fixes, the content in the container. Even if you scroll up or down the page, the image will always stay in the same position.

Accessibility Text

Accessibility is the practice of making your event page usable to as many people as possible regardless of their abilities, language, location, or hardware.

Add text that describes your image in the Accessibility Text field. This is the text that screen readers will speak when scanning your event page.

Fill Color & Outline Color

After uploading an SVG file, you will see the option to change the Fill Color and Outline Color. Fill color refers to the color of the inside of the object, while outline refers to the line drawn around the object. 

Change the color of each by clicking directly on the swatch that appears. To choose a color that’s not on the swatch, click Edit Color Set. This prompts you to change the color swatch of the entire event. Keep in mind that any changes you make will affect the current design across all touchpoints.

Background, Margin, Border, & Display

Background

Change the background color of the image container by clicking on the image, then click Background in the Layout tab.

To choose a color that’s not on the swatch, follow the same steps as above and click Edit Color Set.

Margin

Margin refers to the spacing around blocks and elements. It’s used to separate components of an event page from one another with white space.

Click and type directly into the inputs, or use the increase or decrease buttons, to control the space around each side of the element. 

Border

Use the Border tab to style the edges of your image container.

To choose the style of your border, choose from the Style dropdown:

• Solid
• Dotted
• Dashed

Click on the color swatch to select a new color for the border from your event’s palette.

To increase the thickness of your border, use the input controls. To round the edges of the border, enter a numerical value in the Radius input. 

Display

Use the Display tab to control the display mode and opacity options.

• Display Mode: None - This removes the element from the event page without completely deleting it, similar to Splash’s hide feature. Once you select this option, the element will appear greyed out in the Layout tab.
• Display: Inline Block - This is the default display setting for the majority of blocks and elements in Splash. It allows other elements and blocks to sit next to the element.
• Display: Block - Unlike Display: Inline Block, this places the element on its own line on the event page. No other elements or blocks can sit next to it. It’s like placing that component in its own 100% wide container.

The Opacity slider controls the transparency of the element. Click and drag the slider to the left to decrease the image’s transparency.

Positioning

The Positioning tab includes advanced design tools that allow you to reposition an element on the page.

Float

Float refers to where the element should be placed within the container. 

• None - The element doesn’t float. In other words, the image remains centered. This is the default setting.
• Left - The image will be inside the container on the left.
• Right - The image will be inside the container on the left.

Display

Display tools adjust the position of the element on the page.

• Default - The element will remain as-is on page.
• Relative -  The element will be positioned relative to its normal position but can be adjusted to a new location based on the coordinates you enter.
• Absolute - The element will be positioned relative to its parent container based on the coordinates you enter.
• Fixed - The element will be fixed relative to the browser window. Even if you scroll the page, the element will stay in the same position. 

Properties

The Properties tab includes administrative tools, like locking, and advanced development tools like custom classes.