[pageimage] tempalte für responsive images anpassen

[Flaschenzug]

Nabend,

kurze Frage zur neuen Responsive Images in Contao 3.4
Muss man templates von alten Erweiterungen anpassen, damit die Responsive Images funktionieren?
Denn das läuft leider nicht bei den Bildern wo ich es gerne hätte (die über die Erweiterung PAGEIMAGE eingebunden werden).

Danke für die Rückmeldung.
Liebe Grüße,
Jonas

[RockSolid Themes]

Hallo Jonas,

ja. Die Templates von Erweiterungen müssen angepasst werden.

Vorher:

<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?> title="<?php echo $this->title; ?>"<?php endif; ?>>

Nachher:

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

Das sollte ausreichen sofern die Erweiterung die Methode Controller::addImageToTemplate() verwendet. Falls das nicht der Fall ist, muss $this->picture zuerst in der Erweiterung gesetzt werden. Beispiel:

$picture = \Picture::create($arrItem['singleSRC'], $size)->getTemplateData();
$picture['alt'] = specialchars($arrItem['alt']);
$picture['title'] = specialchars($arrItem['title']);
$objTemplate->picture = $picture;

Die Variablen $arrItem, $size und $objTemplate müssen dabei natürlich mit den entsprechenden Variablen ersetzt werden.

Herzliche Grüße
Dein RockSolid Themes Team

[Flaschenzug]

Ok, das habe ich mal versucht - kriege aber leider keine Ausgabe.

Die Erweiterung verwendet ziemlich sicher NICHT die Controller::addImageToTemplate() Funktion.
(habe zumindest nichts derartiges in den PHP Files gefunden: https://github.com/terminal42/contao-pageimage )

Also versucht $this->picture zu definieren, aber scheinbar klappt irgend etwas noch nicht ganz richtig.

Template Variablen Ausgabe:

Array
(
    [id] => 152
    [pid] => 151
    [tstamp] => 1410099330
    [type] => file
    [path] => files/projekt/testbild.jpg
    [extension] => jpg
    [hash] => f441bba126647c72e134909fabccec2b
    [found] => 1
    [name] => testbild.jpg
    [meta] => 
    [uuid] => li�L6���``n>
    [importantPartX] => 0
    [importantPartY] => 0
    [importantPartWidth] => 0
    [importantPartHeight] => 0
    [alt] => 
    [imageUrl] => 
    [caption] => 
    [src] => assets/images/1/testbild-714d5251.jpg
    [size] =>  width="1140" height="250"
    [style] => 
    [class] => mod_pageImage
    [cssID] => 
    [inColumn] => header
    [headline] => 
    [hl] => h1
)

Und die Ausgabe von $objTemplate->picture mit var_dump() gibt folgendes aus:

array(3) { ["img"]=> array(4) { ["src"]=> string(52) "files/projekt/testbild.jpg" ["width"]=> int(990) ["height"]=> int(310) ["srcset"]=> string(52) "files/projekt/testbild.jpg" } ["sources"]=> array(0) { } ["alt"]=> string(0) "" }

Und die habe ich vorher wie von dir beschrieben definiert:

$picture = \Picture::create($this->path, $this->size)->getTemplateData();
$picture['alt'] = specialchars($this->alt);
//$picture['title'] = specialchars($arrItem['title']); <- habe ich testweise auskommentiert da es in der Erweiterung nicht vorkommt 

Habe ich irgend etwas übersehen ?

[RockSolid Themes]

Wenn du hier https://github.com/terminal42/contao...eImage.php#L77 folgenden Code einfügst, sollte es funktionieren:

$picture = \Picture::create($arrImage['path'], $this->imgSize)->getTemplateData();
$picture['alt'] = specialchars($arrImage['alt']);
$this->Template->picture = $picture;

[Flaschenzug]

Danke, habe das so integriert.
Leider kriege ich es damit noch immer nicht richtig zum laufen.
Allerdings weiß ich nicht, ob es an einer fehlerhaften Einstellung liegt oder an dem Script.
Habe mich an der Anleitung von euch orientiert: http://rocksolidthemes.com/de/contao...picture-contao

Finde die Einstellung für die Bilder allerdings ziemlich komplex und unklar.
Gibt es irgend wo noch eine Anleitung für "blöde" ? :-)

So sieht meine Konfiguration derzeit aus.

[RockSolid Themes]

Folgende Sachen fallen in deinem Screenshot auf:

1. 100% Zoom für die Haupteinstellung und die max-width-900 ist in der Regel eher unüblich. Normalerweise startet man bei 0% Zoom für große Bildschirme und nähert sich den 100% für kleinere Bildschirme.

