Grafik im Footer Desktop/Mobile

Grafik im Footer Desktop/Mobile - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Grafik im Footer Desktop/Mobile (/thread-36815.html)

Seiten: Seiten: 1 2

Grafik im Footer Desktop/Mobile - falcao1010 - 30.10.2019

Hallo,
ich möchte im Footer eine Grafik platzieren, von der es eine Desktop-Version und eine mobile Version gibt.

Mein Wunsch ist, dass je nach Zugriffsgerät die passende Grafik erscheint, d.h. bei Desktop-Zugriffen die Desktop-Version der Grafik und bei Handy-Zugriffen die mobile Version der Grafik.
Lässt sich das lösen?

RE: Grafik im Footer Desktop/Mobile - SvePu - 30.10.2019

Hast du unterschiedliche themes für Desktop und mobile oder nutzt du ein responsives Theme?

RE: Grafik im Footer Desktop/Mobile - itsmeJAY - 30.10.2019

Ich denke das lässt sich über sogenannte Media-Queries lösen.

https://www.mediaevent.de/css/media-query.html

Ich bin in CSS allerdings nicht sooo der Profi Wink

Da wird bestimmt noch jemand was anzumerken haben.

Ich weiß nicht ob MyBB 1.9 später Grid-Systeme verwendet, wenn ja wird es einfacher - aber das ist Zukunftsmusik.

RE: Grafik im Footer Desktop/Mobile - [ExiTuS] - 30.10.2019

Ja, das lässt sich auf viele Weise lösen. Entweder mittels JavaScript oder CSS.

Da ich CSS stets JS vorziehe, hier ein Lösungsvorschlag.

1. In den Footer ein Element setzen (z.B. div oder span) und mit einer eigenen Klasse versehen:

Code:
<span class="image_switch"></span>

2. CSS Klasse definieren und mit dem Hintergrundbild für "Mobil" versehen:

Code:
.image_switch {  background: url('./images/switch_mobile.png') 0 0 no-repeat; }

3. CSS Media Query auf die Display-Breite definieren (z.B. max-width: 720px) und ebenfalls die CSS-Klasse definieren:

Code:
@media screen and (max-width: 720px) {

.image_switch {  background: url('./images/switch_desktop.png') 0 0 no-repeat; }

}

Mit dem bisschen Code wird bei Unterschreitung einer bestimmten Breite (weniger als 720px), das Hintergrundbild des Elements ausgetauscht.
Dies ist reine Prosa für den Bildwechsel - die ganzheitliche Formatierung muss natürlich noch mit erledigen.

Mit JavaScript hast du natürlich viel mehr Möglichkeiten, aber auch wieder einen Haufen Gescriptes an der Backe Smile

[ExiTuS]

RE: Grafik im Footer Desktop/Mobile - falcao1010 - 30.10.2019

(30.10.2019, 17:48)SvePu schrieb: Hast du unterschiedliche themes für Desktop und mobile oder nutzt du ein responsives Theme?

Ich stelle derzeit auf ein responsives Theme um. In dessen Footer möchte ich die beiden Grafiken einbauen.

Momentan löse ich dieses Problematik mit 2 getrennten Themes durch das MybbGo-Mobile-Plugin (1 Desktop, 1 Mobile),

RE: Grafik im Footer Desktop/Mobile - Schnapsnase - 30.10.2019

Wenn Du ein mobile Theme installierst, sind für einige (viele) Elemente wahrscheinlich bereits Media-Queries enthalten.
Hier muss man gucken, wo man einhaken kann oder neu/selbst definieren muss.
Wie [ExiTuS] schon sagte ist die Variante mit CSS (auch für mich) die bevorzugte Lösung.
Man kann, statt das Bild auszutauschen, in der CSS auch mit flexiblen Größen (wie vw/vh) arbeiten. Das ist alles etwas "situationsabhängig".
Ich würde an Deiner Stelle erst mal das gewünschte Theme in Gang bringen. Danach ist Dein "Wunsch" eigentlich kein großes Ding mehr.

RE: Grafik im Footer Desktop/Mobile - [ExiTuS] - 30.10.2019

Wenn auf ein responsives Theme umgestellt wird, erübrigt sich ein Button zum Umschalten sowieso, weil es nichts mehr zum umschalten gibt Smile

Es sei denn du erwägst weitere optionale Themen; dann könntest du meinen Vorschlag immernoch wieder herauskramen...

[ExiTuS]

RE: Grafik im Footer Desktop/Mobile - falcao1010 - 30.10.2019

So, das gewünschte Theme (BootBB) läuft in der Testumgebung jetzt.

Das obige Thema mit den Grafiken werde ich dann bald angehen.

Schonmal Danke für die Antworten, ich komme bald darauf zurück.

RE: Grafik im Footer Desktop/Mobile - falcao1010 - 01.11.2019

Ich habe das neue Theme jetzt online gestellt, siehe https://www.kommunalforum.de/.

Da sind noch zahlreiche Baustellen ...

Eine Baustelle ist der Banner unten. Ziel ist wie geschrieben, dass auf Smartphones anstelle des großen Banners eine kleine Grafik angezeigt wird (die mir bereits vorliegt, 300 x 250). Habt Ihr dazu eine Idee?

RE: Grafik im Footer Desktop/Mobile - Schnapsnase - 01.11.2019

Da sich Dein Banner ja responsive verhält, wie Du selbst gut sehen kannst, ist Dein Vorhaben eigentlich gar nicht notwendig.
Oder soll es für kleine Displays ein gänzlich anderes Image werden?