[zm17CenterImage] Einfaches Bilder zentrieren

[joe]

Es gibt da so eine Sache die mich oft bei Schulungen mit dem Kunden störte, nämlich die Frage "Warum gibt es bei der Bild Positionierung keine Option um das Bild zu zentrieren".

Diese Erweiterung lässt diese Frage überflüssig werden, denn Sie fügt genau diese Optionen hinzu. Kritik, Lob und Ideen sind gerne gesehen. Auch kann euch bei Fragen hier geholfen werden.

Die Extension findet ihr hier: http://www.contao.org/de/extension-l...000009.de.html

Beschreibung des Moduls

Kleine Erweiterung welche das einfache zentrieren von Bildern via Klick erlaubt.

Diese Erweiterung fügt bei der Bildausrichtung den Wert Bild oben oder unten zentrieren hinzu. Dadurch kann der Benutzer auf einfache Art und Weise Bilder zentrieren und muss keine css Klasse oder andere Workarrounds benutzen.

Diese Erweiterung unterstützt derzeit nur ce_text. Es ist aber geplant das news, events und faq ebenfalls unterstützt werden.

[joe]

Es ist nun mit der aktuellen Version möglich auch einzelne Bilder (ce_image Elemente) mithilfe einer Checkbox zu zentrieren.

[RainerG]

Ja, sowas habe ich schon lange gesucht! Großen DANK!

Warum ist das nicht im Core drin?

[MiTsch]

Hallo joe,

ich bin gerade erst über diesen Thread hier und über deine Erweiterung "gestolpert".
Zuerst einmal vielen Dank dafür! Tolle Sache !!!

Ist es schon absehbar wann dieses Feature dann auch für news, events und faq zur Verfügung stehen wird?

Beim Test unter 2.9.5 ist mir kleines Darstellungsproblem im Backend aufgefallen:

Bild mittig feature.png

Das Icon "Bild unten mittig" wird leider nur zur Hälfte dargestellt.

Viele Grüße
MiTsch

[RainerG]

Unter FF9 (Win7 64Bit Ultimate) habe ich dieses Darstellungsproblem nicht. Da wird auch der Erläuterungstext darunter vollständig angezeigt.

[MiTsch]

Stimmt !

Der Fehler tritt nur im IE auf.
Gestestet unter WinXP IE8.0.6001

Viele Grüße
MiTsch

[joe]

Hi Ihr beiden,

vielen Dank für den Hinweis. Werde das im nächsten Release fixen. Denke das liegt daran das ich das ganze ohne CSS Anpassungen hinzugefügt habe. Muss eh eine 2.11 Version herausbringen und werde das hier gleich mit fixen. Zu dem soll es eh noch Support für News und evens geben.

[f1media]

Mir ist aufgefallen wenn ich in Contao Version 2.11.0 ein Elementtyp Bild verwende und dann zentriere ist plötzlich die komplette Internetseite weiß und es wird nix mehr ausgegeben.

Habt ihr auch das Problem?

[joe]

Hi f1media ,

das Modul ist leider noch nicht für contao 2.11 freigegeben. Ich kann derzeit keine neue Version für 2.11 zur Verfügung stellen da es eine Umstellung der Hooks und damit verbunden einen Bug in contao gibt. Der Bug wurde bereits behoben und für contao 2.11.1 wird es dann hoffentlich eine neue version geben

[joe]

So neue Version für 2.11.1 ist nun online. Freue mich wie immer über Feedback.

Bitte beachtet das ihr dringend Version 2.11.1 benötigt. Wie schon erwähnt gab es in 2.11.0 ein paar probleme mit den Hooks die nun beseitigt sind.

Hier geht es zur neue Version:
http://www.contao.org/de/extension-l...000009.de.html

viele Grüße
Joe

[daxn]

Die Bildunterschrift wird aber bei einem reinen Bild-Element anscheinend nicht mit zentriert, oder mache ich was falsch????

Arbeite noch mit 2.9.1

Trotzdem vielen Dank für diese sinnvolle Erweiterung!!!!

Daxn

[joe]

Hey daxn,

danke für dein Feedback. Also es macht natürlich sinn das auch die Bildunterschrift zentriert ist. Ich werde das prüfen und ein Bugfix einspielen. Hab eh noch weitere ToDos für das Modul

lg Joe

[daxn]

Hey daxn,

danke für dein Feedback. Also es macht natürlich sinn das auch die Bildunterschrift zentriert ist. Ich werde das prüfen und ein Bugfix einspielen. Hab eh noch weitere ToDos für das Modul

lg Joe

Hey Joe, super, danke! Bitte nicht die Benutzer älterer Versionen (z.B. 2.9.1) vergessen. Ich kann leider momentan nicht auf eine neuere Version updaten (meine Schüler kennen sich jetzt endlich mit der 2.9 aus :-) )

