Images

Unit images (Photos inside a gallery)

Resizing

You can optimize image size using resizeimg() function. It can take two parameters width and height

<img src="{resizeimg("path/to/image",600,400)}">

If you keep the height parameters empty, it will resize image keeping the ratio. Please be careful, don't add extra spaces between parameters.

<!-- Inside a loop -->
#$loop|{item}|{a}|$#
    <img src="{resizeimg(a.first_photo.url_wide,600)}" alt="{a.first_photo.alt}">
#$/loop|{item}|{a}|$#

<!-- Inside a detail page -->
<img src="{{resizeimg(item.first_photo.url_wide,600)}}" alt="{{item.first_photo.alt}}">

Image ratio

There are different ratio for unit photos

{a.first_photo.url_panoramic} - Panoramic (24:9)
{a.first_photo.url_wide} - Wide (16:9)
{a.first_photo.url_standard} - Standard (4:3)
{a.first_photo.url_square} - Square (1:1)
{a.first_photo.url_portrait} - Portrait (3:4)
{a.first_photo.url_vertical} - Vertical (5:9)

CMS images

Inside Tester, you can provide a size to the image.

Resizing images coming from JSON Static or resizing images in Javascript

If you use images coming from a "json static" file or you need to resize an image in Javascript, you can use thes Javascript function window.GalaxyHelpers.resizeImg(url, width, height);

Example:

const imageURL = "https://cdn.galaxy.tf/thumb/sizeW116/sizeH116/zc/uploads/3s/cms_image/001/530/875/1530875806_5b3f4f9e650e8-thumb.png"

// Resize width
GalaxyHelpers.resizeImg(imageURL, 200);

// Resize height
GalaxyHelpers.resizeImg(imageURL, undefined, 200);

This relies on the library GalaxyHelpers that is automatically added to all pages before the content from theme/bottom.html

Example from the source code of a website