Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Responsive Banner

  1. #1
    Contao-Nutzer Avatar von btosh
    Registriert seit
    11.12.2015.
    Beiträge
    58

    Standard 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!

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    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.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  4. #4
    Contao-Nutzer Avatar von btosh
    Registriert seit
    11.12.2015.
    Beiträge
    58

    Standard

    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!

  5. #5
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.780
    Partner-ID
    634

    Standard

    evtentuell mit mobile_extended

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von btosh Beitrag anzeigen
    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Contao-Nutzer Avatar von btosh
    Registriert seit
    11.12.2015.
    Beiträge
    58

    Standard

    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.

  8. #8
    Contao-Nutzer Avatar von btosh
    Registriert seit
    11.12.2015.
    Beiträge
    58

    Standard

    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' );
    		}); 
    		
    	});
      }

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •