Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 4 Gast/Gäste
Grafik im Footer Desktop/Mobile
#1
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?
Zitieren
#2
Hast du unterschiedliche themes für Desktop und mobile oder nutzt du ein responsives Theme?
Zitieren
#3
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.
Zitieren
#4
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]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren
#5
(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),
Zitieren
#6
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.
Zitieren
#7
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]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren
#8
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.
Zitieren
#9
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?
Zitieren
#10
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?
Zitieren