Catalog Größenanpassung Bilder

[xchs]

Hallo an die drei neuen Hauptentwickler der Catalog-Erweiterung,

auf einer meiner Seiten habe ich die Catalog/CatalogExt-Erweiterungen im Einsatz. Dort können die Redakteure der Seite u.a. auch Produktbilder (image & gallery) im Backend auswählen. Da mitunter recht viele Bilder auf den Server übertragen werden müssen, erfolgte das bislang immer mittels FTP. Soweit - so gut. Vor einigen Tagen hatte dann aber ein Redakteur der Seite einige Bilder hochgeladen, die allesamt extrem hohe Auflösungen hatten (2048 x 1536)!
Beim Öffnen der betreffenden Bilder mittels Slimbox werden diese dann natürlich einigermaßen bildschrimfüllend (!) angezeigt; selbst die Slimbox-Steuerungstasten sind kaum bis gar nicht zugänglich und das so geöffnete Bild kann dann eigentlich nur mehr mittels Tastaturtasten "ESC", "x" bzw. "c" geschlossen werden.

Nun zu meiner Frage an Euch: Was könnte ich in diesem Fall machen, um eine automatische Großenanpassung auch für die Catalog-Erweiterung zu implementieren?
Ein Möglichkeit wäre vielleicht, die einzelnen Bilder allesamt mittels TL-Dateiverwaltung hochzuladen und dabei von der automatischen Größenanpassung durch TYPOlight Gebrauch zu machen; wenn es aber gilt, relativ viele Bilder hochzuladen, ist diese Methode allerdings recht umständlich.
Weiters habe ich mir den TL-InsertTag "{{image::filename?width=Wert&height=Wert2}}" angeschaut, wo ich im Prinzip eine bestimmte Größe festlegen könnte - weiß allerdings noch nicht genau, ob bzw. wie ich das in meinen Templates konkret umsetzen/implementiern kann.

Im Template selbst werden die Bilder mittels

<?php echo $entry['data']['image']['value']; ?>

eingebunden.

Weiß von Euch vielleicht jemand eine andere/bessere Lösung?

[Andreas]

Hallo xchs,

ohne jetzt die Erweiterung catalog zu kennen - mit folgender Zeile in deinem Template

// ohne Zielordner (system/html/)
<?php echo $this->getImage('bildquelle', 800, 600); ?>
// mit Zielordner z.B. 'tl_files/pics_mid/
<?php echo $this->getImage('bildquelle', 800, 600, 'ziel'); ?>

wird dir eine URL auf ein auf 800x600px verkleinertes Bild ausgegeben. Als 4. Parameter kannst du noch den Zielordner angeben in welchem das Bild gespeichert werden soll - ohne 4. Parameter im Ordner system/html/. Siehe auch hier https://community.contao.org/de/show...light=getimage Ist das Bild erst einmal erzeugt worden wird es nicht noch einmal erzeugt.

Der Inserttag {{image::*}} ist da nicht so gut, da es ein IMG-Element erzeugt.

Jetzt musst du nur noch wissen welche Variable dir in deinem Template die URL des Originalbildes liefert (bildquelle). Das kannst du mit $this->showTemplateVars() herausfinden.

Andreas

[xchs]

Hallo Andreas,

also ich hab jetzt nochmals genauer geschaut, was mittels

<?php echo $entry['data']['image']['value']; ?>

ausgegeben wird, konkret:

<span class="image first even"><a rel="lightbox[lbcataloglist0]" href="tl_files/images/0161710335001.jpg" title="0161710335001"><img src="system/html/0161710335001-d1813d62.jpg" alt="0161710335001" width="140" height="105" /></a></span>

Weiters gibt es auch noch einen Raw-Eintrag

<?php echo $entry['data']['image']['raw']; ?>

, wo ausschließlich der Bildpfad abgespeichert ist:

tl_files/images/0161710335001.jpg

Um die von Dir vorgeschlagene Funktion "getImage" verwenden zu können, müsste ich dann wahrscheinlich mit dem Raw-Eintrag arbeiten und den img-Tag und den Slimbox-ref-Tag, sowie alle weiteren Informationen manuell zusammenstellen...
Allerdings müsste ich dann alle im Modul gemachten Einstellungen hinsichtlich Bildgröße in der Listenansicht usw. hardcodiert ins Template setzen, das dann auch nicht unbedingt optimal ist.

[Andreas]

Um die von Dir vorgeschlagene Funktion "getImage" verwenden zu können, müsste ich dann wahrscheinlich mit dem Raw-Eintrag arbeiten und den img-Tag und den Slimbox-ref-Tag, sowie alle weiteren Informationen manuell zusammenstellen...
Allerdings müsste ich dann alle im Modul gemachten Einstellungen hinsichtlich Bildgröße in der Listenansicht usw. hardcodiert ins Template setzen, das dann auch nicht unbedingt optimal ist.

Nein, überleg doch mal (aber ein ja zum raw-eintrag)

