Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bildgrößen-Ermittlung für Blocks
#1
Hallo,

ich hätte eine Frage bezgl. Bildgrößenermittlung für die Blocks.
Nach dem Import eines Bildes legt der Block im Prinzip ja die Größe und den Beschnitt eines Bildes fest. Dabei wird häufit z.B. Kopf oder Füße abgeschnitten.
Gibt es eine Möglichkeit vorher zu ermitteln, welches Bildformat für einen bestimmten Block notwendig ist. Habe vor, bzw. nach dem Import versucht, das Format im Editor abzulesen. Der zeigt aber nur das Bild an, nicht aber das px-Format.
Im Moment ist das eine eweige Rumprobiererei und Bildmontiererei, bis das Bild so im Rahmen sitz, wie es soll.
Die Seitenstruktur in Mobirise anzulegen geht natürlich superschnell, aber die entsprechenden Bilder vorzubereiten dauert aus o.g. Gründen zu lange.
Ich gehe dabei erstmal nur auf die px-Größe der Bilder in der PC-Darstellung aus.
Ich danke auf diesem Wege schon mal für die vergangenen hilfreichen Tipps zu anderen Themen und hoffe auch diesmal auf ein paar Hilfestellungen.
Danke und LG
Achim
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
ich nochmal... dazu hätte ich noch eine weitere Frage:
Nch dem Import eines Bildes, das sich in PC Darstellung und Tablet Querformat darstellt,
wird im Hochformat immer so weit abgeschnitten, dass der links daneben stehende Titel zwar im Zentrum steht, das Bild aber verschwindet überwiebend außerhalb des Sichtfelds eines Handys, so als ob es nicht responsiv ist. Eigentlich sollte sich das Bild doch mitverkleinern, damit letztlich die gleichen Informationen (in diesem Fall Titel links und Frauenkopf rechts daneben) oder liege ich da falsch?
LG Achim
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin

das hatte ich vor langer zeit mal dazu gesagt.
Hat immer noch Gültigkeit

https://www.nof-schule.de/forum/t-bilder...r+Mobirise
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Das mit den Bildern ist ein Problem! Allerdings muss man Mobirise zu Gute halten, das man in den Blöcken Breakpoints hat, die die Seite an allen Monitoren gut aussehen lassen soll. Die Auflösung der Bilder soll (auch am Smartphone) scharf sein. Deshalb verändert Mobirise die Bildformate (auch Breiten-Höhen-Verhältnis). Hier verschwinden dann manchmal Bildteile. Das kann man in der Seiteneinstellung (Zahnrad) ausschalten!
Ansonsten kannst du nur lokal publizieren und in den assets>images schauen, welche Formate von deinem Bild gemacht werden!

Nachtrag:
@Dobko1, dein Beitrag #2 klingt so, als hast Du ein Bild mit Titel (im Bild). Na das geht mit Mobirise nicht!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Martin, da möchte ich widersprechen!
Bilder über die Zahnradfunktion zu beinflussen, ist nur begrenzt möglich.
Bild ja oder nein, das geht, es gibt auch bei einigen Blöcken den Schieberegler, wo man die Größe
einstellen kann, eine Bildergalerie, oder gar die Headerbilder, das funzt nicht mit dem Zahnrad.

Entscheidend für die gesamte Dartsellung ist bei Mobi immer das Verhältnis Breite zur Höhe.
Wobei die perfekte Darstellung fast nur von der Höhe beinflußt wird. Mit den Höhen muss man experimentieren...das läßt sich nicht umgehen.

Siehe mein Beitrag #3 von eben...
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Vielen Dank, das hat mir gesamtheitlich schon sehr weitergeholfen.
Habe gerade ein paar Versuche abgeschlossen.
Insofern eignen sich Hochformatbilder sehr viel besser als querformatige zum Einbinden in den Titel. Man muss halt schauen, dass vor allem oben im Bild noch genug Fleisch ist und einen guten Kompromiss finden zwischen PC-Darstellung und Handyansicht.
Dann wird das Bild auf dem Handy sogar richtig gut...nur eben nicht breit sondern hoch.
In meinem Fall sehe ich auf dem PC nur noch den Kopf der Frau bis zum Hals, auf dem Handy ist sie komplett drauf zu sehen und die Titelbeschriftung die im Programm links daneben steht, sitzt mittig... eigentlich super :-)
Alles in allem sehe ich das jetzt eigentlich alles nur noch eingeschränkt als Handicap.
Wie schon gesagt: die "wollmilchgebende Eiersau" :-) gibt's halt nicht.

