CSS Klassen Artikelbild summary

[Jensensen]

Bei früheren Versionen, bspw. --> around version 1.3 <-- , ergab die Ausgabe im HTML-Code der --> article summary für das --> Artikelbild

Code: Select all

<img src="..." alt="..." class="image_td" />

Diese CSS Klasse "image_td" wird beispielsweise definiert in
/include/config/conf.template_default.inc.php
/template/inc_settings/template_default/meine_eigenen_settings_01.php

Code: Select all

$template_default['article']['image_class']				= "image_td";

In aktuellen Versionen --> around version 1.7 <-- werden die settings aber offenbar ignoriert und es wird automatisch NUR die Klasse

Code: Select all

'image-thumb'					=> 'img-thumb',

eingebaut.

Das schaut dann so aus:

Code: Select all

<img src="..." alt="..." class="image-thumb" />

Das liegt vermutlich an der /include/inc_front/content.article.inc.php
Zeile 240:

Code: Select all

$thumb_img .= ' class="'.$template_default['classes']['image-thumb'].'" />';

image-thumb wird AUCH in den --> NEUEN settings definiert:

Code: Select all

// some more default classes
$template_default['classes'] = array(
	....
	'jump-anchor'					=> 'anchor-article',
	'image-thumb'					=> 'img-thumb img-fullwidth hidden-xs',
	'image-wrapper'					=> 'image-wrapper',
	...
);

Will ich aber in der der --> article summary für das --> Artikelbild NICHT haben.

Dort brauche ich meine eigenen:
/template/inc_settings/template_default/meine_eigenen_settings_01.php

Code: Select all

$template_default['article']['image_class']				= "image_td MEINS DAS";

Wie bekomme ich denn nun in der --> article summary für das --> Artikelbild wieder eine individuelle, eigene CSS-Klasse in der Form
<img src="..." class="image_td MEINS DAS" />
???

[juergen]

Im Sub Template ?! *dummguck*

[Oliver Georgi]

Code: Select all

[IMAGE]<figure class="my-outer-whatever-article-summary-classname hidden-xs">
    {IMAGE}
</figure>[/IMAGE]

.my-outer-whatever-article-summary-classname > .img-thumb {
    // oha, so simple and logical, right
}

Es geht mir darum, im Sinne von Mobile first und verallgemeinert zu denken. Also z.B. grundsätzlich alle Bilder responsive zu machen (Klasse). Wie sich das im Kontext verhält, bestimmt dann die Elternstruktur. Lässt sich doch viel leichter steuern, dafür sind dann Templates da. Das Bild wird in Deinem Beispiel mit hidden-xs nicht alleine im Inhalt herumfliegen, dazumal Du es als vermutlich responsive definiert hast.

Alternativ kannst Du den <img> Tag auch Custom bauen:

Code: Select all

<img src="img/cmsimage.php/100x100x1/{IMAGE_HASH}.{IMAGE_EXT}" class="img-thumb img-fullwidth hidden-xs" alt="">

[kukki]

@Jensensen: Deinen Ärger kann ich gut verstehen Bei mehreren Website-Updates auf die neuste Version bin auch ich darüber gestolpert und es hat mich anfangs sehr geärgert, dass einige CSS-Classen einfach ignoriert werden. Da hilft nur, Deine XX.frontend.css umzustellen/ anzupassen, das war dann das kleinere Übel. Diese als Prototyp erstellt erspart Dir den künftigen Andrinalin-Schub

[Oliver Georgi]

eigentlich sollte nichts ignoriert werden. Man muss beim Update auch die erforderlichen Konfigurationen prüfen. Und falls doch was fehlt, Issue öffnen. Das Forum ist selten der passende Ort.

[Jensensen]

Vielen Dank für Eure Antworten!
Zu den wirklich hilfreichen will ich an dieser Stelle noch einmal wie folgt ergänzen und verdeutlichen.

Lieber Oliver,
es gibt ja nur ein einziges Artikelbild und nur ein einziges Bild für das Artikellisting. An dieser Stelle würde ich dann schon gerne eine eindeutige CSS-Klasse anwenden können. Aber ausgerechnet in dieser --> eindeutigen Situation, steht uns nun offbar nur noch eine --> redundante CSS-Klasse zur Verfügung.

Früher gab es ja genau für das Artikelbild eine eindeutige CSS-Klasse. Diese kann bzw. sollte eigentlich definiert werden können in beispielsweise
DAS SIND DIE VORLAGEN:
/include/config/conf.template_default.inc.php
/template/inc_settings/template_default/meine_eigenen_settings_01.php

Code: Select all

$template_default['article']['image_class']				= "image_td";
$template_default['article']['image_imgclass']			= "image_img";
$template_default['article']['image_caption_class']		= "image_caption";

Was nutzen uns Templates, wenn darin definierte Variablen nicht funktionieren, nicht erkannt werden?

Alternativ kannst Du den <img> Tag auch Custom bauen:

Code: Select all

<img src="img/cmsimage.php/100x100x1/{IMAGE_HASH}.{IMAGE_EXT}" class="img-thumb img-fullwidth hidden-xs" alt="">

