Responsive Banner

Hallo zusammen,

ich bin gerade dabei die Bannerformate für die Mediadaten einer Website zu definieren.
Dabei sind mir zwei Fragen gekommen:

1. Gibt es die Möglichkeit je nach Device das Bannerbild zu tauschen, im Modul oder mit CSS (2 Module und dann jeweils ausblenden)? So dass, z.B. auf dem Desktop ein Skyscraper und mobil ein Mobil Leaderboard dargestellt wird. Funktioniert dann die Statistik noch korrekt?

2. Die Einbindung von HTML-Banner ist auch möglich? Über externe Verlinkung? Hat das schon mal jemand getestet?

Vielen Dank schon mal!

Soviel vorweg, CSS kann kein Device erkennen und Contao auch nur bedingt anhand des UserAgents, wenn du z.B. Gebrauch von dem mobilen Layout machst oder diese Klasse manuell benutzt.

Und noch die Info, dass wenn du im Quelltext ein IMG hast, welches display:none; bekommt, das Bild trotzdem geladen wird. Nur ein Hintergrundbild, welches per CSS zugewiesen wird, wird nicht geladen, wenn es dann z.B. über ein @media Query wieder deaktiviert wird. Und natürlich, wenn dein IMG in HTML-Kommentaren stehen sollte.

Für lediglich andere Bild-Größen, kannst du die Möglichkeit der responsiven Images von Contao benutzen. Dazu gibt es 2 bis 3 Tutorials.

1. die responsiven Images von Contao sind unterstützt. Habe es aber selber noch nicht im Einsatz inkl. aller Varianten die es dabei gibt.
Gezählt wird die ID des Banners aus der Banner Kategorie. Welches Bild sich dahinter verbirgt ist dort zu sehen. Sollte es durch Contao interne responsive Einstellungen möglich sein, stattdessen ein anderes zu laden, dann bekommt das Banner Modul dieses nicht mit. Auch nicht, ob nur Auschnitte oder komplette Bilder gezeigt werden.

2. Ja das geht sofern die URL auf ein Bild zeigt oder eine URL die durch Umleitung(en) zu einem Bild führt. Die Anzahl dieser Umleitungen ist allerdings begrenzt.

Hallo Andreas, hallo Bigbuster,

vielen Dank für Eure schnellen Antworten.

Mit den responsive Images kenne ich mich sehr gut aus. Allerdings erfüllt es hier nicht meinen Zweck. Pardon, natürlich meinte ich nicht, dass ich per CSS das Device erkennen, sondern eine entsprechende Vorgabe für die Darstellung auf einem Endgerät über die Breite und/oder Orientierung angeben kann. Daher dachte ich gibt es eventuell einen Workaround einfach 2 Banner anzulegen und dann dementsprechend ein- und auszublenden, wenn z.B. die ID des Containers getrackt wird.

Bei den responsive Images würde ich ein zu das selbe Bild "nur" anders beschneiden. Ich kann aber nicht ein Superbanner einfach beschneiden, damit es nur z.B. 300 Pixel breit ist.

Die Möglichkeit eine zweite Bannerdatei im Bannermenü anzugeben, würde das Problem lösen, finde ich.

Dann könnte ich Banner 1 (z.B. ein Superbanner) für den Desktop angeben,
und bei mobilen Geräten dann Banner 2 (z.B. ein Mobile Leaderboard).

Ist das relativ leicht zu lösen?
Macht es Sinn im PHP dann die Body-Klassen abzufragen, um das entsprechende Banner auszugeben?
Oder gibt es eine bessere Lösung?

Danke schon mal für Eure Hilfe!

evtentuell mit mobile_extended

Zitat:

---

Zitat von btosh

Bei den responsive Images würde ich ein zu das selbe Bild "nur" anders beschneiden. Ich kann aber nicht ein Superbanner einfach beschneiden, damit es nur z.B. 300 Pixel breit ist....

...Macht es Sinn im PHP dann die Body-Klassen abzufragen, um das entsprechende Banner auszugeben?

---

Aber mit den responsive Images brauchst du doch nicht zu beschneiden, du kannst doch auch nur verkleinern.

Du meinst sowas?

PHP-Code:

---

if(in_array('mobile', explode(' ', $this->class)) {... 


---

Mmh, ich weiß nicht, ich würde mich da nicht auf diese Klasse mobile verlassen. Vielleicht kannst du das Banner ja auch mit JS laden, nachdem du die Breite mit JS ermittelt hast.

Danke für Eure Antworten!

Ich habe mir auch gestern noch Gedanken gemacht. Erst habe ich gedacht serverseitig wäre es sinniger. Aber ich denke die beste Lösung ist, die Webbannerformate über Javascript abzufragen und dann entsprechend zu tauschen.

Soll heißen, wenn ich auf dem Desktop ein Superbanner habe, switche ich beim Tablet Portrait auf z.B. ein Small Square. Die Datei müssen dann nur stringent benannt werden und dürfen sich nur im Bannerformat-Namen unterscheiden.

Dann könnte der Kunde 2 Größen anliefern.

Das Superbanner (728 x 90 Pixel) für das Smartphone auf 300 Pixel Breite klein zu rechnen funktioniert nicht. In der Regel sind die Formate schon gut voll und Schriften recht klein. Dann ist es nicht möglich diese einfach kleiner zu rechnen auch wenn die Pixeldichte auf den mobilen Geräten in der Regel höher ist.

Abschließend noch ein kleines Update. Zwei Bannerformate müssen bei meiner mobilen Darstellung getauscht werden: Banderole-Ad und Superbanner. Im Javascript werden die Webbanner-Module durchsucht und den beiden Webbanner-Formaten eine mobile-freundliche Version zugewiesen.

Nachteil: Die Webbanner müssen vom Kunden in zwei Formaten angeliefert werden. Bei mittelständischen und größeren Kunden werden in der Regel sowieso eine ganze Liste an großen und kleinen Formaten produziert. Da dürfte es keine Probleme geben.

Wenn ich den Code noch verbessern kann, gerne her damit.

HTML-Code:

---

// Ad Change

  if (window.innerWidth <= 768) {

          $('.mod_banner .banner_wrap img[src*="superbanner"]').each(function(){

                $(this).attr('src', function(i, src) {
                    return src.replace( 'superbanner', 'mobile-leaderboard' );
                });
               
        });
       
          $('.mod_banner .banner_wrap img[src*="banderole"]').each(function(){

                $(this).attr('src', function(i, src) {
                    return src.replace( 'superbanner', 'small-square' );
                });
               
        });
  }

---