Quick search:eBay DataTransfer JTL-Worker PayPal

JTL-Links

Thank you for using the English version of the JTL-Guide!
We are currently still building up the English documentation; not all sections have been translated yet. Please note that there may still be German screenshots or links to German pages even on pages that have already been translated. This guide mostly addresses English speaking users in Germany.

Note: On 1 September 2024, JTL introduced new editions that bundle most of the previous individual services into different packages. In order for you to continue working as smoothly as possible, existing customers were automatically switched to the package configuration that best matched their existing contract. The individual packages differ in terms of limitations and/or range of functions. Therefore, some of the features described in the JTL-Guide may not be available to you as part of your booked JTL edition. You can change your package configuration in your JTL customer account. Find out more about the new editions and packages here. Check our FAQ for frequently asked questions about the product editions.

Contents

Creating galleries with the OnPage Composer

Your task/initial situation

You would like to add a gallery to your page. A gallery consists of several images in a specific layout.

Creating a gallery

Log in to the back end of JTL-Shop and switch to the front end of JTL-Shop.
Open the page you want to edit and click the OnPage Composer icon at the top left of the page to open the OnPage Composer for that page.
Drag the Gallery portlet to the desired position in the OnPage Composer. The Edit Gallery window opens.

Inserting the Gallery portlet with the OnPage Composer

Under Layout, select how you want the images to be arranged in your gallery.

Please note: When selecting the layout, it is only a question of the basic pattern that the tiles of the gallery will have. On the actual page, you will see different numbers of images next to each other depending on the width of the browser window as the portlet behaves completely responsively.

Click Click to upload. A dialogue opens in which you will find all media files uploaded for the OPC so far.
Drag and drop the image file for the gallery into the window or right-click in the window and select Upload file, navigate to the file, and select it.
Then double-click on your graphic file to apply it to your gallery.
Enter a description. Both are displayed when you move the cursor over the image. The alternative text is mainly relevant for search engines and should describe the image as well as possible.
Select whether the image should be enlarged when clicked (lightbox), provided with a link (linking) or whether it should not be possible to click on the image.
Click on the plus icon to add more images. Then save the gallery.

Follow the further steps to preview and publish an edited page at Editing pages with the OnPage Composer.

Layout tab

In the Layout tab, you can configure the gallery even more precisely.

Background colour: Here you can set a colour to be displayed in the background of the gallery.

Font colour: Here you set the colour of the font.

Font size: Here you set the size of the font. Enter a CSS value, e.g 5px, 0.5em, etc.

Border style/Border colour: Here you can specify whether the gallery should have a border and what colour it should be.

Border rounding: Here you can specify whether the border should be rounded. You can specify the distance from the corner at which the rounding will start. You must specify a border style before you can do this. Enter a CSS value, e.g 5px, 0.5em, etc.

Custom class names: Enter here the class names to be appended to the class attribute of the portlet. The names you assign here can be, for example, CSS classes that are defined in the theme of the template. For more information, please see the developer documentation.

Hide portlet: Select here whether the portlet should be hidden when viewed on certain end devices. XS stands for mobile phones, SM for tablets, MD for desktop computers and LG for large desktop computers.

Margin: Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge. The element is reduced/moved accordingly.

Border: Here you can set the size of the frame in pixels for each page.

Padding: Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge.