ce_image.html5-Template für Parallax-Effekt anpassen

[3dr]

Hallo,
ich verwende dieses JavaScript-Script für einen Parallax-Effekt: http://pixelcog.github.io/parallax.js/
Das funktioniert soweit ganz gut, solange ich die jeweiligen Bilder über ein Inhaltselement vom Typ "HTML" händisch einbinde:

<div class="parallax-window" data-image-src="files/path/to/my/image.jpg" data-parallax="scroll"></div>

Eleganter wäre es natürlich ein Bild über ein Inhaltselement vom Typ "Bild" einzufügen, hierzu müsste dann aber das Template ce_image.html5 angepasst werden. Das div einzubinden gelingt mir noch, nicht aber der Teil:

data-image-src="files/path/to/my/image.jpg" data-parallax="scroll"

Wie ist hier das korrekte Vorgehen. Herzlichen Dank für Tipps und Hinweise.

Hier noch der Code des Templates ce_image.html5:

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption class="caption"><?= $this->caption ?></figcaption>
    <?php endif; ?>

  </figure>

<?php $this->endblock(); ?>

[stefan.sl]

Speichere dein neues Template als ce_image_parallax.html5 ab. Das wählst du dann unter "individuelles Template" in deinem Inhaltselement "Bild" aus.
Das Template müsste so aussehen.

 
<div class="parallax-window" data-image-src="<?= $this->singleSRC ?>" data-parallax="scroll"></div>

Das war's!

Du siehst, mit <?= $this->singleSRC ?> gibt dir Contao die URL zum Original-Bild aus. Alle möglichen Variablen, die dir im Template zur Verfügung stehen, siehst du indem du <?php $this->showTemplateVars(); ?> an beliebiger Stelle in das Template schreibst. Probier es einfach mal aus.

[3dr]

@stefan.sl
herzlichen Dank für diese schnelle, freundliche und ausführliche Antwort, die Lösung funktioniert wunderbar. Besonderen Dank für den Tipp zum Anzeigen lassen der Variablen.