2. Die Reihenfolge der Media-Queries ist falsch, Zitat aus dem Blog-Artikel: „Dabei gilt es die Reihenfolge der Media-Queries zu beachten, denn der Browser geht diese Liste von oben nach unten durch und nimmt den ersten Eintrag mit passendem Media-Query.“ Die Reihenfolge deiner Media-Queries sollte also 300, 600, 900 sein.

3. Bist du dir sicher, dass der Größenänderungsmodus „Proportional“ der richtige für deinen Fall ist? Mit dem Modus „Exaktes Format“ ist es vermutlich einfacher die Bildergrößen zu verstehen.

[Flaschenzug]

Also deine Antwortzeit ist beachtlich, Danke dafür!

Habe es jetzt mal geändert so wie von dir vorgeschlagen, leider noch immer keinen Erfolg.
Polyfill ist aktiviert.

Leider noch immer keine Veränderung des Bildes.
Noch irgend etwas, das ich übersehen haben könnte ?

[RockSolid Themes]

Hast du den Größenänderungsmodus bei allen Media-Queries auf „Exaktes Format“ umgestellt?

Welcher HTML-Quellcode wird auf deiner Seite ausgegeben?

[Flaschenzug]

Exaktes Format ist bei allen 3 Einträgen eingestellt.

HTML Code Ausgabe im Browser ist die folgende:

<img src="files/slider/projekte/bild.jpg" width="990" height="310" alt="">

Ein schönes Weihnachtsfest allerseits!

[RockSolid Themes]

Dem Quelltext nach scheint es, als würde das Bild überhaupt nicht verkleinert werden. Es funktioniert also vermutlich die Zuordnung der Bildgröße nicht. Bei der Modifikation des Pageimage-Moduls ist noch ein Fehler enthalten, versuche es bitte mit folgendem Code:

$picture = \Picture::create($arrImage['path'], $arrSize)->getTemplateData();
$picture['alt'] = specialchars($arrImage['alt']);
$this->Template->picture = $picture;

Also $arrSize anstatt $this->imgSize

[Flaschenzug]

Erst einmal "Frohe Weihnachten" :-).

Zum Problem: Perfekt ... genau das wars!!!
Das einzige was mir jetzt noch auffällt, ist das die Bilder nicht automatisch mit skaliert werden (also schon die jeweilige voreingestellte Größe, aber nicht mit dem responsive Design damit es die gesamte Breite ausfüllt). Wobei sich das ganz einfach durch width:100% lösen lassen sollte. Das löse ich noch und poste dann den gesamten Weg.

Was auch noch nicht so schön ist: Die Width & Height Attribute werden nicht ausgegeben. Da schaue ich noch mal, das ich das noch hinbekomme.

Außerdem übermittle ich das ganze an die Entwickler des Plugins damit diese das aktualisieren/auf den neusten Stand bringen können.
Also noch einmal vielen Dank dafür!!!

[Flaschenzug]

Ok, das ganze läuft jetzt soweit.
Habe den CSS Code angepasst.

Ebenso den picture_default Template.
Nur eine Sache würde ich mir jetzt noch wünschen:
Die Anpassung der width und height Parameter mit den jeweiligen Größen des Bildes (nicht responsive, sondern bzgl. den zugeordneten Größen).

Das ist der aktuelle Code:

<picture>
<source srcset="assets/images/4/uni-foto-0a81a6d4.jpg" media="(max-width: 400px)">
<source srcset="assets/images/d/uni-foto-6d2592dd.jpg" media="(max-width: 768px)">
<source srcset="assets/images/c/uni-foto-5a508d8c.jpg" media="(max-width: 992px)">
<img src="assets/images/8/uni-foto-de915588.jpg" width="1170" height="300" alt="">
</picture>

