> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-collage/images.md).
# Images
Add the block to show images in the collage section.
## Images
{% hint style="success" %}
Provides an additional "[Image](#image)" block to display various images in the collage.\
**Tip:** Press **"Add block"** to add several blocks.
{% endhint %}
**Column aspect ratio**\
Decide the size of each image in the collage on a scale from 50% to 150%, where 100% is a square image, less than 100% is a landscape, and more than 100% is a portrait.
**Prevent image cropping**\
By default, the image zooming effect is enabled on the desktop view when hovering over an image.
\
If the option is disabled, the scaled effect is visible inside the image container. When activated, the image container scales itself.
***
### Image
Use the current block to add each image individually to the collage section.
**Image**\
Press the **"Select"** button to upload the necessary image for all devices.
{% hint style="warning" %}
**Note!** The following settings are applied to the desktop view only.
{% endhint %}
**Width**\
Set the image width. It can be changed from 0% to 100%.
**Top position**\
Scale determines whether the image should be positioned in the collage on top or bottom. Set the value to 0% to place the image at the very top, and 100% to place it at the very bottom.
**Side position**\
Use the scale to choose whether the image is displayed on the left or right side of the screen: 0% means the image is displayed on the left, and 100% means the image is displayed on the right.
**Image ratio**\
Use the options to adapt media to the desired size. You can select one of the standard options: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check the image ratios [here](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\
Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option:
* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*.
\*The "Proportion" option is applied to mobile by default.
**"Proportion"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 400 pixels.
**Parallax effect**\
Adjust the intensity and direction of the parallax animation for an image as customers scroll through the page. Set the value from -100 to 100.
* **Negative values (-100 to -1)** - The image moves in the same direction as the page scroll, creating a subtle, sticky effect.
* **0** - Disables the parallax effect.
* **Positive values (1 to 100)** - The image moves in the opposite direction of the page scroll, creating a more pronounced parallax effect.
**Note!** Higher absolute values produce a stronger animation, while values closer to **0** create a more subtle effect.
#### Mobile settings
Settings from this block can be used to customize collage images on mobile view.
**Width**\
In the picker, set whether to display an image at the full screen width (100%) or set two items in a row (50%).
**Order**\
Determine the image position on mobile. The block allows reordering the image sequence from 1 to 10.
**Image ratio**\
Change the image size using one of the options in the drop-down. The corresponding settings are shown after selecting the relevant option:
* **"Adapt to image"**. Displays the image in its original aspect ratio.
* **"Proportion"**. Select the option to adjust the image height as a percentage using the corresponding scale. The parameters can be changed from 10% to 150%.
**"Proportion"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.
