---
description: Add the block to show images in the Media column of the section.
---

# Image

{% hint style="success" %}
**Tip:** To add a block, the "[<mark style="color:blue;">Collage of images</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/collage-of-images)" section is required. Press **"Add block"** and choose the one in **Theme Blocks**. The following block can be added several times.

Drag images into different positions to decide which image should overlay the other ones in the section.
{% endhint %}

#### Image

Press **"Select"** to upload the necessary image both for desktop and mobile.

<mark style="color:orange;">**Note!**</mark> The following settings can be applied to the desktop view only:

In the **"Width"** scale, set the image width. It can be changed from 0% to 100%.

The **"Top position"** scale controls the required image appearance on the top or bottom of the Media column. Set the point to 0 % to place an image at the very top and 100% at the bottom of the column.

Assign an image to the left or right side of the screen using the **"Side position"** scale, where 0% means an image appears on the left and 100% - shows it on the right.

The **"Height"** can be changed to "Adapt to image" or "Fixed aspect ratio" for both desktop and mobile. If you choose the **"Fixed aspect ratio"** option, use the corresponding scale to control the image height from 50% to 150%, where 100% is a square image, less than 100% is a landscape, and more than 100% - is a portrait.&#x20;

<mark style="color:orange;">**Note!**</mark> Specify the image size on mobile in the "[<mark style="color:blue;">Mobile settings</mark>](#mobile-settings)".

The examples of the described settings can be viewed below:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FMXTn6ASxjl9fgJS5yEsh%2Fcollage%20images_image.png?alt=media&#x26;token=f9c38ec4-c77a-4bb6-8156-26a82fb4d65a" alt=""><figcaption></figcaption></figure>

### Animations

Change the position of images from different views of sight when scrolling up or down using the **"Parallax effect"** scale. The parameters can be changed from -100 to 100, which specifies how pronounced the effect will be for a particular image. Set the point to -X to make the effect stick when scrolling up or down the page. If you indicate the point to X, the parallax effect will appear in the opposite direction of motion, so by scrolling down, the image will slide up and vice versa. Use 0 to deactivate the parallax.

### Mobile settings

Settings from this block can be used to manage content in the Media column.

The **"Width"** picker determines whether to display an image at the full width of the screen (100%) or set two items in a row (50%).

In the **"Order"** scale, decide on the image position on mobile. The block allows reordering images from 1 to 10 positions.

Use the **"Fixed aspect ratio"** scale, if you set the corresponding option in the "Height" picker above. The image height can be changed from 50% to 150%, where 100% is a square image, less than 100% is a landscape, and more than 100% - is a portrait.

In the following example, you can view how the mobile settings might be displayed in the section:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Ff1gpxPW2qqDySH1OrlLy%2Fcollage%20images_image%20mobile.png?alt=media&#x26;token=b1783adf-044e-4853-8ed1-9e61e3f167da" alt=""><figcaption></figcaption></figure>
