Bildausgabe in verschiedenen Größen

[awant]

Hallo,

habe rumgesucht, finde aber gerade keine Lösung. Über MetaModels habe ich eine Projektliste realisiert, in der auch Fotos eingetragen werden können. Die Bilder werden in Originalgröße abgelegt. Soweit alles bestens.

Nun möchte ich bei der Ausgabe dieses Bild auf einer Übersichtsseite in klein, und auf der Detailseite groß ausgeben. Es wäre nun umständlich wenn das Bild nun in verschiedenen Größen bereitgestellt werden muss um es an den unterschiedlichen Stellen unterschiedlich auszugeben. Kann ich nicht im Template diese Neuberechnung des Bildes veranlassen (die optimalerweise aber gecached wird). Ziel ist, dass die Bild auf der Übersichtsseite klein gerendert (also 100x100) ausgegeben wird und nicht über einen geänderten Attributwert im image-tag nur klein dargestellt wird.
Und ergänzend muss ich hinzufügen, dass ich die Adresse des Bildes in ein data-attribut packen möchte, ich von dem Bild also die src benötige.

Ein Tipp wäre super.

Schöne Grüße
Andreas

[timmey123]

Das kannst du ganz einfach über 2 verschiedene Rendersettings lösen, in dem du jeweils das zugehörigen Fileattribut nach deinen Wünschen konfigurierst.

Für den Rest einfach das zugehörigen Template anpassen.

[MacKP]

Das machst du dann einfach mit verschiedenen Rendersettings für die Ausgaben.

Viele Grüße

[awant]

Super - ihr ahnt es, da hätte ich selbst drauf kommen müssen, war aber nicht so ... - daher tausend Dank für den Pfad durch den Dschungel ... :-)
Habe nun schon mit insert-tags am rumprobieren, aber da kommt kein Pfad sondern nur ein ganzes Tag zurück und so bin ich nun ganz froh dass es wieder mal sehr einfach ist, wenn man weiß wie es geht.

Grüße Andreas

[MacKP]

Mit Inserttags würde es gehen, wenn du dir die Rohdaten ausgeben lässt ;-)
Aber muss ja alles nicht sein ^^

Viele Grüße

[awant]

Muss nicht sein, aber das insert-Tag finde ich dennoch interessant.
OK, statt "echo" einfach die Rohdaten selbst konfigurieren, auch da hätte ich selbst drauf kommen können.
Ich glaube heute ist nicht mein Tag.

Dankeschön für die Ergänzung
Andreas

[awant]

Jetzt muss ich doch noch einmal nachhaken.

Ich habe zwei Rendereinstellungen erstellt. Beide sind völlig identisch bis auf die Einstellung bei dem Bild. So habe ich bei Rendereinstellung "A" bei "Als Bildfeld mit Vorschaubild benutzen" bei der Höhe "500" eingetragen, bei der Rendereinstellung "B" habe ich hier "150" eingetragen.

In meinem Ausgabetemplate habe ich den Eintrag:
<?=$item['item']['text']['image']?>
Doch auf beiden Seiten wird mir der gleiche Bildpfad ausgegeben und bei dem Bild handelt es sich um das Bild in Originalgröße das nicht klein gerendert ist.

Was mache ich denn da falsch?
Grüße Andreas

[MacKP]

Öh.. keine Ahnung. Wie sind denn deine Einstellungen genau an der Stelle?
Lässt du da ein Vorschaubild erstellen?

Viele Grüße

[awant]

OK, irgendwo muss ich im Backend bei den Rendereinstellungen für das Bild ja die Ausgabegröße angeben. Da habe ich außer diese bei dem Punkt "Als Bildfeld mit Vorschaubild benutzen" keine Option gefunden bei der ich eine Bildgröße eintragen kann. Daher habe ich diese Option gewählt und war davon ausgegangen, dass mir bei der Ausgabe im Frontend dann der Name übergeben wird, der zu dem klein gerenderten Bild führt.

Bei den Seiteneinstellungen (in der Seitenstruktur) habe ich dann für die Seite "A" die Renderausgabe "A" zugeordnet (mit dem großen Bild), und für die Seite "B" die Renderausgabe "B" (mit dem kleinen Bild). Und als "Angepasstes Template für die Ausgabe" habe ich für beide Seiten meine Template-Datei "ce_metamodel_projectlist" zugewiesen.

In meiner Template-Datei "metamodel_projects.html5" werden die Projektdaten für die Ausgabe aufbereitet. Hier gebe ich eine ul/li-Liste aus mit den Infos zu den Projekten als data-attribute (<li data-image="pfad-zum-bild.jpg" data-title="Projekttitel">Projekt</li> bzw. ganz genau: <li data-image="<?=$item['item']['text']['image']?>">Projekt</li>). Da da dachte ich nun, dass durch die unterschiedlichen Rendereinstellungen automatisch unterschiedliche Bildpfade ausgegeben werden, eben einmal für das große Bild, auf der anderen Seite eben für das kleine Bild. Aber in der Liste stehen beide male die selben Bildpfade drin (immer zu dem Originalbild).