Danke nochmals und LG
Achim
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
@Claus, dein Beitrag #3 hat sich mit meinem überschnitten! Cool Beim Zahnrad meinte ich die Site-Einstellungen. Das scheint aber dann nicht zu funktionieren! Huh
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Der von Claus verlinkte Beitrag geht zu dem ultimativen Bilder-Thread hier im Forum. Da sind die besten Tipps enthalten und man sollte diesen Beitrag eigentlich irgendwo festpinnen.

Am meisten aufpassen muss man bei Blocks, die die Bilder je nach Endausgabe mal Quer- mal Hochformat darstellen.
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
#9
Das Thema ist als „wichtig“ fest gepinnt. thumbs up
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
thumbs up
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
#11
Moin,

also - bei dieser Auswahl von nur einem Bereich der Bilder, kann es sich ja in erster Linie um die Hintergrundbilder handeln.

Hintergrundbilder stehen bei Mobirise, so wie bei jeder responsiven Software auf "cover" (bedecken). Das ist eine CSS-Anweisung, die ein Bild möglichst mittig so darstellt, dass dieses immer noch den gesamten Block abdeckt.

Wenn man nun ein Handy im Hochformat hält, ist es ja wohl logisch, dass nur ein kleiner Teil des Bildes überhaupt noch sichtbar ist. Würde es nicht auf "cover" stehen, so würde nicht die gesamte Höhe des Blocks bedeckt werden. Die Breite oder Höhe eines Bildes lässt sich auch nicht proportional anpassen solange es den Block bedecken muss, da es sonst vollkommen verzerren würde.

Das hat also alles überhaupt gar nichts mit Mobirise zu tun, sondern ausschließlich mit der angewendeten CSS, die für eine responsive angepasste Webseite notwendig ist.

Will man seine Bilder 1:1 an jedem Gerät darstellen, müssen diese proportional verkleinert werden. Auch das bietet Mobirise in unterschiedlichen Blöcken doch an.

Man kann dafür auch eine Galerie wie den 'WOW-Slider' einsetzen, auch dieser passt sich proportional der Display-Größe an.

http://www.mobirise-tutorials.com/WOW-Slider.html

Bei meiner WOW-Slider Beispielseite kann man das ganz gut sehen. Oben ist ein angepasster Slider, der die Bilder proportional und nicht beschnitten verkleinert. Darunter ist ein "Full-Screen" Slider, der die Bilder immer in voller Höhe darstellen soll und dementsprechend seitlich beim Verkleinern des Displays beschneiden muss.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Die einzig vernünftige Lösung ist ein Media-Query, was man ganz einfach im CSS-Editor mit einem fürs Hochformat optimierten Bild machen kann
Also etwa sowas

@media screen and (max-width: 800px) {
& when (@bg-type = 'image') {
background-image: url("http://www.libertybs.co.uk/clients/thelaurelsMOB/EXTERNAL-PICS/house-mobile.jpg");
}
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Moin

ich weis ja nicht was du gerade da fummlest, aber das ist doch nicht ok so, oder

https://event-service-team.com/new-versi...hungen.php
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Doch, das ist eigentlich OK. Zumindest im ersten Block, denn den Rest gibt es noch nicht :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Doch Claus genau das ist der einzigste saubere Weg!!!
Aber er ist auch der aufwendigste. In dieser Art kannst du sogar die Geschwindigkeit zum Aufbau der Seite positiv beeinflussen, weil nähmlich am Handy dann nur das kleine Bild geladen wird und dies ist um einiges an kb kleiner als das für einen1920px Monitor.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren




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!