daxn

[joe]

Es gibt eine neue Version des Modules. Bildunterschriften sind nun ebenfalls zentriert.

@daxn: Leider ist das Update derzeit nur für contao 2.11.1 > geeignet. Ich werde dir aber eine 2.9.x lauffähige Version im Laufe der Woche bereit stellen Vielen Dank nochmals für die Info.

[joe]

Hallo Daxn,

also ich hab das nun in contao 2.9.1 testet und kann das nicht nachvollziehen. Der Fehler mit der Zentrierung tritt bei mir erst bei späteren versionen auf, sprich als contao eine feste breite für bildunterschriften dazu kam. Hast du vielleicht in deiner CSS die caption angepasst?

Gerne kannst du mir auch eine Privat Nachricht senden mit deiner Seite/Projekt dann schau ich mal drauf.

viele Grüße
Joe

[daxn]

Hallo Daxn,

Hast du vielleicht in deiner CSS die caption angepasst?


viele Grüße
Joe

Hey Joe,

natürlich hatte ich das - und es war so einfach mit Firebug das zu lösen ;-) Kommt davon, wenn man stur autodidaktisch Bücher durcharbeitet und dann nicht mehr weiß, was man mal vor langer Zeit getan hat.
Ich danke dir nochmals vielmals. Hatte noch 1000 andere Baustellen (aber es wird! :-) ), daher jetzt erst die antwort.

Viele Grüße
Kai

[operatorone]

Hallo zusammen,

ich habe die Extension heute mal installiert (Contao 3.0.6 / HTML5) und habe meine Bilder auf zentriert ausgerichtet. Leider tut sich im Frontend nichts. ich kann per Firebug auch kein CSS finden die in den Klassen

<figure class="image_container float_above-center">

irgendeine zentrierte Ausrichtung übergibt.

Habt ihr dazu eine Idee? Kann das am HTML5 liegen? Oder muss ich dem Bild eine Größe mitgeben?

Viele Grüße,
operatorone

[joe]

Moin operatorone,

Ich hatte das Modul etwas umgeschrieben da es Probleme bei der Verwendung mit dem FrontenEditor gab. Leider hat sich da wohl ein Fehler eingeschlichen. Ich habe nun downgrade durchgeführt. Magst du das Modul mal bitte aktualisieren und mir Feedback geben?

Besten Dank und viele Grüße
Joe

[operatorone]

Hi Joe,

hab die Erweiterung aktualisiert und klappt gleich prima :-)

Vielen Dank und Grüße,
operatorone

[zonky]

Hallo Joe,

die Bilder werden (m.E. ab 2.11 immer) in einen figure-Tag gepackt und der per CSS-Default als Blockelement ausgewiesen.

Somit müsste das CSS nicht "text-align:center" sein sondern "margin-left:auto; margin-right: auto"

"margin: 0 auto" würde ich nicht nehmen, da das -top und -bottom ja vorgegeben sein könnte.

ggf. müsste man irgendeine Config-Einstellung einbauen, um text-align oder margin-auto auswählen zu können... aktuell habe ich das direkt im Quelltext geändert :-(

Gruss

[joe]

Moin zonky,

Danke für deine Anregung. Das figure tag steht nur in den HTML5 Templates zu Verfügung. Dennoch hast du Recht. Ich werde das Modul demnächst so oder so bearbeiten, eine Option finde ich jedoch unschön da es das Modul unnötig verkompliziert. Außer es finden andere Nutzer ebenfalls interessant.

Ich könnte mir aber vorstellen komplett auf das inline css zu verzichten und stattdessen eine css Datei mit auszuliefern.

Viele Grüße
Joe

[zonky]

gibt es eine Möglichkeit abzufragen "unter welcher Flagge man fährt" xhtml vs. html5?

... habe zumindest nix gefunden wie/wo man den doctype des Templates abfragen könnte :-(

[joe]

Mit $objPage->outputFormat z.b. Ich wüsste trotzdem nicht welchen sinn es macht hier zu unterscheiden, die css classes ist doch bei beiden identisch?

[zonky]

ich denke es gibt mehrere Möglichkeiten... z.B.

* die bisherige Inline-Formatierung beizubehalten und anhand von $objPage->outputFormat mit text-align oder margin-auto zu unterscheiden
* verschiedene Templates anzubieten: tpl und xhtml für text-align und html5 für margin-auto
* oder über eine frei einstellbare bzw. belegbare CSS-Klasse

[Mary]

Lieber Entwickler,

ist ein Upgrade der Extension auf Contao 3.3. geplant?

Bitte, bitte ja ;-)!

[schman]

Ich habe die Erweiterung gerade unter Contao 3.2 getestet dort funktioniert sie ohne Probleme.
Bekommst du irgendwelche Fehlermeldungen bei der Installation/Verwendung?

[joe]

Moin,

Lieber Entwickler,

ist ein Upgrade der Extension auf Contao 3.3. geplant?

Bitte, bitte ja ;-)!