Das hat mir geholfen - aber auf Dauer unterschlägt diese Variante wichtige Eingaben aus dem Backend wie beispielsweise ALT, CAPTION, COPYRIGHT.

Das Template soll ja für mehrere Artikel verwendbar sein. Mit dieser Formel jedoch benötige ich für jeden Artikel ein separates Template. Das geht, aber macht nicht viel Spaß.

Code: Select all

[IMAGE]<figure class="my-outer-whatever-article-summary-classname hidden-xs">
    {IMAGE}
</figure>[/IMAGE]

.my-outer-whatever-article-summary-classname > .img-thumb {
    // oha, so simple and logical, right
}

Natürlich kann ich etwas darum wrappen. Will ich nicht! Braucht's nicht! Es wäre auch eigentlich nicht nötig, wenn DIE VORLAGEN noch funktionierten.

Aber bevor Du denkst, ich sei ein fauler Sack, will ich auch das erläutern:

...
Es geht mir darum, im Sinne von Mobile first und verallgemeinert zu denken. Also z.B. grundsätzlich alle Bilder responsive zu machen (Klasse)...

Genau. Damit wären wir wieder bei --> bootstrap. Der Weg dorthin wird hier im Forum ja seit langem besprochen.

Und bootstrap verlangt eben gerne mal --> eine besondere CSS-Klasse --> // INNERHALB // --> beispielsweise --> INNERHALB vom img-Tag: http://getbootstrap.com/css/#images

Code: Select all

<img src="..." alt="..." class="DINGSBUMS img-circle img-rounded USW.">

Auch in den vielen anderen Anwendungsfällen verlangt bootstrap eben gerne --> INNERHALB --> eine besondere CSS-Klasse.
Aber eben drin und dran / dran am Objekt --> und nicht extra lästig-aufwändig-doppelt-dran-gemoppelt-drumherum-gewrappt. NEEEEIIIN! Nicht nochmal css umschreiben! Will ich nicht! Braucht's nicht! Es ist doch alles da --> bootstrap!

Da steht nämlich zu lesen:

Code: Select all

<img src="..." alt="..." class="img-rounded">

Da steht aber nicht:

Code: Select all

<div class="WRAP_BUHH_LÄSTIG__DINGSBUMS">
   <img src="..." alt="..." class="SO-WHAT I_DONT_KNOW NICH_DA KANNST_NICH po-mexi">
</div>

Das wäre auch eigentlich ganz einfach, wenn DIE VORLAGEN noch funktionierten.

[Oliver Georgi]

Sorry, dass Du Dich jetzt da so reinwühlen musstest, um zu versuchen mir das Problem näher zu bringen. Und ich warne — es kann sein, dass ich mit diesem Post ignorant klinge, ich will es aber verstehen und schauen, ob ich einen Denkfehler habe. Kann das eigentliche Problem noch immer nicht zu 100% nachvollziehen.

Zum einen zum Selbstbau: Du hast die Möglichkeit, für das custom <img> Tag ALT/CAPTION/IMAGE_TITLE etc. zu benutzen. Das sollte eigentlich analog der Bilder <div>/spezial sein.

Übers Suchen nach der Ursache habe ich glaube ich verstanden, was Du mokierst. Es fehlt Dir eine separate, globale Klasse für das zentrale Artikel-/Artikellisting-Bild. OK, baue ich rein — IMAGE_TITLE auch noch. Ich wollte hier eigentlich vereinheitlichen. Es löst das Problem nur im Ansatz. An den Vorlagen führt eigentlich kein Weg vorbei. Sicher, sinnvoller wäre eine einheitliche Bildkomponente, die dann eigene Vorlagen zur Wahl stellen würde — das ist aber im Moment nicht realistisch.

Bootstrap ist nicht perfekt und das Wrappen oft wirklich sinnvoll. Persönlich nutze ich Bootstrap nur als das, was es eigentlich ist — ein Framework. Am Ende kombiniere ich alles mit CSSO.

[Oliver Georgi]

IMAGE_TITLE Ersetzer war doch bereits vorhanden.

Und ansonsten bitteschön

[Jensensen]

Das ist natürlich großartig! Vielen Dank.
Ich war ja der Auffassung, eine Klasse wäre immer schon vorhanden gewesen (s.o.) und die Möglichkeit, zusätzlich eigene Klassen zuzuweisen, konnte über eigene Templates erfolgen. Diese Lösung entspricht nun vollends und stand schneller zur Verfügung, als antworten konnte.
Sehr erfreulich.

Allerdings befindet sich die Änderung auf github im Branch "dev-1.x".
Default ist der --> origin/master aber auf dem Branch "master". Dieser liegt ein wenig zurück.
Sollen wir nun switchen? Muss ich den dev in den ursprünglichen master rebasen oder einfach nur warten bis der master die jüngsten Aktualisierungen hat?
Dank und Gruß

[Oliver Georgi]

nimm den dev im Moment. Es steht noch ein größeres Update aus, erst dann geht das auf Master.