Verwendung: multipe Responsive Images in CustomElements

Sven's Avatar

Sven

21 Nov, 2018 09:46 AM

Produkt: Custom Elements Contao
Contao-Version: 4
Browser und Browserversionen: alle

Guten Morgen :)

ich habe ein RSCE gebaut das mit einfachen multiple Images gut funktioniert.
Jetzt würde ich gerne responsive Images mit meinen Bildgrößen verwenden.
Im Backend habe ich schon die Size-Auswahlmöglichkeit, aber die Frontend-Ausgabe klappt nicht.

Ich ein Schnipsel aus dem Forum verwendet:
"Beispiel für die Ausgabe eines Bildes (Image) des Elementes (Box) mit dem Standard-Template (picture_default):" <?php if ($image = $this->getImageObject($box->image, $this->size)): ?> <?php $this->insert('picture_default', $image->picture) ?> <?php endif ?>

Aber natürlich passt bei mir $box nicht. Wo kommt diese Variable her?

Mein Konstrukt sieht bis jetzt so aus:

            <?php foreach ($this->images as $image): ?>
                <div class="myelement block">
                    <?php if ($image = $this->getImageObject($box->image, $this->size)): ?>
                        <?php $this->insert('picture_default', $image->picture) ?>
                    <?php endif ?>
                </div>
            <?php endforeach ?>

Viele Güße
Meike

  1. Support Staff 1 Posted by RockSolid Theme... on 21 Nov, 2018 11:27 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Verwenden Sie bitte $this->getImageObject($image->image, $this->size)

  2. 2 Posted by Meike on 21 Nov, 2018 12:37 PM

    Meike's Avatar

    Vielen Dank für die Antwort :) Jetzt habe ich zumindest schon mal wieder Bilder.
    Es ist allerdings kleider nur der normale <img src="..." ...> Code und nicht wie bei meinen nicht multiple Bildern der <img src="..." srcset="..."...> Code.

    Das picture_default template sollte das doch eigentlich hergeben. Vielleicht ist meine config falsch.

    Ich hänge noch mal die komplette config und html an.
    Wäre nett, wenn ihr noch mal drauf schaut.

    Viele Grüße,
    Meike

  3. Support Staff 3 Posted by RockSolid Theme... on 22 Nov, 2018 06:16 AM

    RockSolid Themes's Avatar

    Verwenden Sie anstatt $this->size bitte $image->size

  4. 4 Posted by info on 23 Feb, 2021 05:48 PM

    info's Avatar

    Funktioniert das ganze auch anstatt

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

    auch mit

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

    Ich würde gern den Bildlink mit ausgeben, um das Bild zu vergrößern.

  5. Support Staff 5 Posted by RockSolid Theme... on 24 Feb, 2021 09:36 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Das image.html5-Template lässt sich folgendermaßen einbinden:

    <?php $this->insert('image', (array) $image) ?>
    
  6. 6 Posted by info on 24 Feb, 2021 10:01 AM

    info's Avatar

    Herzlichen Dank für die super schnelle Antwort.

    Würde das ganze auch mit einem Insert von ce_images funktionieren (dann wäre der Link zur Colorbox gleich mit drin)?

  7. 7 Posted by info on 24 Feb, 2021 12:23 PM

    info's Avatar

    Ein insert mit von "ce_image" funktioniert, doch leider wird der Link für die lightbox (colorbox) nicht generiert.

    Es ist sicher irgendwie möglich beim Aufruf einen Parameter mitzugeben, damit der Link dargestellt wird.

  8. Support Staff 8 Posted by RockSolid Theme... on 24 Feb, 2021 01:29 PM

    RockSolid Themes's Avatar

    Zur Aktivierung der Lightbox muss der Aufruf von getImageObject() angepasst werden:

    $this->getImageObject($image->image, $this->size, null, null, ['fullsize' => '1'])
    

    Danach lässt sich das Bild inklusive Lightbox-Link wie bereits beschrieben über das image.html5-Template einbinden:

    <?php $this->insert('image', (array) $image) ?>
    
  9. 9 Posted by info on 24 Feb, 2021 02:43 PM

    info's Avatar

    Super vielen Dank!

    Aber wo zum Teufel bekommt man die Infos her, was man beim Aufruf von "getImageObject" alles "holen" kann und warum die Syntax $this->size, null, null, ['fullsize' => '1'] lautet?

    Auch mit der Ausgabe der Template-Variablen kann ich es nicht nachvollziehen. Ich würde es aber so gern verstehen wollen :)

  10. Support Staff 10 Posted by RockSolid Theme... on 25 Feb, 2021 11:03 AM

    RockSolid Themes's Avatar

    Weitere Informationen zu dieser Funktion finden Sie z. B. im Quelltext der Erweiterung bzw. auf GitHub: https://github.com/madeyourday/contao-rocksolid-custom-elements/blob/a535e3e1edcecb32c88a3dbdcc3fb59875ad9570/src/Element/CustomElement.php#L201-L211

  11. 11 Posted by info on 26 Feb, 2021 10:26 AM

    info's Avatar

    Seh vielen Dank. :)

    Ich hätte auch mal selber darauf kommen können, den Code bei GitHub zu inspizieren.
    Jedenfalls ist der Code sehr aufschlussreich und hat sogar noch ein paar weitere Fragen beantwortet.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac