How do I add an image to an option?

Would you like to add images to the option block in the reservation dialog? You can do this in the Memo column of the option block.
Follow the steps below to add an image to one or more options.

Add the Memo column to the option block

By default, the option block shows the columns Option, Price and Remarks.
You can add an image in the Memo column; include this column as follows:

1. Switch to configuration mode
2. Click Front pages > Booking dialog
3. Click the Options block
4. You will see a block with a name such as 'Block-Options-DEFAULT'
5. In this block, click the 'Select' button in the 'Columns' row
6. In the 'Select columns' popup, double-click the Memo field in the left column so that it is moved to the right column (or manually drag the field from the left to the right column)
7. Click Save

Add images in Media Management

Preferably use the same format for option images, ideally square. This creates a neat, clean, and calm appearance. Keep in mind that option images are displayed small, so preferably do not upload option images that are wider or taller than 520 pixels.

1. Switch to configuration mode
2. Click Templates > Manage media
3. Click the Images folder
4. Upload the option image(s)

Find the URL of the option image

To set an image for an option, you need the full URL. In Manage media, you can quickly find the URL of an image:

1. Right-click the image in the Images folder and click View in the popup menu
2. The image opens; right-click it and click something like 'Copy image address' or 'Copy image link'
3. Temporarily paste the copied URL into a text file; you will need this URL later to fill in the src attribute of the image.

Set an image for an option

You need to perform the steps below for each product for which you want to add images to the options.

1. Switch to configuration mode
2. Click Objects > Manage products
3. Open the Extra view for the product for which you want to add an image to an option
4. In the Option Details block, click the first pencil icon for the option you want to add the image to
5. In the 'Edit option' popup, click the source code (< >) icon in the editor toolbar in the 'Advanced' field
6. In the 'Source code' popup, paste the code below:

    <div class="text-sm-center">
     <img class="img-fluid" src="URL-TO-IMAGE" alt="DESCRIPTION" width="60px" height="auto">
   </div>
   

7. In this example code, the image is set to be displayed no wider than 60px.
   Would you prefer it a bit smaller? Then change 60px in the code to, for example, 50px or 40px.
8. Paste the full URL of the image in the place where the example code currently shows 'URL-TO-IMAGE'.
9. Change the text DESCRIPTION of the alt attribute to a short description of the image.
10. Click Save to close the 'Source code' popup
11. Click Save again to close the 'Edit option' popup.

Checkup

Finally, check whether the image is shown in the reservation dialog for the relevant product. If so, you can add images to the remaining options.

Don’t see an image? Then refresh the page or clear your browser cache.
Still no result? Then go through all steps again and check whether you missed anything and whether you made a mistake when adding and editing the example code in the 'Advanced' field of the option.