Verstehe das nicht, wo hole ich den Pfad zu den Bildern der jeweiligen Größe her?

Vielen Dank
Andreas

[MacKP]

In meiner Template-Datei "metamodel_projects.html5" werden die Projektdaten für die Ausgabe aufbereitet. Hier gebe ich eine ul/li-Liste aus mit den Infos zu den Projekten als data-attribute (<li data-image="pfad-zum-bild.jpg" data-title="Projekttitel">Projekt</li> bzw. ganz genau: <li data-image="<?=$item['item']['text']['image']?>">Projekt</li>). Da da dachte ich nun, dass durch die unterschiedlichen Rendereinstellungen automatisch unterschiedliche Bildpfade ausgegeben werden, eben einmal für das große Bild, auf der anderen Seite eben für das kleine Bild. Aber in der Liste stehen beide male die selben Bildpfade drin (immer zu dem Originalbild).

Ich glaub dann musst du dein Template noch mal anpassen?
Ich kenne dein Template jetzt nicht und weiß auch nicht, was du wie aufrufst etc. aber da würde ich dann schon mal anfangen zu suchen. Eventuell dann noch mal die verfügbaren Werte ausgeben lassen und gucken ;-)


Viele Grüße

[awant]

Ich glaube ich stehe auf dem Schlauch. Wenn ich bei den Rendereinstellungen für ein Vorschaubild eine Größe eingebe, wo wird diese denn verarbeitet?
Ich habe als Template für die Rendereinstellung die Datei "metamodel_projects.html5" eingetragen und in dieser Datei habe ich nun ein var_dump($this->data) eingefügt und sollte somit alle verfügbaren Inhalte sehen. Aber es gibt unter 'raw' nur eben das 'image' mit dem Pfad zum Orginalbild, aber nirgends sehe ich etwas das auf ein zweites verfügbares Bild hindeutet. Aber wo ist denn dieses Vorschaubild, das ich bei den Rendereinstellungen eingestellt habe?

Grüße Andreas

[timmey123]

Meiner Meinung nach musst du für deinen Verwendungszwecks einfach das Template des file-Attributes (mm_attr_file) ändern und im jeweiligen Attribut dann zuweisen (da wo du auch die Bildgrößen eingibst)

[awant]

Gute Idee !!!
Habs gleich ausprobiert, aber ich scheitere leider schon daran, dass das Template "mm_attr_file_myName.html5" weder im Ordner "/templates" noch im Ordner "/templates/myFolder" ausgeführt wird. So wird es mir im BE bei den Rendereinstellungen bei dem Bild-Element das Templete "mm_attr_file_myName" angezeigt und kann es wählen und speichern. Bei der Ausführung wird es aber nicht benutzt.

Hat noch jemand eine Idee?

Schöne Grüße
Andreas

[timmey123]

Auch mal Cache etc. gelöscht? Weil das funktioniert definitiv, hab es auch selber in gebrauch …

[awant]

OK, nun sind drei Optionen gescheitert und bin nun mit meinem Latain am Ende.
Das Anliegen selbst, also ein Bild in zwei verschiedenen Größen auszugeben, einmal für eine Übersichtsseite und eine größere Ausgabe für die Detailseite selbst halte ich eigentlich für ein Standardanliegen. Wie macht ihr das denn? Ladet ihr wirklich verschieden große Bilder für jedes dieser Anliegen hoch? Dass wäre nun meine Notlösung wenn das mit Contao nicht anders zu machen ist.

An diesen Lösungen war ich dran und keine funktionierte:
1.) mit den unterschiedlichen Rendereinstellungen alleine, geht es so wie ich dachte nicht. Eine Lösung könnte evtl. die Idee mit dem Attribut-Template sein, aber ...
2.) die Idee mit dem Attribut-Template ist zwar gut, geht aber nicht weil der Templateordner für die Einbindung im Backend funktioniert, aber im Frontend nicht, weil dort der Pfad zum Template scheinbar unbekannt ist.
3.) Die Idee mit dem inserttag und den Rohdaten ist ja auch interessant, aber wenn ich mit: var_dump($this->replaceInsertTags('{{image::tl_files/projekt/image/image1.jpg?width=200&height=150}}');
versuche an die Rohdaten heranzukommen wird mir auch nur der String mit dem img-tag zurückgegeben. Hier sehe ich zwar, dass in SRC eine neue Adresse steht, aber ausgeliefert wird mir eben nur der gesamte Tag und nicht die einzelnen Attribute. Ich benötige aber die Adresse zum Bild, also das was normalerweise in <img src="DIESE_ADRESSE"> steht und eben nicht das Tag.

Schöne Grüße
Andreas

[awant]

Auch mal Cache etc. gelöscht? Weil das funktioniert definitiv, hab es auch selber in gebrauch …

Hallo timmey123,

danke für den Hinweis, ja, den habe ich schon mehrfach gelöscht. Habe die Variante mit diesem Template gerade erneut eingebaut und überprüft. Nein bei mir läuft die nicht.
Vielleicht sollte ich dazusagen dass ich Contao 2.11.11 benutze. Liegt es daran?
Ich habe zwei Templates bereitgelegt, eines in /templates/mm_attr_file_myTest1.html5, das andere in /templates/myProjekt/mm_attr_file_myTest2.html5
Im Backend Rendereinstellungen/Bildelement werden mir beide Templates zur Auswahl angeboten. In beiden Templates habe ich eine Test-Ausgabe "Test1" und "test2" eingebaut. Egal welches der Templates ich zuordne das Template wird nicht benutzt. Cache habe ich gelöscht.

Grüße Andreas

[MacKP]

Ich versteh das Problem nicht wirklich...
Ich stell in meinen Rendersettings einfach ein, das beim Bild ein Vorschaubild erzeugt werden soll, was z.b. 50x50 ist (wenn es nicht in ner Lightbox vergrößert werden soll, dann reicht das ja).
Als Template lasse ich jetzt einfach mal mm_attr_file und gut ist.
Beim Modul oder Content Elemnt wähle ich dann die passenden Rendersettings aus und gut ist. Das ganze dann noch mal für die größere Darstellung natürlich.

Ich brauch da an sich (für den Anfang, wenn mir das so reicht) erst mal nix am Template machen.

Viele Grüße

[timmey123]

Und ergänzend muss ich hinzufügen, dass ich die Adresse des Bildes in ein data-attribut packen möchte, ich von dem Bild also die src benötige.

deshalb die Sache mit dem Template

[MacKP]

OK, die Sache mit dem Template versteh ich nun auch.
Hast du es denn jetzt mal so versucht wie ich beschrieben habe mit den Original Templates?
Eventuell passt dein Template einfach nicht.

Viele Grüße

[awant]

Hallo,

ja, gestern habe ich eine Menge versucht und habe irgendwann aufgegeben.

Dank dem Hinweis von timmey123 mit der Möglichkeit das Template für das einzelne Element anzupassen habe ich es nun geschafft tatsächlich den Pfad auszugeben. Der Grund, dass das bei mir nicht funktioniert hatte, war der, dass ich davon ausgegangen war, dass das Element-Template direkt in die Ausgabe geschrieben wird, was aber nicht der Fall ist. Daher wurde mir aber auch der Test-Text nicht in der Ausgabe ausgeworfen. Aber nun funktioniert diese Übersicht/Detailansicht wunderbar. Dankschön für den Hinweis.

Aber leider komme ich wohl nicht drum herum nachzufragen, wie ich an die Raw-Daten bei dem inserttag drankomme, denn meine Recherchen zu dieser Frage sind leider ergebnislos geblieben.

Der Grund weshalb ich das benötige ist einfach der, dass die Seite responsive wird. Daher sollen für verschiedene Geräte verschieden große Bilder bereitgestellt werden, die aber eben nicht direkt geladen werden sollen. Daher werden die Bildadressen für klein/mittel/groß in einer ul/li-Liste als Attribute eingetragen und von dort per Javascript ausgelesen und zu einem img-Tag aufbereitet.
Daher muss ich nun das gleiche Bild in verschiedenen Bildgrößen bereitstellen. Mit der Rendereinstellung ist das nicht realisierbar weil nur eine Größe pro Rendereinstellung bzw. Seite möglich ist. Daher vermute ich, dass ich das nur mit dem inserttag realisieren kann, weil ich dort eben die Bildgrößen einzeln eintragen kann.
Bei dem inserttag wird aber das ganze Tag ausgeworfen, das würde aber dazu führen, dass alle Bilder sofort geladen würden, was ich eben nicht möchte. Daher muss ich irgendwie die SRC des Bildes bekommen um diese als li-attribute auszugeben.

Wie komme ich an diese raw-Daten des inserttags denn dran?

Grüße Andreas

[MacKP]

An die Raw-Daten kommst du so: Rendersettings > da dann auf den Stift klicken und dort im Template metamodel_unrendered wählen. Dann sollest du alle Werte bekommen die man so hat.

Viele Grüße

[timbec]

Du könntest im Template die image process methode nutzen und dir ein / zwei / drei mal bilder rechnen lassen (die auch gecached werden).

Oder du lässt direkt diese js / listen geschichte und nutzt den den user-agent und lieferst darüber ein entsprechend großes bild aus: https://gist.github.com/tim-bec/6399626

[andreasisaak]

Dein Gist wird so nicht mit MetaModels funktionieren weil dort kein import erlaubt ist und ausserdem würde ich keine Bilder mehr nach dem Useragent ausliefern.

Das iPad wird nicht mehr als mobile erkannt