Tags für titel und alt Bildern hinzufügen

[Zille]

Das von mir genutzte Templates Twentytwenty lässt die Vergabe von Tags für <titel> und <alt> nicht zu. Wie könnte ich dennoch derartiges vergeben, um z.B. SEO zu verbessern?

[mlweb]

Was meinst Du? Einzelne Bilder oder Galerien und welche Contaoversion benutzt Du?

[Zille]

Mit Twentytwenty werden zum Zweck des Vergleichs zwei Bilder übereinandergelegt. Beispiel Schiebt man den Slider hin und her, kann man Vorher-Nachher-Varianten darstellen.
Contao 3.5.31

[mlweb]

Ok. Ich hatte an ein Theme mit dem Namen gedacht.

[mlweb]

Das ist doch eine Erweiterung oder täusche ich mich da?
Ich würde das Template dahingehend anpassen und dafür beim Picture-Template spicken.

[Zille]

Moin, ja es ist eine Erweiterung. Und ja, an Template anpassen und beim Picture-Template abschreiben habe ich auch schon gedacht – bin allerdings großartig gescheitert.
Offensichtlich ist meine Vorgehensweise wieder einmal zu schlicht gedacht: Ich habe mir das Template erst einmal kopiert, dann aus dem Picture eine paar Zeilen (die, in denen der titel und das alt vorkommt) kopiert und in die Kopie von Twentytwenty eingefügt. Gespeichert, geschlossen, in einem Artikel als neues Element eingefügt und … keinen Unterschied zu dem vorherigen bemerken können. Hm.
Jetzt ist also die Frage, wie passt man das Template richtig an? Und wie erklärt man es einem php-DAU?

<div class="afterbefore-container" id="twentytwenty-id<?=$this->id; ?>">
   <div style="width: <?=$this->Before->arrSize[0]; ?>px;" class="twentytwenty-container" data-orientation="horizontal">
   <img src="<?= $this->Before->src; ?>" <?= $this->Before->imgSize; ?>>

//von hier an ist der Code von mir eingefügt

  <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) echo ' width="' . $this->img['width'] . '" height="' . $this->img['height'] . '"'; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?php if ($this->class) echo ' class="' . $this->class . '"'; ?><?= $this->attributes ?>>
   <img src="<?= $this->After->src; ?>" <?= $this->After->imgSize; ?>>

//hier endet mein Veränderung

   </div>
<div>

[mlweb]

Ich kenne die Erweiterung nur aus Deinen Forenbeiträgen, weiß also nicht wie sie arbeitet und habe sie auch nie getestet.
Läuft Dein eigenes Template unter dem gleichen Namen? Falls nein, musst Du das Template explizit angeben damit es verwendet wird.

Außerdem musst Du m.E. schauen, welche Variable die Erweiterung zur Verfügung stellt. Nur aus dem Picture-Template kopieren, wird da nicht gehen.

Ich bin kein Entwickler, so etwas ist bei auch immer "Try and Error".

EDIT: Der Code den Du gerade gepostet hast, kann m.E. nicht funktionieren. Damit fügst Du ein zusätzliches Bild ein - müsst man im Quellcode sehen - dessen Quelle (src) aber nicht zu finden ist und deshalb wird im Frontend auch nichts angezeigt.

[Stefko]

Servus,

ich habe jetzt mal eine Weile auf einer Testinstallation mit der Erweiterung herum gespielt und denke mit einer schlichten Erweiterung des Templates (ce_twentytwenty.html5) wirst Du nicht zum Ziel kommen, weil:
- im Backend kann man beim IE TwentyTwenty weder title-, noch alt-tag angeben
- fügt man in der Dateiverwaltung bei dem entsprechenden Bild einen title ein, wird dieser von TT auch nicht übernommen/verwendet
Das lässt sich leicht überprüfen, wenn man folgendes ins FE-Template einfügt*:

<?php $this->showTemplateVars(); ?>

Mein in der Dateiverwaltung vergebener Title taucht dort nicht auf

Man müsste also das komplette Modul so erweitern, dass im Backend ein title- und alt-Feld angeboten werden ...

-----
* vor dem

<?php $this->endblock(); ?>

[mlweb]

Ich habe mir vorhin mal den Code der Erweiterung angeschaut. Wenn ich es richtig sehe übernimmt er aber die Attribute in seine Objekte Before und After oder verstehe das falsch.

