WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 25.01.2024 16:08:51

wisi01
Member

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

Hallo an alle!

Ich bin wieder mal am Suchen und finde den Weg nicht…. sad
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. roll

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

Offline

#2 25.01.2024 16:49:43

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.


Nicht ärgern. Nur wundern.

Offline

#3 25.01.2024 17:30:00

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!  thumb_up

Offline

#4 25.01.2024 18:09:47

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 19:22:21)


Nicht ärgern. Nur wundern.

Offline

#5 25.01.2024 19:01:22

wisi01
Member

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

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

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.. wink

Offline

#6 25.01.2024 19:23:20

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 19:36:35)


Nicht ärgern. Nur wundern.

Offline

Liked by:

wisi01

#7 26.01.2024 13:46:47

wisi01
Member

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

Hallo florian!
Was soll ich sagen – einfach phantastisch!  thumb_up

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 wink )
Für mich jedenfalls ist diese Lösung mehr als ausreichend und es bleibt mir mal wieder nur einfach DANKE zu sagen! smile

Offline

Liked by:

florian

#8 28.01.2024 00:47:35

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 ...

Offline

#9 28.01.2024 19:52:20

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.

https://forum.wbce.org/attachment.php?item=3499&download=1

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


Nicht ärgern. Nur wundern.

Offline

#10 28.01.2024 21:39:16

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 wink 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#;

Offline

Board footer

up