Wenn responsive angesteuert, dann andere Grafik anzeigen

[derheiko]

Hallo,

ich nutze Modified 2.x und das offizielle responsive Design.

Ich möchte gerne eine große Grafik durch eine kleine ersetzen, wenn das responsive Design angesteuert wird.

Als Beispiel der Header.

Normal:

[ Für Gäste sind keine Dateianhänge sichtbar ]

im responsive:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Der Text wird durch Icons ausgetauscht, sobald der Browser kleiner wird.

Bis jetzt verstanden habe ich, das wenn ich

Code: PHP  [Auswählen]

<ul class="cn_nomobile"> Inhalt </ul>

nutze, dann "verschwindet" der Inhalt wenn das responsive Design angesprochen wird.

Aber hier hört meine Kenntnis auf.

Im Header ist dafür zum Beispiel hinterlegt:

<li><a href="{$login}"><i class="fa fa-sign-in"></i><span class="tn_nomobile">{#link_login#}</span></a></li>

Wenn ich es richtig verstehe, dann gliedert sich jenes wie folgt auf:

<li> = Liste auf

<a href="{$login}"> = Link zum Login

<i class="fa fa-sign-in"></i> = Wenn responsive dann dieses Bild

<span class="tn_nomobile">{#link_login#}</span> = Loginlink wenn kein responsive

</a> </li> = Wird geschlossen

Wo finde ich die Dateien - wo das "i class="fa fa-sign-in" definiert wird?

Oder setze ich falsch an? Gibt es ein Gegenstück von "<ul class="cn_nomobile">" ?

Vielen lieben Dank für die Geduld mit einem Neuling in dem Thema

Gruß Heiko

Linkback: https://www.modified-shop.org/forum/index.php?topic=36653.0

[dukie]

Beschäftige Dich mal mit Media Queries. Damit legst Du u. A. fest welche CSS Regel bei welcher Auflösung greift.
So kannst Du relativ einfach eine Class mit display: none oder display: block verschwinden oder anzeigen lassen.

[derheiko]

Werden diese auch im modified Template verwendet?

Ich lese mich gerade hier ein : https://wiki.selfhtml.org/wiki/CSS/Media_Queries

[flip]

im responsive template unter http://dev.modified-shop.org/ ja.
im standard-template tpl_modified nicht, soweit ich weiß.

[swolfram [templatix]]

Oder Grafiken direkt einbinden mit SRC-Sets je nach Auflösung
Sieh dazu auch hier: https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/#chapter5

Code: PHP  [Auswählen]

<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="">

[derheiko]

Danke für deinen Tipp.
Habe mir das mal angeschaut und es klingt echt einfach und gut.
Aber irgendwie funktioniert das bei mir nicht.

Hier gibt er als Beispiel folgende Adresse an:

https://media.kulturbanause.de/blog/2014/09/responsive-images/srcset-sizes-3.html

Aber egal wie ich meinen Browser einstelle, er zeigt mir immer Large an.

In meinem Shop umgesetzt dass gleiche.

[swolfram [templatix]]

Nur mal eben schnell mit Chrome & Entwicklertools geschaut. Bilder werden immer so geladen, wie hinterlegt, passend zur Auflösung. Es funktioniert.

Die Grafik wird geladen, wenn die Seite geladen wird. Einfach umschalten per Fenstergröße ist nicht, man muss die Seite in der passenden Größe laden.

Ach, und IE kann das natürlich nicht 
http://caniuse.com/#feat=srcset

[derheiko]

Oki.

Dank deines Tipps habe nach srcset gesucht und das gefunden:

https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/picture

Damit habe ich dann mein Problem wie folgt gelöst.

Code: PHP  [Auswählen]

<picture>
   <source srcset="{$tpl_path}img/lieferadresseanleitung.png" media="(min-width: 1024px)">
   <source srcset="{$tpl_path}img/lieferadresseanleitungklein.png" media="(min-width: 480px)">
   <!---Fallback--->
   <img src="{$tpl_path}img/lieferadresseanleitung.png" alt="Anleitung"
        srcset="{$tpl_path}img/lieferadresseanleitungklein.png, {$tpl_path}img/lieferadresseanleitungklein.png 2x">
</picture>

 

Dankeschön