Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Bilder fürs Smartphone
#1
Die meisten werden es kennen, manche vielleicht nicht.
Uns alle stört gelegentlich, dass Bilder auf dem Smartphone nicht passen.
Bisher habe ich umständlich die Bilder auf den Server kopiert und dann zu Fuß die Pfade angepasst, wobei Mobi ja nur absolute Pfade macht.

Also hier mal ne Alternative, Beispielhaft an einem Block mit einem Hintergrundbild.

So kennen wir das im Kopf eines Blocks

<fieldset type="background" name="bg" parallax>
<input type="image" title="Hintergrundbild" value="file:///D:/InternetProjekte/Siola//assets/images/cart6.jpg" selected>
<input type="color" title="Hintergrundfarbe" value="#767676">
<input type="video" title="Hintergrundvideo" value="https://www.youtube.com/watch?v=36YgDDJ7XSc">
</fieldset>

Dazumachen wir uns nun eine Anzeige fürs Handy
<fieldset type="background" name="bgphone" parallax>
<input type="image" title="Hintergrundbild-Phone" value="file:///D:/InternetProjekte/Siola//assets/images/cart8.jpg" selected>
</fieldset>

Und siehe da, wir können das Bild sogar in der Mobi-Oberfläche auswählen.

Im CSS muss dieses neue Bild aber noch eingetragen werden. Also ein simples Mediaquery rein. Alles gut ! (solange, bis wer nen fehler findet). Das hier einfach unten drunter schreiben.