Und es wäre super, wenn der image tag sich in soweit anpassen würde, wenn die max width auf 400px, 768px und 992px ist.
Ist das realisierbar? Und ggf. auch irgend wie ohne JS möglich? (Keine Ahnung was das neue "picture" Element und "srcset" können.
Das Image-Polyfill könnte natürlich greifen, wenn der Browser das nicht kann - oder es ohne JS einfach nicht möglich ist.

Danke schonmal.

[RockSolid Themes]

Wenn das Picture-Element verwendet wird, sollten die Attribute Width und Height weggelassen werden.

[Flaschenzug]

Ok, dachte das wäre dann nicht valide. Aber habe deinen Beitrag als Anregung genommen mal nachzuschauen und wieder was dazu gelernt.
Jetzt also ohne die Größenangaben...

Unter anderem hier ein paar Informationen (falls es wie ich auch jemand sucht): https://developers.google.com/web/fu...ages-in-markup

Vielen Dank für den schnellen Support!

[Flaschenzug]

Noch eine Frage:

Gibt es einen derzeit üblichen/gängigen Weg, die responsive Image Funktion für kleinere Versionen lauffähig zu machen?
Einfach ne if / else Funktion, welche entweder die neue oder die alte aufruft? Oder gibt es da einen eleganteren gängigen Weg?
Dann würde ich (wie von terminal CH gebeten) das Plugin so erweitern, dass es für alle Versionen lauffähig ist.

Danke und Grüße

[Flaschenzug]

Also ich habe das ganze jetzt wie folgt gelöst ...

ModulePageimage.php -> folgenden Code hinter Line 76 einfügen (hinter: $this->Template->setData($arrImage); )

        if(version_compare(VERSION.'.'.BUILD, '3.4', '>=')){
            $this->Template->setData($arrImage);
            $picture = \Picture::create($arrImage['path'], $arrSize)->getTemplateData();
            $picture['alt'] = specialchars($arrImage['alt']);
            $this->Template->picture = $picture;
        }

mod_pageimage.html5 & xhtml:

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php if(version_compare(VERSION.'.'.BUILD, '3.4', '>=')): ?>
  <?php $this->insert('picture_default', $this->picture); ?>
<?php else: ?>
  <figure class="image_container"><?php if($this->hasLink): ?><a href="<?php echo $this->href; ?>" title="<?php echo $this->title; ?>"><?php endif; ?><img src="<?php echo $this->src; ?>"<?php echo $this->size; ?> alt="<?php echo $this->alt; ?>" /><?php if($this->hasLink): ?></a><?php endif; ?></figure>
<?php endif; ?>
</div>
<!-- indexer::continue -->

Habe es noch nicht getestet, hat jemand zufällig irgend wo eine 3.2er rumliegen mit der das ganze kurz getestet werden kann?
Sonst installiere ich mir bei Gelegenheit eine.

[Markus C.]

In der Lösung hat sich wieder ein Fehler eingeschlichen.

$this->imgSize durch $arrSize ersetzen

wurde weiter oben bereits so gelöst.

[Flaschenzug]

ups, danke... habe ich korrigiert.

Folgendes war auch noch falsch:
KORREKT: <?php if(version_compare(VERSION.'.'.BUILD, '3.4', '>=')): ?>
FALSCH: <?php if(version_compare(VERSION.'.'.BUILD, '3.4', '<')): ?>

[bongartz120]

Hallo,

ich würde gerne hier noch mal bei dem Thema aufspringen, da ich gerade ein gleiches Problem habe aber mit dem oben angeben Code nicht weiter komme. Hier mein Code, leider ist die Ausgabe aber komplett leer, wo eigentlich das Picture element erscheinen sollte:

<?php if (is_array($this->src)): ?>
    <?php foreach($this->src as $arrFile): ?>
        <p class="<?php echo $arrFile['class']; ?><?php echo $this->additional_class; ?>">
            <?php if ($this->settings->get('file_showLink')): ?>
                <?php if ($this->settings->get('file_showImage')): ?>
                    <a class="cboxElement" data-lightbox="<?php echo $arrFile['lb']; ?>" title="<?php echo $arrFile['alt']; ?>" href="<?php echo $arrFile['file']; ?>">
                <?php else: ?>
                    <a title="<?php echo $arrFile['alt']; ?>" href="<?php echo $arrFile['url']; ?>">
                <?php endif; ?>
            <?php endif; ?>
            <?php if ($this->settings->get('file_showImage')): ?>
                <?php if ($arrFile['isGdImage']): ?>
                    <?php echo $this->generateImage($arrFile['src'], $arrFile['caption']); ?>
                <?php endif; ?>
            <?php else: ?>
                <!--<img src="<?php// echo $arrFile['src']; ?>" alt="" />-->
                <?php             
                     $picture = \Picture::create($arrFile['src'], 1)->getTemplateData();
                     $picture['alt'] = specialchars($arrItem['alt']);
                     $picture['title'] = specialchars($arrItem['title']); 
                ?>
            <?php endif; ?>
            <?php if ($this->settings->get('file_showLink')): ?>
                </a>
            <?php endif; ?>
        </p>
    <?php endforeach; ?>
<?php endif; ?>

Ich versuche das File Template von Meta Models anzupassen.

Viele Dank