protected function compile()    {        if($this->singleSRC_before && $this->singleSRC_after)        {            $objBefore = \FilesModel::findByUuid($this->singleSRC_before);            $objImage = new \FrontendTemplate();
            $this->addImageToTemplate($objImage, array (                'addImage'    => 1,                'singleSRC'   => $objBefore->path,                'alt'         => $this->alt,                'size'        => $this->size,                'imagemargin' => $this->imagemargin,                'imageUrl'    => $this->imageUrl,                'caption'     => $this->caption,                'floating'    => $this->floating,                'fullsize'    => $this->fullsize            ), null,'id' . $objBefore->id);
            $this->Template->Before = $objImage;
            $objAfter  = \FilesModel::findByUuid($this->singleSRC_after);            $objImage = new \FrontendTemplate();
            $this->addImageToTemplate($objImage, array (                'addImage'    => 1,                'singleSRC'   => $objAfter->path,                'alt'         => $this->alt,                'size'        => $this->size,                'imagemargin' => $this->imagemargin,                'imageUrl'    => $this->imageUrl,                'caption'     => $this->caption,                'floating'    => $this->floating,                'fullsize'    => $this->fullsize            ), null,'id' . $objAfer->id);
            $this->Template->After = $objImage;
            $GLOBALS['TL_JQUERY']['eventmove']          = '<script src="system/modules/twentytwenty/assets/js/jquery.event.move.js"></script>';            $GLOBALS['TL_JQUERY']['twentytwenty']       = '<script src="system/modules/twentytwenty/assets/js/jquery.twentytwenty.js"></script>';            $GLOBALS['TL_JQUERY']['twentytwenty_load']  = '<script>$(window).load(function(){$(".twentytwenty-container[data-orientation!=\'vertical\']").twentytwenty({default_offset_pct: 0.7});$(".twentytwenty-container[data-orientation=\'vertical\']").twentytwenty({default_offset_pct: 0.3, orientation: \'vertical\'});});</script>';            $GLOBALS['TL_CSS']['twentytwenty']          = 'system/modules/twentytwenty/assets/css/twentytwenty.css';        }    } 

[Stefko]

Sodele,
wenn Du damit leben kannst, dass der Alt- und Title-Tag bei beiden Bildern identisch ist, habe ich eine (nicht updatesichere) Lösung gefunden:

In der /system/modules/twentytwenty/dca/tl_content.php änderst du

$GLOBALS['TL_DCA']['tl_content']['palettes']['twentytwenty'] = '{type_legend},type,headline;{twentytwenty_legend},singleSRC_before,singleSRC_after,size;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop'; 

zu

$GLOBALS['TL_DCA']['tl_content']['palettes']['twentytwenty'] = '{type_legend},type,headline;{twentytwenty_legend},singleSRC_before,singleSRC_after,alt,title,size;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop'; 

und in der /system/modules/twentytwenty/elements/ContentTwentyTwenty.php fügst du nach der Zeile

'alt' => $this->alt, 

folgende Zeile hinzu

'title' => $this->title, 

Achtung, letzteres musst Du zweimal machen, einmal bei $objBefore und einmal für $objAfter

Wie man leicht sieht, bin ich was den Krempel angeht auch nicht der Crack, aber vlt findet ein eben solcher noch einen besseren und saubereren Weg ...

[Zille]

@ mlweb:
Das der Code so nicht funktionieren kann, ist mir klar – hier wollte ich erst mal sehen, ob sich dadurch irgendwas im Backend verändert. Tut es natürlich nich …

@ Stefko:
Das sieht vielversprechend aus. im Backend kann ich jetzt alt und titel angeben, prima. Nur kommt im Quellcode davon noch nichts an.

<div class="afterbefore-container" id="twentytwenty-id228">
    <div style="width: 572px;" class="twentytwenty-container" data-orientation="horizontal">
	<img src="assets/images/b/bildoptimierung-1-9a9744cb.jpg"  width="572" height="381">
	<img src="assets/images/7/bildoptimierung-2-59a12197.jpg"  width="572" height="381">
    </div>
<div>

So, un nu wird’s bissel verrückt:
Bevor ich hier antworte, habe ich es natürlich erst einmal ausprobiert. Und da stand im ersten Versuch doch tatsächlich 3x "img src …" – was mich schnell darauf gebracht hat, dass ich es dummerweise mit dem oben erwähnten, geänderten (und insofern falschen) Template ce_twentytwenty.html5 tat. Aber in dieser Variante war title und alt im Quellcode zu sehen! Bist Du eventuell von diesem falschen Template ausgegangen?

[Stefko]

Ahoi,
Ich bin schon beim Feierabendbier und kann das gerade nicht testen.
Aber am Template hatte ich gar nix geändert. Nur die zwei Dateien wie zuvor beschrieben.
Ich schicke die Dir nachher mal.


Gesendet von iPhone mit Tapatalk

[Zille]

Ach, bleibe mal beim Feierabendbier. Morgen ist auch ein Tag. Und danach kommt noch einer …

Frage im Kreuzworträtsel: wohlschmeckendes Getränk mit acht Buchstaben, Antwort: Freibier

[Stefko]

Moin,

wie gesagt, an der ce_twentytwenty.html5 habe ich gar nichts geändert. Nur die dca/tl_content.php und elements/ContentTwentyTwenty.php hatte ich angefasst. Hier mal die beiden Dateien Archiv.zip
Ansonsten, welche Version von TT nutzt Du denn? Bei mir ist's die 1.0.1

[Zille]

Meine Version von TT ist 1.0.0 Build 2 – ein Versuch per Erweiterungsverwaltung auf 1.0.1 zu updaten funktioniert nicht (Veränderung ist nicht update-sicher, klar, muss dann die zwei Datein wieder neu einspielen). Also manuelle Installation? Habe ich noch nicht gemacht.

