WBCE CMS Forum

screamindan

Member

Minihero

Moin.
Das mit dem Bild auf Fensterhöhe machen hab ich hingekriegt; funktioniert. Wo kann ich denn angeben, wie das Bild fürs Handy skaliert wird? Bis jetzt wird es in der Breite nicht komplett angezeigt...

Weiters gibt es ja 2 Textfelder. Kann man da auch nen Link eintragen? Diesen Schalter der bei Chio auf der Demoseite da erscheint find ich leider auch nich... 

florian

Administrator

Re: Minihero

Zur zweiten Frage siehe
https://dev4me.com/modules-snippets/ope … o-banners/

Zur Bildgröße kann ich nichts sagen, vielleicht ist weiter unten auf der Seite etwas Überstehendes oder es fehlen Mediaqueries bzw. die Viewport-Anweisung in den Metatags... auf der Demoseite von Ruud wird das Bild korrekt skaliert, deshalb vermute ich die Ursache woanders.

---

Wir Benötigen: Cents, Euros... jetzt spenden!

screamindan

Member

Re: Minihero

Dann trag ich die minihero Sachen am besten im Template bei den Queries mit ein...
EDIT:
Das Bild ist ja ein Hintergrundbild. Wie kann ich das denn einstellen, dass es die Proportionen behält? Wenn ich auf der Demoseite das Fenster verkleinere, wird es nachher seitlich abgeschnitten. Es sind bei mir aber Personen drauf zu sehen, die müssen erkennbar bleiben.
Desktop stellt man ja die Höhe in Prozent ein; das klappt...

Last edited by screamindan (02.10.2017 11:50:55)

screamindan

Member

Re: Minihero

Zur zweiten Frage siehe
https://dev4me.com/modules-snippets/ope … o-banners/

Danke, das hat geklappt

screamindan

Member

Re: Minihero

Zur Bildgröße kann ich nichts sagen, vielleicht ist weiter unten auf der Seite etwas Überstehendes oder es fehlen Mediaqueries bzw. die Viewport-Anweisung in den Metatags... auf der Demoseite von Ruud wird das Bild korrekt skaliert, deshalb vermute ich die Ursache woanders.

Kann ich Dir zum Gucken mal nen Link schicken?

florian

Administrator

Re: Minihero

Das Bild ist ja ein Hintergrundbild. Wie kann ich das denn einstellen, dass es die Proportionen behält?

Dafür ist MiniHero nicht ausgelegt, das siehst Du auch an der Demoseite. Da wird dann nach Bildschirmproportionen auch ein Teil des Bildes abgeschnitten. Ich hab das mal im Screenshot anbei hervorgehoben.
Deine Personen auf dem Bild sind dann aber doch bestimmt auch nicht glücklich, wenn sich eine Schaltfläche oder Text mitten über deren Konterfeie legt?
Jedenfalls, wenn Du ein großes Bild hast, das Du responsiv darstellen willst, solltest Du es vielleicht eher als normales Bild einfügen und dann mit max-width:100%; height:auto; die Responsivität herstellen.

Vielleicht interessant:
https://blog.kulturbanause.de/2014/09/r … -adaptive/
https://www.w3schools.com/css/css_rwd_images.asp

---

Wir Benötigen: Cents, Euros... jetzt spenden!

screamindan

Member

Re: Minihero

Nee das mit Schrift drüber wäre ok. Schade. Das ging so schön einfach einzustellen mit dem Minihero...

Was für Alternativen gibt's denn da noch?

Last edited by screamindan (02.10.2017 20:19:38)

screamindan

Member

Re: Minihero

Es ginge wahrscheinlich ein Foto von weiter weg. Dann werden keine Leute abgeschnitten...

screamindan

Member

Re: Minihero

Moin. Ich muss nochmal nachfragen. Im Minihero wird ja die Bildhöhe eingetragen; entweder in Prozent, oder in px. Kann man irgendwie abhängig vom Endgerät (Displaygrösse) diese Höhenangabe beeinflussen? Dann würde ich bei kleineren Displays px angeben wollen...

Oder zumindest für mobile Geräte statt Minihero ein Bild nehmen.

Last edited by screamindan (08.10.2017 20:10:05)

florian

Administrator

Re: Minihero

Du müsstest dafür auf die Möglichkeit verzichten, die Höhe des Heroimages übers Backend anzugeben (und, falls Du auf mehreren Seiten das Modul verwendest, müssten alle Miniheros dieselbe Höhe haben, wobei sich im Zweifelsfalle auch das lösen ließe).

In der view.php des Moduls ändere die Zeile 47

echo '<div class="minihero'.$pc.' hero-'.$section_id.'" style="background-image: url(\''.$image.'\'); height: '.$style_height.';">'; 

wie folgt:

echo '<div class="minihero'.$pc.' hero-'.$section_id.'" style="background-image: url(\''.$image.'\'); ">'; 

Öffne die frontend.css und ändere

.minihero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.minihero .pfirst {
	
}

zu

.minihero {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	height:450px;
}

@media screen and (max-width:800px) {
	.minihero {
		height:100px;
	}
}

.minihero .pfirst {
	
}

Im obigen Beispiel wird das Heroimage standardmäßig mit einer Höhe von 450 Pixeln angezeigt, auf Displays, die weniger als 800 Pixel breit sind, mit einer Höhe von 100 Pixel.
Soll für die große Version ein Prozentwert verwendet werden, z.B. 33%, so muss dies als "height:33vh" und nicht "height:33%" angegeben werden.

Weitergedacht, kannst Du auf diese Weise auch auf kleinen Displays das Heroimage komplett verschwinden lassen:

@media screen and (max-width:400px) {
	.minihero {
		display:none;
	}
}

---

Wir Benötigen: Cents, Euros... jetzt spenden!

screamindan

Member

Re: Minihero

Danke. Das werde ich mal ausprobieren.

screamindan

Member

Re: Minihero

Jau das haut gut hin!   

screamindan

Member

Re: Minihero

Moin. Ich muss das nochmal hoch holen, da ich das auf einer anderen Site nochmal so machen möchte. Beim Lesefaken scheint das aber so nicht zu funktionieren... Wenn ich die view.php so ändere, verschwindet das Bild und nur der Text des Hero ist noch da. Kann da jemand helfen?

EDIT: Sorry. Nach Cache löschen auf dem Handy scheint es zu funktionieren...

Last edited by screamindan (06.12.2017 20:48:13)