1. Dein Ziel ist es, die Verkleinerungsfunktion vom BE-Upload auch nach einem FTP-Upload nutzen zu können.
2. Die Verkleinerungswerte hast du schon im BE unter Einstellungen-'Maximale Bildbreite/höhe' eingestellt und kannst sie von da aus in dein Template übernehmen.
3. Dein Template würde ohne Änderung auf die originale, übergroße, per FTP hochgeladene Datei verweisen.
4. Der Verweis dorthin steht nur in dem Slimbox-Link, Element A, Attribut href.
5. Die Funktion getImage() liefert dir ersatzweise einen anderen Verweis, welcher auf ein aus deinem original-Bild erzeugtes kleineres Bild zeigt.

Also:

<span class="image first even">
  <a rel="lightbox[lbcataloglist0]" href="

<?php echo $this->getImage($entry['data']['image']['raw'], $GLOBALS['TL_CONFIG']['imageWidth'], $GLOBALS['TL_CONFIG']['imageHeight']); ?>

  " title="0161710335001">
    <img src="system/html/0161710335001-d1813d62.jpg" alt="0161710335001" width="140" height="105" />
  </a>
</span>

Leider hast du mir nicht den Template-Code, sondern den FE-Code gepostet, sonst hätte ich es dir in den Template-Code einfügen können.

Andreas

[xchs]

Hallo Andreas,

meine Anmerkung bzgl. der Bildgrößen bezog sich in diesem Fall NICHT auf jene in den TL-Einstellungen, sondern auf diejenigen, welche im CatalogList-Modul gemacht werden können (in meinem geposteten Code: width="140" height="105")

Und zu Deiner Frage wegen dem Template: Alles was es dazu zu posten gibt, hatte ich schon gepostet. Mehr als diese Code-Stelle

<div class="field image">
<div class="value"><?php echo $entry['data']['image']['value']; ?></div>
</div>

gibts da nicht. Aus diesem Grund habe ich auch die dazu entsprechende FE-Ausgabe gepostet, damit man auch sieht, was durch dieses Array ausgegeben wird.

[do_while]

Hallo xchs,

du könntest die Bildgröße per InsertTag {{image::*}} festlegen, das kannst Du direkt ins Template einbauen.

https://contao.org/typolight-insert-tags.html

[Andreas]

Hallo xchs,

nochmal: Es geht dir darum das hochgeladene übergroße Bild kleiner zu machen, weil das Originalbild für die Großansicht zu groß ist. Du beziehst dich jetzt schon wieder auf das Vorschaubild, da geh ich doch gar nicht ran.

Ok, in deinem Template steht:

<div class="field image">
<div class="value"><?php echo $entry['data']['image']['value']; ?></div>
</div>

Der Ausdruck:
<?php echo $entry['data']['image']['value']; ?>
liefert dir die Zeile:

<span class="image first even"><a rel="lightbox[lbcataloglist0]" href="tl_files/images/0161710335001.jpg" title="0161710335001"><img src="system/html/0161710335001-d1813d62.jpg" alt="0161710335001" width="140" height="105" /></a></span>

Dort sind 8 generierte Variablen enthalten

1. Klasse - image first even
2. Slimbox Galerie-Kennung - [lbcataloglist0]
3. Pfad zum großen Bild - tl_files/images/0161710335001.jpg
4. Linktitel - 0161710335001
5. Pfad zum Vorschaubild - system/html/0161710335001-d1813d62.jpg
6. Alternativtext - 0161710335001
7. Thumb Breite - 140
8. Thumb Höhe - 105

Wie kommst du nun an diese Variablen? Entweder schaust du nochmal was dir showTemplateVars() alles liefert, evtl. werden die Variablen ja einzeln ausgegeben, wie mit $entry['data']['image']['raw'], dann ist es ja leicht die Zeile mit dem SPAN nachzubauen. Wenn nicht, dann kannst du mit PHP (explode() z.B.) die Variablen aus der Zeile heraustrennen und den SPAN neu aufbauen, oder auch versuchen nur das Attribut href in der Zeile mit PHP zu ersetzen.

viel Erfolg Andreas

[Andreas]

du könntest die Bildgröße per InsertTag {{image::*}} festlegen, das kannst Du direkt ins Template einbauen.

Das wird wohl nicht gehen, da {{image::*}} ja ein IMG Element liefert, er benötigt aber den Pfad zu dem großen Bild, welcher als href-Attribut im A-Element enthalten ist.

Andreas

[xchs]

Hallo Andreas,

das ist ja genau das Problem, dass die einzelnen Variablen nicht alle ausgegeben, sondern direkt im Skript so zusammengesetzt werden.

EDIT: Hab aber eben grad gesehen, dass doch einige der Variablen einzeln ausgegeben werden - vielleicht schaff ich es somit ja, das manuell wieder zusammenzusetzen.

[Andreas]

Jetzt mal blind:

