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: 12)


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 7 Professionnel, Mozilla Firefox  Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 4.9.7, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

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 7 Professionnel, Mozilla Firefox  Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 4.9.7, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

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
  Bilder der Website von Mobirise werden nicht angezeigt nur der Text mobikfx750 48 2.996 Vor 3 Stunden
Letzter Beitrag: Steffen
  Bilder Galerie am Liebsten per Link aufrufen aber auch Versteckt funsport 26 549 30.05.2019, 08:18
Letzter Beitrag: Tommy Herrmann
  Bilder plötzlich langgezogen! stobi_de 2 74 28.05.2019, 15:03
Letzter Beitrag: stobi_de
  Bilder drehen in Mobirise UlfH 8 183 17.05.2019, 09:31
Letzter Beitrag: Tommy Herrmann
  Breakpoint fürs Menü? stobi_de 2 121 10.05.2019, 10:20
Letzter Beitrag: stobi_de
  Reihenfolge Bilder und Text im Handy stobi_de 2 100 07.05.2019, 20:14
Letzter Beitrag: stobi_de
  Mobirise-Interessante vor/zurück/Full Size Bilder Variante Thomas Saake 1 156 11.02.2019, 18:35
Letzter Beitrag: c-laus
  5 runde Bilder in einer Reihe stobi_de 2 148 30.01.2019, 12:08
Letzter Beitrag: stobi_de
  Hamburger-Menü unsichtbar auf Smartphone Edith D. 6 303 05.01.2019, 15:41
Letzter Beitrag: Tommy Herrmann
  Bilder werden immer mit neuer Endung hochgeladen stobi_de 9 708 02.01.2019, 21:58
Letzter Beitrag: Edith D.



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!