@media screen and (max-width: 768px) {
& when (@bg-type = 'image') {
background-image: url(@bg-value);
background-position: right;
background-size: cover;
}
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

Danke für das Input thumbs up

... so ganz habe ich es aber jetzt noch nicht verstanden. Mobirise verkleinert doch automatisch und immer alle Bilder am Smartphone oder stellt Hintergrundbilder automatisch auf "cover" - oder was meinst Du jetzt genau?

Mobirise kann nur deswegen keine normalen, relativen Pfade ...

Code:
./images/Libelle.jpg

... verarbeiten, da diese beim Publizieren einen Fehlermeldung erzeugen, derweil alle Bilder, die relativ und nicht über einen Mobirise-Block verlinkt wurden, eben der Software "unbekannt" sind und daher nicht in die Projekt-Datei "project.mobirise" geschrieben werden. Mobirise vergleicht beim Publizieren aber alle Inhalte mit dieser Projekt-Datei.

Wenn man dagegen Bilder, die in keinem Block verwendet werden (also Mobirise unbekannt sind), absolut verlinkt (also den gesamten Pfad vom Server verwendet)

Code:
http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Libelle.jpg

... dann muss Mobirise diese ja nicht kennen, da dieser Link immer funktioniert, solange die Bilder sich am Server befinden.

Man kann übrigens auch solche, absolut verlinkten Bilder, in der Arbeitsansicht anklicken und dann mit lokalen Bildern über den Bild-Editor ersetzen.

... auf dieser Testseite habe ich z.B. für das Handy-Display bis 768px ein anderes Hintergrundbild (Bild "am Strand mit Hut") mit nur dieser CSS-Anweisung im Block und sonst gar nichts:

http://www.mobirise-tutorials.com/Testse...ware-Ende/

Das Hintergrundbild für das Smartphone wird also von Mobirise automatisch auf "cover" und zentriert gestellt.

Code:
@media (max-width: 768px) {
 background-image: url("http://www.mobirise-tutorials.com/Testseiten/Software-Ende/assets/images/mbr-1920x1286.jpg");
}


.jpg  Smartphone-Background.JPG (Größe: 62,74 KB / Downloads: 5)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Na ja, bei der automatischen Bildverkleinerung kommt aber selten was Sinnvolles heraus.
ich finde das so extrem praktisch


.jpg  Mobi-2bilder.jpg (Größe: 97,71 KB / Downloads: 14)


Die Oben genannten css-Einträge sind eher unwichtig, nur das Media-Query muss grundsätzlich rein.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
achso - jetzt verstehe ich - es geht Dir um die Anzeige vom "Hintergrund-Phone" bei den Werkzeugen Smiling aber dafür hat Mobirise ja eigentlich die Smarthone-Ansicht.

Die bleibt doch aber mit Sicherheit nach einem Update nicht erhalten - oder doch?

Im Grunde zentriert Mobirise ja alle auf "cover" stehenden Hintergrundbilder - und grundsätzlich ist das ja auch richtig, denn der Fokus liegt nun mal bei einem Bild (sollte er zumindest) immer mittig. Und viel mittiger als mein Beispiel geht eigentlich nicht:


.jpg  Background_Samsung.jpg (Größe: 401,98 KB / Downloads: 9)


Mobirise kann ja schecht das Hintergrundbild rechtsbündig stellen (wie in Deinem Code oben), das geht doch gar nicht :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Ja ja, cover und rechtsbündig geht natürlich nicht :confused:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... aber das mit den "input" Feldern hast Du ja geil raus gefunden thumbs up

War mir so noch gar nicht bewusst, dass so die Zahnrad-Einstellungen kreiert werden.

... man müsste nun mal probieren (vielleicht magst Du dann mal berichten) und darauf achten, ob das nach einem Software, bzw. auch nach einem Themen Update auch erhalten bleibt.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
thumbs up
Mit dem "Input" könnte man ja dann bei dem ein oder anderen Block was ergänzen, wenn dieser das grad nicht hat.

Ist vielleicht nicht unbedingt was für mich, weil ich das wahrscheinlich bald wieder vergessen habe, aber schon cool.
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 10, Mozilla Firefox,  Chrome, Edge, GIMP 2.10.18; Mobirise 4.12.3, Code-Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Der Sinn von verschiedenen Hintergründen mag hier besser rüber kommen
https://www.afripix.de/siola/service.php
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Aber warum nimm'ste in diesem Beispiel nicht die Fäden für alle Formate? :confused:
Wenn man keine Arbeit hat, dann macht man sie sich eben Cool
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 10, Mozilla Firefox,  Chrome, Edge, GIMP 2.10.18; Mobirise 4.12.3, Code-Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Ah geh.....wenn die Frau nun mit Bananen handeln würde....könnte ich auch keinen Apfel nehmen


Ach so, oben in meinem Code war noch nen fehler.
Falls das mal einer einbaut:

@media screen and (max-width: 768px) {
& when (@bgphone-type = 'image') {
background-image: url(@bgphone-value);
background-position: right;
background-size: cover;
}
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Hä? Das war doppelt
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Alle Bilder weg? soeren2512 3 160 05.04.2020, 16:17
Letzter Beitrag: Tommy Herrmann
  lizenzfreie Bilder AnnaSP 8 303 07.03.2020, 10:55
Letzter Beitrag: Northerner
  Anpassung Full Screen Bilder im Header Bereich tsickert 1 139 04.03.2020, 16:12
Letzter Beitrag: Tommy Herrmann
  KidsM4 - Bilder im Fußbereich stobi_de 15 446 26.02.2020, 08:10
Letzter Beitrag: stobi_de
  2 Bilder quasi verankern AnnaSP 11 484 05.12.2019, 09:26
Letzter Beitrag: AnnaSP
  Bilder frei platzieren Eitel 7 333 20.11.2019, 08:49
Letzter Beitrag: Eitel
  Bilder Slider untereinander Punkt 2 281 17.11.2019, 15:26
Letzter Beitrag: Punkt
  Bilder im Menü einfügen Clemens 4 323 14.11.2019, 12:56
Letzter Beitrag: Clemens
  Nur 4 Bilder ? Manuel 1 168 07.11.2019, 17:38
Letzter Beitrag: Manuel
  Bilder fehlen bei Aufruf von Mobirise Helisto 2 241 31.10.2019, 16:25
Letzter Beitrag: Helisto



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!