Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Erweiterung des Syntaxelementes "Bild"

Begonnen von Werner, 05. Januar 2016, 05:37:58

« vorheriges - nächstes »

Werner

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
Werner (Warweg)

maiemi

#1
Hallo Werner,
Du könntest Dir bis auf Weiteres behelfen, indem Du ein eigenes Syntaxelement anlegst.
Die HTML Syntax ist, wie hier und hier beschrieben.

Paul

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.
Website: BPGS.DE

Werner

Du hasr Recht, Paul, wenn Du beide Werte nimmst.

Ich meinte, dass beide Maximalwerte sind.

Also:

  • Bild berechnen
  • prop. Scalieren auf Höhe
  • Bild prüfen, wenn passt, o.k. wenn nicht passt bei beiden max. Werten --> prop. scalieren auf Breite

Viele Grüße
Werner
Werner (Warweg)

maiemi

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

supercat

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.
Frage nicht nach meinem Alter. Ich kann doch nicht alles wissen ;-)

Thorstn

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

www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

supercat

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  ;)
Frage nicht nach meinem Alter. Ich kann doch nicht alles wissen ;-)

wasp

#8
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)



Thorstn

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
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

wasp

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


glory

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!
Wer aufhört zu lernen, hört auf zu leben!

Thorstn

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
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

glory

Hallo Thorstn,
hier ist der Link zu meiner Übrungsseite: 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!
Wer aufhört zu lernen, hört auf zu leben!

Thorstn

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
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum