moziloCMS Supportforum

moziloCMS => Ich wünsche mir... => Thema gestartet von: Werner am 05. Januar 2016, 05:37:58

Titel: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Werner am 05. Januar 2016, 05:37:58
Neben den Galerien müssen bei mir Bilder, um eine übersichtliche Optik zu erhalten, mal die eine oder andere Größe haben.

Schön wäre, wenn man nur ein Bild hochladen müsste, die Größe aber in z.B. Pixel zusätzlich mitgäbe.

bisherige Syntax
[bild|@=Inner Wheel:Sonorities_Konzertkarte1.png=@]

gewünschte Syntax mit z.B. Breite (700 Pixel) und Höhe (323 Pixel)
[bild|700x323|@=Inner Wheel:Sonorities_Konzertkarte1.png=@]

Derzeit muss ich die Bilder mehrfach hochladen und, wenn es nicht passt, noch einmal scalieren und wieder hochladen, es endlich passt.

Das wäre ein "nice to have".

Viele Grüße
Werner
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: maiemi am 05. Januar 2016, 22:49:30
Hallo Werner,
Du könntest Dir bis auf Weiteres behelfen, indem Du ein eigenes Syntaxelement anlegst.
Die HTML Syntax ist, wie  hier  (https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Grafiken) und  hier  (http://www.web-toolbox.net/webtoolbox/tipps/image-groessenangaben.htm) beschrieben.
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Paul am 08. Januar 2016, 12:56:35
Auf jeden Fall scheint mit die Mitgabe von Breite und Höhe eher kontraproduktiv. dann muss ich ja jedes Mal einen Rechner bemühen, um die Proportionen zu erhalten und Verzerrungen zu Vermeiden.
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Werner am 08. Januar 2016, 15:34:23
Du hasr Recht, Paul, wenn Du beide Werte nimmst.

Ich meinte, dass beide Maximalwerte sind.

Also:

Viele Grüße
Werner
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: maiemi am 09. Januar 2016, 13:21:30
Es reicht, wenn nur ein Wert (der, welcher Dir "wichtiger" ist) mitgegeben wird. Ausserdem müssen das nicht absolute Angaben (Pixel, Zentimeter) sein, sondern es kann auch Prozent angegeben werden.
Natürlich gehört ein wenig "Gehirnschmalz" in die Gestaltung des Templates / Layouts der Website, damit eventuelle Größenänderungen die Website noch gut aussehen lassen. Stichwort "Floating Layout". Das ganze mit CSS realisiert und man ist auf der sicheren Seite.....
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: supercat am 20. Januar 2016, 10:35:42
Ich will mal kurz den Einwurf von "maiemi" aufgreifen. Das Layout einer Seite soll diese strukturieren. Darum verstehe ich nicht, weshalb ein bunter Reigen verschiedener Bildergrößen die Optik übersichtlicher machen soll? Das widerspricht eigentlich allen Layout-Regeln. Wenn es denn aber unbedingt sein muss, würde ich auch entsprechende Syntax-Elemente anlegen. Und da reicht es in der Tat, lediglich den wichtigen Wert mitzugeben - sollen die Bilder immer gleich breit oder gleich hoch sein?

Aber selbst wenn jemand ein Plugin für variable Bildergrößen entwickeln würde, ist es doch etwas fummelig, oder? Jedes Mal muss nachgeschaut werden, wie die Maße des Bildes sind und dann müssen diese Maße im Editor eingetragen werden. Da lauert der Fehlerteufel an jeder Ecke - falsche Zahl gemerkt, Zahlendreher...

Einfacher ist wohl, sich ein paar benutzerdefinierte Syntaxelemente anzulegen. ein Beispiel:
bild01 = <div id="bild01"><img src="{VALUE}"></div>
Hier wird ein normales Bild genommen und auf die entsprechende Größe skaliert. Die ist in der "style.css" hinterlegt:
        #bild01 {
                 max-width:30%;
         float:right;
         border:0px solid;
                 color:#000000;
         margin-top:5px;
         margin-left:5px;
                 }

Bei der Verwendung eines reponsivem Designs bitte Prozentangaben nehmen ("em" wäre auch noch in Ordnung). Nur bei festem Layout Pixel-Angaben nehmen. Auf diese Weise musst Du Dir um die Größe des Bildes keinen Kopf machen. Es wird auf die benötigte bzw. gewollte Größe skaliert. Man kann sich ja einen Sack voll Größen anlegen - mit verschiedenen max-width und max-height und float usw.

Achtung: Bei reponsivem Layout verkleinert sich das Bild natürlich, wenn der Browser verkleinert wird - PC zu Mobiltelefon.
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Thorstn am 20. Januar 2016, 13:47:33
Ich habe mir für ein ähnliches Anliegen (geht sowohl um Bilder als auch um Textabschnitte) ein benutzerdefiniertes Syntaxelement erstellt, welches die Größe des Objektes in der Breite kontrolliert.

Eigene Syntax:
maxwidth = <div style="max-width:{DESCRIPTION};display:inline-block;overflow:hidden;">{VALUE}</div>

