Gallery
Last updated
Last updated
The [≡] Gallery display mode (1) defines the behavior of the gallery. It can behave as a gallery slider to slide horizontally or as a gallery scroller to scroll vertically in the document flow and it could be displayed as a gallery grid.
[≡] The Gallery display mode can be set in each product via the custom fields in the Specifications > Custom fields > Gallery tab.
You can find more about this in the documentary under CONTENTS > Details page > Gallery mode
Gallery grid - cover full width (2) sets the cover image to full width in the gallery grid. All subsequent images are displayed side by side according to the grid.
COVER 1
IMAGE 2 IMAGE 3
IMAGE 4 IMAGE 5
COVER 1 IMAGE 2
IMAGE 3 IMAGE 4
IMAGE 5
Gallery grid - Dynamic (3) ensures that the grid does not end with a single image. For example, if five product images are to be displayed, three images are displayed next to each other in the last line so that no image wraps around alone and there is a visual gap.
IMAGE 1 IMAGE 2
IMAGE 3 IMAGE 4 IMAGE 5
IMAGE 1 IMAGE 2
IMAGE 3 IMAGE 4
IMAGE 5
Background (4) sets a background color for the gallery image. In combination with the setting Background overlay (5), this color can also be used to place non-transparent or non cut-out product images on a gray background, for example.
With Fallback image title (6) you specify the title of the image that should be stored if no image title has been stored for the image in the media management. This can be the name of the image file or the name of the product.
Sticky (7): If active, the gallery is sticky, as long as the content is not higher than the viewport.
If the Sticky option is also activated for the adjacent buybox, the element with the smaller height will always be sticky.
Force Sticky (8): The sticky function only works if all parent elements do not use the "overflow:hidden" CSS property. There may be extensions that set this property. If active, the sticky function will be enforced and all parent elements with "overflow: hidden" will be rewritten to "overflow: visible".
Example:
The Gallery width (1) determines how much space the gallery may occupy opposite the buybox.
Example:
The height of the gallery slider can be fundamentally changed by Use aspect ratio of product images (2).
This setting refers to the setting for the aspect ratio of the product image made in General > Product images.
In addition, a minimum height (3, 4) for the gallery slider can be stored for different device sizes. Use aspect ratio of product images (2) can supplement the settings of the minimum heights (3). If the product images are in portrait format and the minimum height is very low, the product image on the product page may be higher and larger than the minimum height, but not smaller.
However, if the Use aspect ratio of product images (2) setting is not active, the images on the product page are only as high as the minimum height set for the respective device.
The basic minimum height for all large viewports is set in the gallery and buy box settings in the gallery element of the product layout of the experience world. The minimum heights that can be set in the theme configuration are merely additional values for mobile devices such as smartphones or tablets.
Example:
Analogous to the settings of the shopping experience block "Image gallery and buy box", settings can be made for navigation:
Arrow navigation (1): Adds arrows to click through the images. You can specify whether the arrows should be displayed on or next to the displayed image, or hide them.
Dots navigation (2): Alternatively (or additionally) to the arrow navigation you can use the dots navigation. This represents a small point for each deposited picture, over which you can call the respective picture directly. The display is possible on or under the image.
Use aspect ratio of product images (3): The preview navigation images will be displayed in the configured image format and not in square boxes.
This setting refers to the setting for the aspect ratio of the product image made in General > Product images.
Preview navigation position (4): Specify whether the small gallery preview images should be displayed to the left of the image or below.
Preview navigation appearance (5): Sets the appearance of this navigation. In the alternate mode there is no border, inactive elements are displayed in a weakened form.
The dots of the "dots navigation" can be disturbing if there are too many navigation points, especially on mobile devices. With the following settings you can determine from how many points or images this navigation is not displayed:
Dots navigation max (mobile) (6): Defines from how many images the points navigation is not displayed on mobile devices. Dots navigation max (7): Determines from how many images the points navigation is not displayed on large devices.
Zoom (1): If you enable this option, an enlarged view of the image will be displayed when the user hovers the mouse over the image. Zoom factor (2): You can use the zoom factor to determine how much the image is magnified. Keep aspect ratio on zoom (3): Controls whether the zoom view is in the aspect ratio of the image or square. Show magnifier over gallery (4): Provides the possibility to place the zoom function (magnifier function) above the gallery itself. Otherwise the zoom view will overlay the buy box. Fullscreen gallery (5): Makes it possible to display the gallery in fullscreen popup in the browser window by clicking on the image.
