Verwendung: Bilder ab bestimmten Breakpoint austauschen

Sid's Avatar

Sid

22 Dec, 2018 05:39 AM

Produkt: Custom Elements Contao
Contao-Version: 4.4.31

Hallo, ich hoffe man kann mir hier weiterhelfen.
Ich würde gerne für verschiedene Endgeräte, verschiedene Bilder bereitstellen.
(Nicht skalieren oder ausschnitt des Bildes anzeigen, sondern die Bilder austauschen) Wie das ganze über CSS (Media Queries) funktioniert ist mir bekannt.
Da ich aber viele Bilder auf meiner Webseite habe, wäre dies ein sehr zeitaufwändiges Unterfangen.
Ich benutze zum Bilder einbinden hauptsächlich Das Feature-Box-Element, sowie das Zentrierter-Bereich-Element.
Nun zur eigentlichen Frage:
Gibt es eine Möglichkeit die Templates so anzupassen, um zb. direkt im Artikel-Element (Feature-Box & Zentrierter-Bereich) verschiedene Bilder für Smartphone, Tablet & Desktop zu definieren?

  1. Support Staff 1 Posted by RockSolid Theme... on 24 Dec, 2018 10:08 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    In der HTML-Ausgabe können Sie dafür das <picture>-Element einsetzen, über <source>-Tags lassen sich verschiedene Bilder über Media-Queries anzeigen.

    Über die _config.php-Dateien der Custom Elements (z. B. Feature-Box oder Zentrierter-Bereich) können Sie weitere Felder für die Bildauswahl hinzufügen.

    Weitere Informationen zur Erstellung bzw. Anpassung von Custom Elements finden Sie in der Dokumentation der Erweiterung: https://rocksolidthemes.com/de/contao/plugins/custom-content-elements/dokumentation

  2. 2 Posted by Sid on 25 Dec, 2018 07:09 AM

    Sid's Avatar

    Hallo und danke für die schnelle Rückmeldung, ... Ihr seid spitze!
    Leider bekomme ich das ganze nicht so recht hin.
    wie genau müssten die Beiden Datein (zb.: Zentrierter Bereich) aussehen, wenn ich für jedes Bild ein extra Feld anlegen möchte?

    z.B. für:
    Feld 1 bis @media screen and (max-width:599px)
    Feld 2 von/bis @media screen and (max-width:900px) and (min-width:599px)
    Feld 3 von/bis @media screen and (max-width:1200px) and (min-width:900px)
    Feld 4 von/bis @media screen and (max-width:1920px) and (min-width:1200px)
    Feld 5 ab @media screen and (min-width: 1920px) 
    usw. ...
    
  3. Support Staff 3 Posted by RockSolid Theme... on 27 Dec, 2018 09:52 AM

    RockSolid Themes's Avatar

    Die Feld-Konfiguration für die einzelnen Bilder kann folgendermaßen aussehen:

    'image1' => array(
        'label' => array('Bild 1', ''),
        'inputType' => 'fileTree',
        'eval' => array(
            'fieldType' => 'radio',
            'filesOnly' => true,
            'extensions' => \Config::get('validImageTypes'),
        ),
    ),
    'image2' => array(
        'label' => array('Bild 2', ''),
        'inputType' => 'fileTree',
        'eval' => array(
            'fieldType' => 'radio',
            'filesOnly' => true,
            'extensions' => \Config::get('validImageTypes'),
        ),
    ),
    //...wiederholt bis image5
    

    Die Ausgabe dazu im HTML-Template können Sie folgendermaßen umsetzen:

    <picture>
        <?php if ($image = $this->getImageObject($this->image1, $this->imageSize)): ?>
            <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:599px)">
        <?php endif ?>
        <?php if ($image = $this->getImageObject($this->image2, $this->imageSize)): ?>
            <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:900px)">
        <?php endif ?>
        <?php if ($image = $this->getImageObject($this->image3, $this->imageSize)): ?>
            <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:1200px)">
        <?php endif ?>
        <?php if ($image = $this->getImageObject($this->image4, $this->imageSize)): ?>
            <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:1920px)">
        <?php endif ?>
        <?php if ($image = $this->getImageObject($this->image5, $this->imageSize)): ?>
            <img srcset="<?= $image->picture['img']['srcset'] ?>" src="<?= $image->picture['img']['src'] ?>">
        <?php endif ?>
    </picture>
    

    Sollten Sie Unterstützung bei der Anpassung benötigen, stehen Ihnen unsere Partner gerne zur Verfügung. Eine Auswahl an Agenturen und Freelancer finden Sie in unserem Partnernetzwerk: https://rocksolidthemes.com/de/contao/service/agenturen

  4. 4 Posted by Sid on 27 Dec, 2018 12:07 PM

    Sid's Avatar

    Perfekt, ... Dankeschön!

  5. 5 Posted by Sid on 28 Dec, 2018 04:42 AM

    Sid's Avatar

    Hallo. ich habe nun neue Templates erstellt (Vorlage hierfür waren die Zentrierter Bereich Templates).
    In der Config-Datei wurden BackgroundImage-Felder 1 bis 5 hinzugefügt und einige Felder wie das bereits vorhanden gewesene Bild/Video-Feld sowie Felder für Hintergrundfarbe & Bildgröße entfernt.
    Das Ergebnis sieht so aus (siehe Code und Bilder)

    <?php
    
    return array(
        'label' => array(
            'Responsive Image Zentrierter Bereich Anfang',
            'Erzeugt einen zentrierten Inhaltsbereich',
        ),
        'types' => array('content', 'module'),
        'standardFields' => array('cssID', 'space'),
        'wrapper' => array(
            'type' => 'start',
        ),
        'fields' => array(
            'borderTop' => array(
                'label' => array('Rahmen oben', 'Erzeugt vor dem Element eine Linie.'),
                'inputType' => 'checkbox',
                'eval' => array('tl_class' => 'w50'),
            ),
            'borderBottom' => array(
                'label' => array('Rahmen unten', 'Erzeugt nach dem Element eine Linie.'),
                'inputType' => 'checkbox',
                'eval' => array('tl_class' => 'w50'),
            ),
            'borderTopColor' => array(
                'label' => array('Rahmenfarbe oben', 'Lassen Sie dieses Feld leer um die Standardfarbe zu verwenden.'),
                'inputType' => 'text',
                'eval' => array(
                    'colorpicker' => true,
                    'tl_class' => 'w50',
                ),
            ),
            'borderBottomColor' => array(
                'label' => array('Rahmenfarbe unten', 'Lassen Sie dieses Feld leer um die Standardfarbe zu verwenden.'),
                'inputType' => 'text',
                'eval' => array(
                    'colorpicker' => true,
                    'tl_class' => 'w50',
                ),
            ),
            'borderTopWidth' => array(
                'label' => array('Rahmenbreite oben', 'Lassen Sie dieses Feld leer um die Standardbreite zu verwenden.'),
                'inputType' => 'inputUnit',
                'options' => array('px', '%', 'em', 'rem', 'ex', 'pt', 'pc', 'in', 'cm', 'mm'),
                'eval' => array(
                    'includeBlankOption' => true,
                    'rgxp' => 'digit_auto_inherit',
                    'tl_class' => 'w50',
                ),
            ),
            'borderBottomWidth' => array(
                'label' => array('Rahmenbreite unten', 'Lassen Sie dieses Feld leer um die Standardbreite zu verwenden.'),
                'inputType' => 'inputUnit',
                'options' => array('px', '%', 'em', 'rem', 'ex', 'pt', 'pc', 'in', 'cm', 'mm'),
                'eval' => array(
                    'includeBlankOption' => true,
                    'rgxp' => 'digit_auto_inherit',
                    'tl_class' => 'w50',
                ),
            ),
    
            'backgroundImage1' => array(
                'label' => array('Bild 1', 'max-width:599px'),
                'inputType' => 'fileTree',
                'eval' => array(
                'tl_class' => 'clr',
                'multiple' => true,
    
                    'fieldType' => 'radio',
                    'filesOnly' => true,
                    'extensions' => \Config::get('validImageTypes'),
                    ),
            ),
    
            'backgroundImage2' => array(
                'label' => array('Bild 2', 'max-width:900px'),
                'inputType' => 'fileTree',
                'eval' => array(
                'tl_class' => 'clr',
                'multiple' => true,
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
                ),
            ),
    
            'backgroundImage3' => array(
                'label' => array('Bild 3', 'max-width:1200px'),
                'inputType' => 'fileTree',
                'eval' => array(
                'tl_class' => 'clr',
                'multiple' => true,
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
                ),
            ),
            
            'backgroundImage4' => array(
                'label' => array('Bild 4', 'max-width:1920px'),
                'inputType' => 'fileTree',
                'eval' => array(
                'tl_class' => 'clr',
                'multiple' => true,
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
                ),
            ),
            'backgroundImage5' => array(
                'label' => array('Bild 5', 'min-width:1920px'),
                'inputType' => 'fileTree',
                'eval' => array(
                'tl_class' => 'clr',
                'multiple' => true,
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => \Config::get('validImageTypes'),
                ),
            ),
            
            'backgroundSize' => array(
                'label' => array('Hintergrundbildgröße', ''),
                'inputType' => 'select',
                'options' => array(
                    '' => 'Beschnitten',
                    'contain' => 'Proportional',
                    '100% 100%' => 'Verzerrt',
                    'auto auto' => 'Originalgröße',
                ),
                'eval' => array('tl_class' => 'w50'),
            ),
            'backgroundPosition' => array(
                'label' => array('Hintergrundposition', 'Nicht mit Parallax-Effekt kombinierbar'),
                'inputType' => 'select',
                'options' => array(
                    '' => '-',
                    '0 0' => 'Links | Oben',
                    '50% 0' => 'Mitte | Oben',
                    '100% 0' => 'Rechts | Oben',
                    '0 50%' => 'Links | Mitte',
                    '50% 50%' => 'Mitte | Mitte',
                    '100% 50%' => 'Rechts | Mitte',
                    '0 100%' => 'Links | Unten',
                    '50% 100%' => 'Mitte | Unten',
                    '100% 100%' => 'Rechts | Unten',
                ),
                'eval' => array('tl_class' => 'w50'),
            ),
            'backgroundVariation' => array(
                'label' => array('Hintergrundeffekt', ''),
                'inputType' => 'select',
                'options' => array(
                    '' => '-',
                    '-background-parallax' => 'Parallax',
                    '-background-mousemove' => 'Mit der Maus bewegend',
                    '-background-mousemove-inverted' => 'Entgegen der Maus bewegend',
                ),
                'eval' => array('tl_class' => 'w50'),
            ),
            'colorInverted' => array(
                'label' => array('Textfarbe invertieren', 'Helle Textfarbe für dunkle Hintergründe und Fotos.'),
                'inputType' => 'checkbox',
                'eval' => array(
                    'tl_class' => 'w50 m12',
                ),
            ),
            'height' => array(
                'label' => array('Mindesthöhe erzwingen', 'Setzt die Mindesthöhe des Bereiches auf einen der im CSS definierten Werte.'),
                'inputType' => 'select',
                'options' => array(
                    '' => '-',
                    '-small' => 'Schmal',
                    '-medium' => 'Mittel',
                    '-large' => 'Hoch',
                ),
                'eval' => array('tl_class' => 'w50'),
            ),
            'fullwidth' => array(
                'label' => array('Content-Fullwidth', 'Inhalt über die gesamte Breite anzeigen.'),
                'inputType' => 'checkbox',
                'eval' => array(
                    'tl_class' => 'w50 m12',
                ),
            ),
        ),
    );
    

    ... die Config Datei passt denke ich soweit? Aber wie sieht es mit der html Datei aus?
    Wo genau muss ich den Picture-Block einfügen und was entfernen, damit alles funktioniert?

             <picture>
                    <?php if ($image = $this->getImageObject($this->backgroundimage1, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:599px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundimage2, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:900px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundimage3, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:1200px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundimage4, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:1920px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundimage5, $this->backgroundImageSize)): ?>
                        <img srcset="<?= $image->picture['img']['srcset'] ?>" src="<?= $image->picture['img']['src'] ?>">
                    <?php endif ?>
                </picture>
    
  6. Support Staff 6 Posted by RockSolid Theme... on 28 Dec, 2018 10:59 AM

    RockSolid Themes's Avatar

    Die Namen der Felder müssen exakt gleich geschrieben werden. Anstatt $this->backgroundImage1 haben Sie $this->backgroundimage1 geschrieben (kleines „i“ anstatt großem „I“).

    Den Picture-Block können Sie an einer beliebigen Stelle ausgeben. Wenn das Bild anstatt des Hintergrundbildes eingefügt werden soll, ersetzen Sie bitte am Ende des Templates von <?php if (count($videoFiles)): ?> bis <?php endif ?> (14 Zeilen) mit folgendem:

    <div class="centered-wrapper-background">
        <picture>
            <!-- Ihnalt Ihres Picture-Blocks -->
        </picture>
    </div>
    
  7. 7 Posted by Sid on 28 Dec, 2018 12:58 PM

    Sid's Avatar

    Hallo und danke für die Hilfe. Bis auf die Fehler mit der Groß/Kleinschreibung hatte ich bereits alles so umgesetzt. Allerdings werden selbst nach ausbessern der Fehlerquelle keine Bilder geladen.
    Der Code sieht zur Zeit so aus:

    
    <?php
        $cssClasses = array(
            'centered-wrapper',
            $this->class,
            $this->backgroundVariation,
        );
        if ($this->borderTop) {
            $cssClasses[] = '-border-top';
        }
        if ($this->borderBottom) {
            $cssClasses[] = '-border-bottom';
        }
        if ($this->colorInverted) {
            $cssClasses[] = '-color-inverted';
        }
            if ($this->height) {
            $cssClasses[] = $this->height;
        }
    

    Wie sieht es mit diesem Teil aus?
    ... gehört hier noch etwas geändert? ↓

     $imageFiles = array();
        $videoFiles = array();
        if (is_array($this->backgroundImage)) {
            foreach (\FilesModel::findMultipleByUuids($this->backgroundImage) as $file) {
                if (in_array(
                    $file->extension,
                    array_map('trim', explode(',', \Config::get('validImageTypes')))
                )) {
                    $imageFiles[] = $file;
                }
                else {
                    $videoFiles[] = $file;
                }
            }
        }
    
     $backgroundStyle = '';
        if ($this->backgroundSize) {
            $backgroundStyle .= 'background-size: ' . $this->backgroundSize . ';';
        }
        if ($this->backgroundPosition) {
            $backgroundStyle .= 'background-position: ' . $this->backgroundPosition . ';';
        }
        $style = '';
        if (!count($videoFiles) && !count($imageFiles)) {
            $style .= $backgroundStyle;
        }
        if ($this->borderTopColor) {
            $style .= 'border-top-color: #' . $this->borderTopColor . ';';
        }
        if (is_array($this->borderTopWidth) && $this->borderTopWidth['value']) {
            $style .= 'border-top-width: ' . $this->borderTopWidth['value'] . $this->borderTopWidth['unit'] . ';';
        }
        if ($this->borderBottomColor) {
            $style .= 'border-bottom-color: #' . $this->borderBottomColor . ';';
        }
        if (is_array($this->borderBottomWidth) && $this->borderBottomWidth['value']) {
            $style .= 'border-bottom-width: ' . $this->borderBottomWidth['value'] . $this->borderBottomWidth['unit'] . ';';
        }
    ?>
    <div class="<?php echo implode(' ', $cssClasses) ?>" style="<?php echo htmlspecialchars($style) ?> <?php echo $this->style ?>"<?php echo $this->cssID ?>>
            <div class="centered-wrapper-background">
                <picture>
                    <?php if ($image = $this->getImageObject($this->backgroundImage1, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:599px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundImage2, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:900px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundImage3, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:1200px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundImage4, $this->backgroundImageSize)): ?>
                        <source srcset="<?= $image->picture['img']['srcset'] ?>" media="(max-width:1920px)">
                    <?php endif ?>
                    <?php if ($image = $this->getImageObject($this->backgroundImage5, $this->backgroundImageSize)): ?>
                        <img srcset="<?= $image->picture['img']['srcset'] ?>" src="<?= $image->picture['img']['src'] ?>">
                    <?php endif ?>
                </picture>
            </div>
        <div class="centered-wrapper-inner<?php if ($this->fullwidth): ?> -fullwidth<?php endif ?>">
    
  8. Support Staff 8 Posted by RockSolid Theme... on 31 Dec, 2018 11:43 AM

    RockSolid Themes's Avatar

    Auf den ersten Blick sehen wir keine Fehler. Wie sieht der Quelltext des Elements im Frontend aus?

  9. 9 Posted by Sid on 02 Jan, 2019 11:14 AM

    Sid's Avatar

    Hallo, ich habe den Fehler auf dieser Seite reproduziert: […link entfernt…]
    Zu sehen ist hier einmal das Bearbeitete Template und einmal das Standard-Template zum vVergleich.
    Ebenfalls seltsam ist, dass die Elemente im Bereich des bearbeiteten Templates nicht zentriert werden.

  10. Support Staff 10 Posted by RockSolid Theme... on 03 Jan, 2019 07:43 AM

    RockSolid Themes's Avatar

    Beim bearbeiteten Template scheint die letze Zeile des Templates zu fehlen, haben Sie diese entfernt?

    <div class="centered-wrapper-inner<?php if ($this->fullwidth): ?> -fullwidth<?php endif ?>">
    

    Zudem muss aus der Konfiguration des Elements bei den Background-Image-Feldern die Angabe 'multiple' => true, entfernt werden und danach die Bilder im Backend neu ausgewählt werden.

  11. 11 Posted by Sid on 03 Jan, 2019 11:43 AM

    Sid's Avatar

    Danke für die Hilfe, euer Support ist klasse!
    Es lag an 'multiple' => true, ... jetzt läuft alles. Perfekt, Danke!

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