Wo gibt es denn die neuste Version? bei GitHub oder bei TwentyTwenty? Bei beiden kann ich nirgends eine Versionsnummer erkennen.

[Stefko]

Ich hatte es über den Composer installiert. Müsste diese hier sein https://github.com/contao-dot-kitchen/twentytwenty
Hat sich schon länger nichts mehr geändert.

[Zille]

Aha, danke. Dann muss ich jetzt mal sehen, wie eine manuelle Installation unter 3.5 geht, habe ich bisher noch nicht machen müssen.

[Zille]

So, nu aba: im Template ce_twentytwenty.html5 habe ich die Zeile:

<img src="<?= $this->Before->src; ?>" <?= $this->Before->imgSize; ?>>

zu folgendem erweitert (geklaut im Picture-Template):

<img src="<?= $this->Before->src; ?>" <?= $this->Before->imgSize; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?>>

Damit ist im Quellcode titel als auch alt vorhanden. Nu bin ich’s erst mal zufrieden.

[mlweb]

Und die Änderungen von @Stefko oder?

[Zille]

Ja klar. Sorry, so wie von mir zuletzt geschrieben ist es missverständlich. Stefko ist der Held, der hat die entscheidenden Eingaben geliefert.

[Stefko]

Ja klar. Sorry, so wie von mir zuletzt geschrieben ist es missverständlich. Stefko ist der Held, der hat die entscheidenden Eingaben geliefert.

Du lieber Himmel, ich werde gleich rot


Gesendet von iPhone mit Tapatalk

[Zille]

Die ursprüngliche Frage nach dem Hinzufügen von title und alt-Tags ist erfolgreich gelöst.
Jetzt taucht das nächste Problem auf – ist TwentyTwenty nicht responsiv?
Ich habe einmal ein "normales" Bild und TwentyTwenty in eine Seite mit gleichen Bildgrößenangaben eingebaut. Das normale Bild verhält sich wie erwartet, TwentyTwenty bleibt hingegen steif stehen. Hm …
(Link entfernt)

[Stefko]

Die ursprüngliche Frage nach dem Hinzufügen von title und alt-Tags ist erfolgreich gelöst.
Jetzt taucht das nächste Problem auf – ist TwentyTwenty nicht responsiv?
Ich habe einmal ein "normales" Bild und TwentyTwenty in eine Seite mit gleichen Bildgrößenangaben eingebaut. Das normale Bild verhält sich wie erwartet, TwentyTwenty bleibt hingegen steif stehen. Hm …
http://immo-foto.info/test.html

Also in meiner Test-Installation verhält sich TT anders als bei deinem Link. Da habe ich wahrscheinlich was im CSS angepasst. Ich schaue mal morgen nach und gebe Bescheid.
BTW: gleich der (wahrscheinlich) nächste Punkt, das „sliden“ zwischen den Bildern funktioniert (bei mir) mobil (iPhone 6) auch nicht.


Gesendet von iPhone mit Tapatalk

[Zille]

Prima.
Dazu gleich weitere Infos – ich nutze ein Themes von Rocksolid, und die eingestellete Bildgröße ist diese:

[MacKP]

In einem kleinen Test hab ich den Container 'twentytwenty-container' per max-width: 100% responsive hin bekommen. Die Höhe muss allerdings weiterhin so bleiben, wie das festgelegt ist, sonst wirds gar nicht angezeigt.
Eventuell wäre für Smartphones aber auch eine andere Ansicht praktischer... Kommt drauf an, was das ganze soll.

Viele Grüße

[Zille]

… hab ich den Container 'twentytwenty-container' per max-width: 100% responsive hin bekommen.

Ich auch.
Danke.

Eventuell wäre für Smartphones aber auch eine andere Ansicht praktischer... Kommt drauf an, was das ganze soll.

Verstehe ich momentan nicht … es soll ein Bildvergleich vor und nach ein Bildoptimierung sein. Und der funktioniert doch, oder?

[MacKP]

Ja, das versteh ich schon. Aber für mich ist bei sowas die Frage wie sinnvoll so eine Ansicht dann für Smartphones ist.. aber das ist auch Geschmackssache ;-)

Viele Grüße

[Zille]

Hm … dann versuche ich es mal so: Wenn Du Zweifel hast, dann hast Du doch vielleicht auch eine (nicht unbedingt schon ausgereifte) Idee, was besser wäre?
Ich geh da durchaus mit, dass es bei solch kleinen Bildern kaum ein Erkenntnisgewinn in der Art "Boa eh, was für’n Pixelschubser" aufkommt.

[mlweb]

Ob es technisch mit der Erweiterung machbar ist weiss ich nicht, aber als grobe Idee mit Button und Klick (vorher/nachher). Gibt zwar keinen direkten Vergleich aber besser sichtbar ist es sicher.
Ansonsten würde ich mir für Lösungsanregungen die mobilen Apps von Bildbearbeitungsprogrammen anschauen oder die Webseiten von tinypng und Konsorten.

[Zille]

Beitrag hat sich erledigt, war hier wohl auch falsch (es ging um das manuelle Installieren von Erweiterungen).