Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Ergänzendes Feld zur Auswahl eines webp-Bildes im Bild-Inhaltselement

  1. #1
    Contao-Nutzer
    Registriert seit
    28.03.2019.
    Beiträge
    40

    Standard Ergänzendes Feld zur Auswahl eines webp-Bildes im Bild-Inhaltselement

    Ich möchte gerne in der normalen Bild-Darstellung von Contao ein zusätzliches optionales Auswahlfeld für ein webp-Bild einfügen.
    Die Anwender sollen also wie üblich den Button "Auswahl wählen" haben, und darunter eine Dateiauswahl um optional ergänzend das selbe Bild im webp-Format aus der Dateiverwaltung auswählen zu können.

    Mein Ansatz war bisher so:

    /app/Resources/contao/dca/tl_content.php mit diesem Inhalt angelegt:
    PHP-Code:
    <?php
    // Anpassung der Palette
    $GLOBALS['TL_DCA']['tl_content']['palettes']['image'] = str_replace
    (
        
    'singleSRC',
        
    'singleSRC,webpSRC',
       
    $GLOBALS['TL_DCA']['tl_content']['palettes']['image']
    );

    // Hinzufügen der Feld-Konfiguration  
    $GLOBALS['TL_DCA']['tl_content']['fields']['webpSRC'] = array
    (
        
    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['webpSRC'],
        
    'exclude'                 => true,
        
    'inputType'               => 'fileTree',
        
    'eval'                    => array('mandatory' => false'filesOnly' => true'fieldType'=>'radio''extensions' => 'webp''tl_class' => 'clr'), 
      
    'wizard'                  => array(
                                           array(
    'tl_content''pagePicker')
                                   ),      
        
    'sql'                     => "binary(16) NULL"
    );

    /app/Resources/contao/languages/de/tl_content.php mit diesem Inhalt angelegt:
    PHP-Code:
    <?php  

    $GLOBALS
    ['TL_LANG']['tl_content']['webpSRC'] = array
    (
        
    'Bild (Webp-Format)',
        
    'Dasselbe Bild optional auch im Webp-Format hinterlegen. Wichtig: Das Originalformat wie .jpg, .png oder .gif muss zugwiesen sein!'
    );
    In den Themes habe ich das picture_default.html5 Template angepasst:
    PHP-Code:
    <picture>
    <?php if ($this->sources): ?><!--[if IE 9]><video style="display: none;"><![endif]--><?php endif; ?>
     
    <?php if ($this->webpSRC): ?>
    <source srcset="<?= $this->webpSRC['src'?>" alt="<?= $this->alt ?>"<?php if (!empty($this->img['sizes'])) echo ' sizes="' $this->img['sizes'] . '"'; elseif (!$this->sources && !empty($this->img['width']) && !empty($this->img['height'])) echo ' width="' $this->img['width'] . '" height="' $this->img['height'] . '"'?>  type="image/webp"> 
    <?php endif ?> 
        
    <?php if ($this->sources): ?>
      <?php foreach ($this->sources as $source): ?>
        <source srcset="<?= $source['srcset'?>"<?php if (!empty($source['sizes'])) echo ' sizes="' $source['sizes'] . '"'?><?php if (!empty($source['media'])) echo ' media="' $source['media'] . '"'?>>
      <?php endforeach; ?>
      <!--[if IE 9]></video><![endif]-->
    <?php endif; ?>

    <img src="<?= $this->img['src'?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' srcset="' $this->img['srcset'] . '"'?><?php if (!empty($this->img['sizes'])) echo ' sizes="' $this->img['sizes'] . '"'; elseif (!$this->sources && !empty($this->img['width']) && !empty($this->img['height'])) echo ' width="' $this->img['width'] . '" height="' $this->img['height'] . '"'?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' $this->title '"'?><?php if ($this->class || !empty($this->img['class'])) echo ' class="' trim($this->class' ' $this->img['class']) . '"'?><?= $this->attributes ?> itemprop="image">

      </picture>

    <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
      <script>
        window.respimage && window.respimage({
          elements: [document.images[document.images.length - 1]]
        });
      </script>
    <?php endif; ?>
    Es funktioniert so leider noch nicht richtig.
    Nach dem Anlegen des neuen Feldes im Datenbank-Install sowie Leeren der Caches im Contao Manager, steht das neue Feld an der gewünschten Stelle (z.B. im Inhaltselement "Bild") zur Verfügung.
    Ich kann ein manuell in der Dateiverwaltung hinterlegtes webp-Bild auswählen und speichern.

    Im Frontend kommt es aber nicht an. Contao schreibt zwar durch das angepasste Template das picture-Element, gibt aber das webp-Bild nicht ergänzend aus. Lass ich mir per
    PHP-Code:
    <?php $this->showTemplateVars(); ?>
    im Template die Variablen darstellen, wird auch da das Feld webpSRC in keiner Form abgebildet.

    Wo liegt mein Fehler?

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Vielleicht wäre der Einsatz von Contao 4.8 die einfachere Lösung. Dort ist das nämlich implementiert und zwar ohne, dass der Nutzer zusätzlich was hochladen muss, wenn ich es richtig verstanden habe. https://contao.org/de/news/contao_4-8-0.html2019_12_06_webp.jpg
    Geändert von mlweb (06.12.2019 um 23:42 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Nutzer
    Registriert seit
    28.03.2019.
    Beiträge
    40

    Standard

    Danke für den Tipp. Für dieses Projekt ist das aber leider keine Option derzeit von der 4.4. LTS auf 4.8 zu upgraden (aus mehreren Gründen). Deshalb versuche ich mich an diesem Umweg.

  4. #4
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Bevor das Bild an das Picture Template übergeben wird, wird das Image-Template geparst. Dort wird nur die Variable Picture weitergereicht.

    Du musst also sicherstellen, dass deine gewünschte Variable weitergereicht wird.

    https://github.com/contao/contao/blo...ge/image.html5

  5. #5
    Contao-Nutzer
    Registriert seit
    28.03.2019.
    Beiträge
    40

    Standard

    Danke, das war der entscheidende Tipp!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •