WBCE CMS Forum

wisi01

Member

Smart Image (si-head) über die gesamte Breite

Hallo an alle!

Ich bin wieder mal am Suchen und finde den Weg nicht….
Ich habe im verwendeten Template generell links und rechts jeweils einen Rand (padding von 4% in der Contentbox).
Nun hätte ich aber gerne, dass die Bilder, welcher im Modul „Smart Image“ bei der Einstellung „CSS-Klasse = si-head“ wirklich über die gesamte Breite ersichtlich sind. Also dass das Bild somit über den aktuellen Block hinausgeht bzw. auf die max. Breite des Templates angezeigt wird. Lightbox wird in diesem Fall nicht benötigt.

Nun habe ich schon alle möglichen Einstellungen in der Datei frontend.css des betreffenden Moduls durchprobiert aber irgendwie komm ich auf keinen grünen Zweig. Dazu muss ich leider auch gestehen, dass php und css nicht unbedingt meine größten Stärken sind.

Kann mir vielleicht jemanden einen Tipp geben wie ich das gewünschte Ergebnis doch noch erstellen kann?

Vielen Dank schon mal im Voraus!
LG wisi01

florian

Administrator

Re: Smart Image (si-head) über die gesamte Breite

Das kann das Modul nicht leisten, Du brauchst einen zusätzlichen Block im Template, in dem Du dann den smart Image-Abschnitt einfügst.

Also im Template vom Prinzip her so:

<div class="heroimage"><?php echo $block[5]; ?></div>
<div class="contentbox"><?php echo $block[1]; ?></div>

Das nur exemplarisch, bitte nicht blind übernehmen. Die genaue Ausgestaltung (div-Struktur, Block-ID, gepufferte Contentblöcke oder Funktionsaufruf page_content() ...) richtet sich natürlich nach dem verwendeten Template.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

wisi01

Member

Re: Smart Image (si-head) über die gesamte Breite

Hallo florian,
Danke für deine – wie immer schnelle – Auskunft.

Hört sich für mich doch etwas komplizierter an und ist mir nun auch irgendwie klar, dass ich mit der Veränderung der css keinen Erfolg hatte. Mal sehen – vielleicht stelle ich das Ganze auf ein anderes Template um ober aber ich verzichte einfach auf diesen optischen Effekt.
Eine andere Möglichkeit wäre vermutlich auch auf das vorherige padding zu verzichten – was vermutlich aber auch wieder „nicht berauschend“ aussieht.
Dennoch Danke die Aufklärung! 

florian

Administrator

Re: Smart Image (si-head) über die gesamte Breite

Kompliziert ist das eigentlich nicht. Ohne genauere Kenntnis der Seite bzw. des Templates ist es halt schwer zu erklären.
Schau Dir mal das Template "Buschwerk", "Frühlingsbunt" oder Fragstan an, da sind die Blöcke 3 und 4 "ausgerückt". Das ist wirklich keine Raketenwissenschaft, sowas umzusetzen...

Last edited by florian (25.01.2024 18:22:21)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

wisi01

Member

Re: Smart Image (si-head) über die gesamte Breite

Naja - für einen "Newbie" wie mich ist das gar nicht so einfach 

Also es geht tatsächlich um das Template Fragstan .
Aktuell habe ich 3 Blöcke eingerichtet: Zuerst ein Block (Main) mit etwas einleitenden Text. Dann sollte das Bild über die ganze Seite kommen (Smart-Image) und danach nochmals ein Block mit Text.
Wenn ich allerdings dem „Smart Image“ Bereich den Block „Wide Top“ zuweise und dann geht das Bild zwar beidseitig bis fast an den Rand, allerdings steht es dann auch ganz oben.
Bei Wide Bottom natürlich dann ganz unten – aber dazwischen hab ich das noch nicht hingekriegt.

So – jetzt erst mal futtern gehen und vielleicht ergibt sich ja beim nächtlichen Schlaf noch eine Eingebung..

florian

Administrator

Re: Smart Image (si-head) über die gesamte Breite

Okay, da habe ich mich jetzt deutlich zu weit aus dem Fenster gelehnt. Das kriege ich nicht so auf Anhieb hin. Fragstan ist da irgendwie widerborstig. (No offense!)

Edit: Doch, so, geht's.
1) Bild darf keine si-klasse (auch nicht si-head) haben

2) Edit templates/fragstan/info.php: An sinnfälliger Stelle füg ein

$block[5]='Breites Zwischenbild';
$block[6]='Weiter im Text';

3) Edit templates/fragstan/index.php:

Ersetze

<div class="mainbox usegrid<?php echo $usegrid; ?>">			
			<?php
			if ($contentblock[3]== '') {
				echo '<div role="main" class="content3 contentwide">'.$contentblock[3].'</div>';
			}
			
			if ($contentblock[2]== '') {
				echo '<div role="main" class="content contentwide">'.$contentblock[1].'</div>';
			} else {
				echo '<div role="main" class="content contentnarrow">'.$contentblock[1].'</div>
				<div id="rightbox" class="rightbox"><div role="complementary" class="inner">'.$contentblock[2].'</div><div style="clear:left; height:1px;"></div></div><!-- end rightbox -->
				';
			}
			
						
			?>
	
	</div><!-- end mainbox -->

durch

<div class="mainbox usegrid<?php echo $usegrid; ?>">			
			<?php
			if ($contentblock[3]== '') {
				echo '<div role="main" class="content3 contentwide">'.$contentblock[3].'</div>';
			}
			
			if ($contentblock[2]== '') {
				echo '<div role="main" class="content contentwide">'.$contentblock[1];
			} else {
				echo '<div role="main" class="content contentnarrow">'.$contentblock[1].'</div>
				<div id="rightbox" class="rightbox"><div role="complementary" class="inner">'.$contentblock[2].'</div><div style="clear:left; height:1px;"></div></div><!-- end rightbox -->
				';
			}
			if ($contentblock[5] != '') {
			echo '</div>&nbsp;</div></div></div>'.$contentblock[5].'<div class="contentbox"><div class="container"><div class="mainbox usegrid'.$usegrid.'">';
			}
			if ($contentblock[6]!='') {
				echo '<div class="content contentwide">'.$contentblock[6].'</div>';
			}
						
			?>
	
	</div><!-- end mainbox -->

Last edited by florian (25.01.2024 18:36:35)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

wisi01

Member

Re: Smart Image (si-head) über die gesamte Breite

Hallo florian!
Was soll ich sagen – einfach phantastisch! 

Die kleine Änderung funktioniert genauso wie ich mir das vorgestellt habe und war nach deiner perfekten Anleitung auch gar nicht schwer umzusetzen. Somit lässt sich mit relativ einfachen Mitteln auch mal inmitten einer Textseite ein großflächiges Bild quer über die ganze Seite (bis an den Rand) erstellen.

Einziger kleiner Wermutstropfen (der aber bei mir nicht zu tragen kommt): Smart Image bzw. der Block „Breites Zwischenbild“ kann nur einmal pro Seite verwendet werden. Im Falle einer weiteren Verwendung von diesem Block passt natürlich die Reihenfolge nicht mehr… (eigentlich ja auch klar – ich kann ja auch nicht Replace Header mehrfach vergeben )
Für mich jedenfalls ist diese Lösung mehr als ausreichend und es bleibt mir mal wieder nur einfach DANKE zu sagen!

jean

Member

Re: Smart Image (si-head) über die gesamte Breite

... ohne das Modul oder das verwendete Template zu kennen, aber sollte nicht ein einfaches

[== CSS ==]
 margin: auto calc(50% - 50vw) ;

ausreichen, um auch ohne eigenen Block ein block-Element auf volle Breite zu bringen?

Ansonsten finden sich im Netz unter "full width container" diverse Varianten davon ...

florian

Administrator

Re: Smart Image (si-head) über die gesamte Breite

Interessanter Ansatz, hätte gar nicht gedacht, dass ein Block-Level-Element aus dem umgebenden Div "ausbrechen" kann?

Aber so richtig klappt das so nicht - auch nicht mit "einbild", und ich glaube, der TO wollte auch, dass das Bild nur so breit ist wie der weiß unterlegte Contentbereich.

Last edited by florian (28.01.2024 18:53:03)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

jean

Member

Re: Smart Image (si-head) über die gesamte Breite

hm, eigentlich klappt das, aber ggf. nicht mit replaced elements, also nicht direkt mit img Hängt evtl. auch mit diversen overflow/width/...-Modalitäten in Template zusammen.

Bei (bekanntem) parent-width statt full-width ansonsten (geht bei meinem Test auch mit img):

[== CSS ==]
margin: auto calc(50% - 50vw) ;
transform: translateX(calc(50vw - 50%));
width: #gewünschte Breite#;