Je nach Layout-Einstellungen kann eine zusätzliche Außenabstand-Angabe (z.B. "margin:10px;" ) nötig sein, weil die Bilder sonst neben- oder untereinander "kleben".

In der Inhaltsseite mit einem Bild:
[maxwidth=350px|[bild|@=Kategorie:mein-bild-001.jpg=@]]

Hier kann man statt der Pixel-Angabe auch eine Prozent-Angabe nehmen.

Gruß,
Thorsten

Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: supercat am 20. Januar 2016, 17:12:12
Das gefällt mir, weil es sehr flexibel ist  Aber wie gesagt: An ein durchdachtes Layout sollte man sich schon halten, sonst kann eine Seite schnell zum bunten Sammelsurium werden  ;)
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: wasp am 20. Januar 2016, 22:19:01
Hallo!

Erzeuge doch einfach z.B. eine Kategorie "MODULE" mit unsichtbaren Fragmenten und include diese dann.

Eigene Syntaxelemente : (EIGENE) SYNTAXELEMENTE mit HTML, CMS-SYNTAX, PLUGINAUFRUFEN und EIGENEN SYNTAXELEMENTEN funktionieren! (VERSCHACHTELT ...)  :P

danke @ stefanbe  :mrgreen:  / 2.0 / ab ca. rev ?? (am besten aktuelle Version)


Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Thorstn am 22. Januar 2016, 00:10:34
Zitat von: wasp am 20. Januar 2016, 22:19:01
Erzeuge doch einfach z.B. eine Kategorie "MODULE" mit unsichtbaren Fragmenten und include diese dann.

Das heißt was genau?

Du schreibst manchmal sehr rätselhaft  ;)

Gruß,
Thorsten
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: wasp am 22. Januar 2016, 08:45:57
Hallo thorstn,

Recht hast Du - Passiert mir wenn ich zuviel Information in zu wenig Worte packen will.

Bezugnehmend auf das von supercat beschriebene "bunte Sammelsurium" wollte ich mit dem
Hinweis auf versteckte (Unter-)Module zum includen in die jeweiligen Inhaltsseiten einen
Tipp zum "aufgeräumteren" Bearbeiten geben -

In dem Zusammenhang ist dann auch insbesondere die Erstellung (etwas komplexerer)
eigener Syntaxelemente mit den zahlreichen neuen Möglichkeiten für mich obligatorisch
geworden, um effizienter zu arbeiten (so wie Du es ja bereits auch tust).

Wobei ich jetzt bei erneutem lesen feststelle, das es sich hier wohl um die Optik / das
Erscheinungsbild der Seite dreht - Mein Beitrag also min. halbwegs ins offtopic läuft ...

Ich lasse ihn als Anregung zunächst dennoch stehen.

Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: glory am 22. Januar 2016, 23:35:12
Hallo Thorstn,
ich habe deine Syntax mal ausprobiert. Mit Text klappt es super, aber beim Bild nicht. Das Bild wird nicht f
ormatiert und es wird nur abgeschnitten in der Breite, die angegeben ist.

Viele Grüße!
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Thorstn am 24. Januar 2016, 20:48:39
Hallo Glory,

hast Du einen Link zum "angucken"?

Es kommt wohl auch darauf an, welche "normalen" Bild-Einstellungen Du in der style.css hast. Wahrscheinlich hast Du für die Bildgrößen-Angabe kein "max-width" sondern "width" oder gar keine Größen-Vorgabe.

Gruß,
Thorsten
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: glory am 27. Januar 2016, 02:11:03
Hallo Thorstn,
hier ist der Link zu meiner Übrungsseite: http://kirsche-html.bplaced.net/Testbereich/Syntaxelemente2.html?draft=true (http://kirsche-html.bplaced.net/Testbereich/Syntaxelemente2.html?draft=true)

In der style.css war erst keine Größenangabe und nun habe ich es so geändert:
/* [bild|...] */
img {border : none;
     max-width: 550px;}

und auf der Inhaltsseite steht es so:
[maxwidth=200px|[bild|@=Welpen:a2_1wo3.jpg=@]]

Trotzdem ist das Bild abgeschnitten.

Viele Grüße!
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: Thorstn am 27. Januar 2016, 13:17:16
Hallo Glory,

es ist etwas schwierig für mich, "meine" Syntax auf alle vorhandenen Layouts anzupassen bzw. es immer gegenzutesten  ;)

Aber probiere es mal damit:

Statt der Angabe
/* [bild|...] */
img {border : none;
     max-width: 550px;}


deklarierst Du 100% für die max-width Angabe
/* [bild|...] */
img {border : none;
     max-width: 100%;}


Gruß,
Thorsten
Titel: Re: Erweiterung des Syntaxelementes "Bild"
Beitrag von: glory am 27. Januar 2016, 15:43:48
Wunderbar!!!! Nun klappt es prima!!!
Ich kann mir vorstellen, dass es schwierig ist, du kennst deine Templates und weißt, wie du sie aufgebaut hast. Aber andere Templates unterscheiden sich doch etwas und wurden dann auch oft noch verändert.
Ich danke dir, dass du mir totzdem helfen konntest.

Viele Grüße!