<div class="field image">
  <div class="value">
    <?php echo str_replace($entry['data']['image']['raw'], $this->getImage($entry['data']['image']['raw'], $GLOBALS['TL_CONFIG']['imageWidth'], $GLOBALS['TL_CONFIG']['imageHeight']), $entry['data']['image']['value']); ?>
  </div>
</div>

Andreas

[xchs]

Wow, super Andreas, das funktioniert!

Wollte eben die ganze Wurst manuell im Template zusammenstellen, doch Deine Lösung ist offensichtlich weniger Aufwand und funktioniert soweit tadellos.

Vielen Dank für Dein Bemühen und die kompetente Unterstützung!

[Andreas]

Wow, super, hätt ich jetzt nicht gedacht Wenn ich was für mich code, dann krieg ich immer Fehler

[xchs]

Du, noch was

Für das Einzelbild klappt's soweit bestens, allerdings gibt es da auch noch kleine Gallery-Vorschaubilder, für welche die folgenden Template-Variablen generiert werden:

                    [gallery] => Array
                        (
                            [label] => Bildergallerie
                            [type] => file
                            [raw] => a:4:{i:0;s:71:"tl_files/images/DSCN0083.JPG";i:1;s:71:"tl_files/images/DSCN0084.JPG";i:2;s:71:"tl_files/images/DSCN0085.JPG";i:3;s:71:"tl_files/images/DSCN0086.JPG";}
                            [value] => <span class="image first even"><a rel="lightbox[lbcatalogreader0]" href="tl_files/images/DSCN0083.JPG" title="DSCN0083"><img src="system/html/DSCN0083-f75249df.jpg" alt="DSCN0083" width="60" height="60" /></a></span><span class="image odd"><a rel="lightbox[lbcatalogreader0]" href="tl_files/images/DSCN0084.JPG" title="DSCN0084"><img src="system/html/DSCN0084-846ec84f.jpg" alt="DSCN0084" width="60" height="60" /></a></span><span class="image even"><a rel="lightbox[lbcatalogreader0]" href="tl_files/images/DSCN0085.JPG" title="DSCN0085"><img src="system/html/DSCN0085-3f2f72bc.jpg" alt="DSCN0085" width="60" height="60" /></a></span><span class="image odd"><a rel="lightbox[lbcatalogreader0]" href="tl_files/images/DSCN0086.JPG" title="DSCN0086"><img src="system/html/DSCN0086-14869302.jpg" alt="DSCN0086" width="60" height="60" /></a></span>

                            [files] => Array
                                (
                                    [0] => tl_files/images/DSCN0083.JPG
                                    [1] => tl_files/images/DSCN0084.JPG
                                    [2] => tl_files/images/DSCN0085.JPG
                                    [3] => tl_files/images/DSCN0086.JPG
                                )

                            [meta] => Array
                                (
                                    [0] => Array
                                        (
                                            [src] => system/html/DSCN0083-f75249df.jpg
                                            [alt] => DSCN0083
                                            [lb] => lbcatalogreader0
                                            [w] => 60
                                            [h] => 60
                                            [wh] => width="60" height="60"
                                            [caption] => 
                                            [metafile] => 
                                        )

                                    [1] => Array
                                        (
                                            [src] => system/html/DSCN0084-846ec84f.jpg
                                            [alt] => DSCN0084
                                            [lb] => lbcatalogreader0
                                            [w] => 60
                                            [h] => 60
                                            [wh] => width="60" height="60"
                                            [caption] => 
                                            [metafile] => 
                                        )

                                    [2] => Array
                                        (
                                            [src] => system/html/DSCN0085-3f2f72bc.jpg
                                            [alt] => DSCN0085
                                            [lb] => lbcatalogreader0
                                            [w] => 60
                                            [h] => 60
                                            [wh] => width="60" height="60"
                                            [caption] => 
                                            [metafile] => 
                                        )

                                    [3] => Array
                                        (
                                            [src] => system/html/DSCN0086-14869302.jpg
                                            [alt] => DSCN0086
                                            [lb] => lbcatalogreader0
                                            [w] => 60
                                            [h] => 60
                                            [wh] => width="60" height="60"
                                            [caption] => 
                                            [metafile] => 
                                        )

                                )

                        ) 

Kann ich hier auch irgendwie auf den Raw-Eintrag zurückgreifen?

Anmerken müsste ich vielleicht noch, dass die Anzahl der Vorschaubilder variieren kann im Bereich 4-10 beispielsweise.

[Andreas]

Ich weiß ja nicht was du machen willst, aber zugreifen kannst du auf alles was du da siehst und noch mehr, z.B. die ganzen Globals. Innerhalb eines Arrays mit einer foreach-Schleife. Ich kenne deine PHP-Kenntnisse ja nicht.

Andreas

[xchs]

Ich kenne deine PHP-Kenntnisse ja nicht.

Ich würd' mal sagen: sehr bescheiden