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

[xchs]

Jetzt hab ich mal ein wenig herumprobiert mit folgender Schleife:

            <div class="field gallery">
              <?php if ($entry['data']['gallery']['value']): ?>
                <div class="value">
                  <?php foreach ($entry['data']['gallery']['files'] as $id=>$ref): ?>
                    <?php echo str_replace($ref, $this->getImage($ref, $GLOBALS['TL_CONFIG']['imageWidth'], $GLOBALS['TL_CONFIG']['imageHeight']), $entry['data']['gallery']['value']); ?>
                  <?php endforeach; ?>
                </div>
              <?php endif; ?>
            </div>

Das erste Gallery-Bild wird nun entsprechend verkleinert dargestellt, alle anderen jedoch nicht. Irgendwas scheint mit der foreach-Schleife noch nicht ganz richtig zu sein (wie schon gesagt - bin kein PHP-Experte)

Also, wenn ich das so produzierte Ergebnis richtig interpretiere, wird beim ersten Durchlauf der Schleife das 1. Bild gesucht, verkleinert und im Eintrag $entry['data']['gallery']['value'] ersetzt; die restlichen drei Bilder bleiben aber davon unberührt. Beim nächsten Durchlauf erfolgt dann die gleiche Prozedur, dann allerdings mit dem 2. Bild usw. Dadurch erhalte ich dann anstelle von 4 Vorschaubildern insgesamt 16 Gallery-Bilder (jedes vierte davon entsprechend verkleinert)

[Andreas]

Ja klar. Innerhalb der Schleife gibst du ja den kompletten String aus (value), welcher bereits alle 4 Vorschaubilder enthält. Die Schleife wird 4 mal durchlaufen, also bekommst du alles 4 mal. Versuch mal folgendes. Ich kann das leider nicht testen. Ich möchte in der Schleife 4 mal den href austauschen. Ich hoffe, dass er bei jedem Durchlauf den bereits geänderten String (value) nimmt. Danach mach ich erst die Ausgabe - nur einmal.

<?php if ($entry['data']['gallery']['value']): ?>
<div class="field gallery">
<?php foreach ($entry['data']['gallery']['files'] as $fullsizehref): ?>
  <?php str_replace($fullsizehref, $this->getImage($fullsizehref, $GLOBALS['TL_CONFIG']['imageWidth'], $GLOBALS['TL_CONFIG']['imageHeight']), $entry['data']['gallery']['value']); ?>
<?php endforeach; ?>
  <div class="value">
    <?php echo $entry['data']['gallery']['value']; ?>
  </div>
</div>
<?php endif; ?>

Das erste IF hab ich dir mal ganz außenrum gelegt, da dir sonst ja evtl. ein leerer DIV erzeugt wird wenn kein value existiert.

Andreas

[xchs]

Hallo Andreas,

danke für das Code-Schnipsel. Leider hat es damit auch nicht funktioniert. Irgendwie scheint er dann bei der Ausgabe

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

wieder die ursprünglichen Bilder/Bildgrößen zu verwenden.

Um zu überprüfen, ob auch wirklich eine Ersetzung stattgefunden hat habe ich mal testweise probiert, in der foreach-Schleife die String-Replace-Funktion mittels "echo" ausgeben zu lassen. Wie schon im letzten Beitrag beschrieben erhalte ich dann alle 16 (4x4) Vorschaubilder angezeigt, wobei von denen jedes vierte entsprechend größenangepasst geöffnet wird.
Aber wie schon zuvor gesagt - beim zweiten Aufruf bzw. bei der eigentlichen Ausgabe

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

gibt er mir wieder die originalen Bilder aus.

In Deinem Beitrag #2 hast Du gschrieben, dass man für die Funktion "getImage" auch ein Ziel angeben könnte; wäre es in diesem Zusammenhang nicht auch möglich, auf diese Weise die Original-Bilder mit der größenangepassten Version zu überschreiben oder geht das nicht?
Dann könnte ich nämlich alle Bilddateien in

$entry['data']['gallery']['files'] 

vorher geeignet verkleinern und erst dann über

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

ausgeben.
Was meinst Du, würde das funktionieren?

[Andreas]

Wenn mich nicht alles täuscht, dann werden die Bilder umbenannt, sieh dir die erzeugten Bilder mal an.

Ich hab aber einen Fehler von mir entdeckt. In der Schleife habe ich vergessen den geänderten String pro Durchgang neu in sich selbst zu speichern, klar, dass das nicht funktioniert, es wird ja immer wieder auf die unveränderte Variable ...value zugegriffen. Versuch mal das hier. Ich hoffe du verstehst, was ich da mache.

<?php if ($entry['data']['gallery']['value']): ?>
  <?php $newvalue = $entry['data']['gallery']['value']; ?>
<div class="field gallery">
<?php foreach ($entry['data']['gallery']['files'] as $fullsizehref): ?>
  <?php $newvalue = str_replace($fullsizehref, $this->getImage($fullsizehref, $GLOBALS['TL_CONFIG']['imageWidth'], $GLOBALS['TL_CONFIG']['imageHeight']), $newvalue); ?>
<?php endforeach; ?>
  <div class="value">
    <?php echo $newvalue; ?>
  </div>
</div>
<?php endif; ?>

Andreas

[xchs]

Juhu, es funktioniert jetzt!
Nunmehr werden alle Bilder, sowohl das eigentliche Produktbild als auch die Bilder der Gallerie entsprechend verkleinert angezeigt.
Aber mit den betreffenden Redakteuren werde ich schon noch Mal ein Wörtchen reden müssen was ihnen da eingefallen ist, Bilder mit jeweils 670kB und einer Auflösung 2048 x 1536 hochzuladen... Letzendlich leidet darunter ja auch die Zugriffszeit auf die Seite, wenn durch die zusätzlichen Anpassungen im Template erst umständliche Größenberechnungen durchgeführt werden müssen...

Wenn mich nicht alles täuscht, dann werden die Bilder umbenannt, sieh dir die erzeugten Bilder mal an.

Hab grad nachgesehen - ja, die verkleinerten Bilder werden unter /system/html/ abgelegt und erhalten alle eine ID - so wie all die anderen Bilder im HTML-Verzeichnis.

Andreas, vielen Dank für die programmtechnische Unterstützung (wie schon gesagt, ich bin kein PHP-Experte)

[Andreas]

Dein Ansatz mit der Schleife war ja nicht schlecht, wie du siehst hatte ich auch einen Fehler gemacht, man muss halt einfach dran bleiben

Die Umwandlung findet ja zum Glück nur beim 1. Mal statt. Mit dem Tool XENU kannst du alle Bilder auf einen Rutsch erzeugen.

Andreas

[xchs]

Hallo, Dein Tipp, die Links mit XENU zu checken, ist natürlich auch super.
Hab's grad gemacht - keine Probleme gefunden. Und nebenbei wird er mir die Bilder auch verkleinert haben...hehe ;-)

[xchs]

He, und Xenu eignet sich auch bestens, den TYPOlight Suchindex neu aufbauen zu lassen (eben probiert). Bei mir werden nämlich durch die TL-eigene Funktion nicht alle Links/Seiten erfasst...
Super, genial!!