Ist geplant und folgt im ER sobald ich mal wieder etwas Zeit dafür finde

[Mary]

Super, danke!

@schman: Wie gesagt, wollte sie unter C 3.3 verwenden. Fehlermeldung gibt's keine, aber sie tut einfach nix. Es erscheinen nur die radiobuttons, die icons sind nicht sichtbar.

[RainerG]

Bei mir sieht das unter 3.3 im Backend ganz normal aus. Allerdings wird nichts mehr (im Frontend) zentriert. Unter 3.2.x funktionierte noch alles prima.

[habicht1879]

Guten Tag

Ist diese Erweiterung nun kompatibel zu Contao 3.2.x oder doch nicht? Wie ist die Installation vorgesehen? Im Backend?
Dies ist nur möglich, wenn ich die Option "inkompatible Erweiterungen anzeigen" aktiviere. Installiert habe ich es auf diesem Weg, doch es funktioniert leider nicht.

Vielen Dank für die Hilfe

Anhang 14186

[RainerG]

Unter 3.2.x funktionierte die Erweiterung bei mir. Unter 3.3.x tut sie es im Moment leider nicht mehr
Installiert wird sie wie jede andere Erweiterung.

[habicht1879]

Ich habe es jetzt nochmals installiert. Es zeigt mir im Backend auch den Punkt "Bild zentrieren" an. In der Übersicht des Inhaltselements im Backend wird es zentiert dargestellt, aber im Frontend leider nicht. Liegt wohl am Theme...?
Anhang 14209

[zonky]

@habicht

ohne Link zur Seite wird man das nicht bestätigen oder ausschließen können... ;-)

[habicht1879]

[zonky]

kannst du dem umschließenden Div-Container eine Klasse zuweisen oder Inline-Style

<div class="ce_image block" style="text-align: center;">

  
  <figure class="image_container">

          <a href="vorwort.html">
    
    <img width="430" height="600" alt="" src="files/opensauce/img/beitraege/flyer_klein.jpg">

          </a>
    
    
  </figure>

</div> 

[Spooky]

Aber gerne doch: [...]

Hier gibt es mehrere Umstände, die dazu führen, dass die Extension bei dir so nicht funktionieren kann. Zusammengefasst verhindern es folgende Styles:

.image_container {
    display:inline-block;
}

.image_container img {
    display: block;
    width: 100%;
    height: auto;
} 

Die wirst du aber wahrscheinlich nicht so ohne weiteres entfernen bzw. überschreiben können oder wollen.

Um hier flexibler zu sein sollte die Extension [zm17CenterImage] mit CSS Klassen arbeiten, anstatt mit inline-styles (oder einfach zusätzlich). Der inline-style text-align:center für den .image_container wird nicht universell funktionieren. Momentan würde ich sogar davon ausgehen, dass es bei den wenigsten funktionieren wird, weil

.image_container img {
    display:block;
} 

sicher sehr populär ist.

[habicht1879]

Vielen Dank für Eure Antworten.

Momentan würde ich sogar davon ausgehen, dass es bei den wenigsten funktionieren wird, weil

.image_container img {
    display:block;
} 

sicher sehr populär ist.

Dann lasse ich es vorerst mal so wie es ist. Passt schon so für mich. Habe ehrlich gesagt diesbezüglich auch noch zu wenig skills in Sachen CSS.

[walkabout77]

Also ich mache das immer über ein Textelement, Bild einfügen und dann zentrieren (Textzentrierung). Finde ich aber auch komisch, dass dies nicht im Core mit dabei ist. Dachte mir erst, dass man beim Bildabstand einfach bei left/right auto eingeben kann, aber das bezieht sich ja nicht auf das <img> Element...

[Georgi]

Ist ein Update auf C4 geplant?

Ich hatte die für meine Redateure im Einsatz, habe jetzt aber festgestellt, dass bei den Contaos-Update der Ordner ./vendor/contao/core-bundle/src/Resources/contao/themes/flexible/icons/ die icons above-center und below-center immer überschrieben werden. Bei näherem Hinsehen funktioniert die Erweiterung auch nicht mehr mit den "center" Einstellungen.

Bei Bedarf hier die svg für above-center und below-center icons.zip

[joe]

Moin,

Von meiner Seite ist keine Weiterentwicklung geplant außer ein Kunde beauftragt mich. Falls jemand die Extension weiterentwickeln möchte würde ich das repo übertragen.

Viele Grüße
Joe