Hoe voeg ik een afbeelding toe aan een optie?

Wil je het optieblok in de reserveringsdialoog voorzien van afbeeldingen? Dat kan in de kolom Memo van het optieblok.
Volg onderstaande stappen om één of meerdere opties te voorzien van een afbeelding.

Voeg de kolom Memo toe aan het optieblok

Standaard toont het optieblok de kolommen Optie, Prijs en Opmerkingen.
Een afbeelding kun je toevoegen in de kolom Memo, neem deze kolom als volgt op:

1. Switch naar de configuratie modus
2. Klik op Klant pagina > Reserveringsdialoog
3. Klik op het blok Opties
4. Je ziet een blok met een naam als 'Block-Options-DEFAULT'
5. Klik in dit blok op de knop 'Selecteren' in de rij 'Kolommen'
6. Dubbelklik in de popup 'Selecteer kolommen' op het veld Memo in de linker kolom zodat het wordt verplaatsts naar de rechter kolom (of sleep handmatig het veld van de linker naar de rechter kolom)
7. Klik op Opslaan

Voeg afbeeldingen toe aan Mediabeheer

Gebruik bij voorkeur hetzelfde formaat voor de optie afbeeldingen, het liefst vierkant. Dit geeft een mooi strak en rustig uiterlijk. Onthoud dat de afbeeldingen voor de opties klein worden weergegeven, upload daarom bij voorkeur geen optie-afbeeldingen die breder of hoger zijn dan 520 pixels.

1. Switch naar de configuratie modus
2. Klik op Templates > Beheer media
3. Klik op de map Images
4. Upload de optie afbeelding(en)

Url van de optie afbeelding achterhalen

Voor het instellen van een afbeelding bij een optie, heb je de volledige url nodig. In Beheer media kun je snel de url van een afbeelding achterhalen:

1. Rechtsklik op de afbeelding in de map Images en klik op Bekijken in het popup-menu
2. De afbeelding opent, rechtsklik erop en klik op zoiets als 'Adres afbeelding kopieren' of 'Afbeeldingskoppeling kopiëren
3. Plak de gekopieerde url even tijdelijk in een tekst bestand, je het deze url straks nodig voor het invullen van het src attribuut van de image.

Stel een afbeelding in bij een optie

Onderstaande stappen moet je voor elk product uitvoeren waarbij je afbeeldingen wilt toevoegen aan de opties.

1. Switch naar de configuratie modus
2. Klik op Objecten > Beheer producten
3. Open de weergave Extra voor het product waarbij je een afbeelding aan een optie wilt toevoegen
4. In het blok Optie Details klik je op het eerste potloodje van de optie waar je de afbeelding aan toe wilt voegen
5. In de popup 'Wijzigen optie' klik je in het veld 'Uitgebreid' op het broncode (< >) icoontje in de werkbalk van de editor
6. In de popup 'Broncode' plak je onderstaande code:

   <div class="text-sm-center">
     <img class="img-fluid" src="URL-NAAR-AFBEELDING" alt="OMSCHRIJVING" width="60px" height="auto">
   </div>
   

7. In deze voorbeeld code is ingesteld dat een afbeelding niet breder getoond mag worden dan 60px.
   Wil je liever nog iets kleiner? Wijzig dan in de code de 60px naar bijvoorbeeld 50px of 40px.
8. Plaats je de volledige url van de afbeelding op de plek zet waar in de voorbeeld code nu 'URL-NAAR-AFBEELDING' staat.
9. Wijzig de tekst OMSCHRIJVING van het alt attribuut in een korte omschrijving van de afbeelding.
10. Klik op Opslaan om de popup 'Broncode' te sluiten
11. Klik nogmaals op Opslaan om de popup 'Wijzigen optie' te sluiten.

Checkup

Als laatste controleer je even of de afbeelding wordt getoond in de reserveerdialoog van betreffend product. Als dat het geval is, kun je afbeeldingen aan de overige opties toevoegen.

Zie je geen afbeelding? Ververs dan even de pagina of leeg je browsercache.
Nog steeds geen resultaat? Doorloop dan alle stappen en controleer of je niets vergeten bent en of je geen foutje hebt gemaakt bij het opnemen en aanpassen van de voorbeeld code in het veld 'Uitgebreid' van de optie.