Bild im Template mit eigenem CSS-Klassennamen einbinden

[thesweetg]

Hallo,

ich verwende die Rocksolid-Custom-Elements-Erweiterung.
So binde ich Bilder im Template ein:

<div class="meine-css-klasse">
    <?php if ($image = $this->getImageObject($this->image, array('','',''))): ?>
           <?php $this->insert("picture_default", $image->picture) ?>
    <?php endif ?>
</div>

... gibt es einen Weg die CSS-Klasse "meine-css-klasse" direkt an das img-Element zu vergeben?
(Damit ich mir den DIV-Wrap sparen kann.)
D.h. der Code soll dann so aussehen:

<img src="meinbild.jpg" class="meine-css-klasse" >

Ich möchte aber nicht zwingend das Template "picture_default" ändern – denn das würde ein weiteres Template bedeuten – was auf Dauer ein wenig unübersichtlich wird

Vielen Dank eure Hilfe!

[Spooky]

Willst du die Klasse am <img> selbst, oder bspw. lieber am <figure>, wenn du das image.html5 Template stattdessen verwenden möchtest?

[thesweetg]

Wenn ich keine Bildgröße verwende dann reicht mir das img-Element.

[Spooky]

<?php if ($image = $this->getImageObject($this->image, [])): ?>
  <?php $image->picture['img']['class'] = 'meine-css-klasse'; ?>
  <?php $this->insert("picture_default", $image->picture) ?>
<?php endif ?>

(ungetestet)

[thesweetg]

Super, danke, hat funktioniert

Hier das Resultat:

<picture>
  <source srcset="assets/images/8/placeholder-0a375f67.jpg" media="(max-width: 600px)" width="600" height="400">  
  <img src="assets/images/5/placeholder-0888e079.jpg" width="1000" height="609" alt="" class="meine-css-klasse" itemprop="image">
</picture>

... hab ich das richtig verstanden:
Wenn ich dem picture-Element eine Klasse geben möchte (<picture class="my-class" >), dann muss ich das Template heranziehen, oder?

[Spooky]

Ja. Aber warum würdest du das brauchen? Nimm doch einfach das image Template stattdessen.

[thesweetg]

D.h. um ein:

<picture class="my-class" >

... zu erreichen, muss ich ein eigenes Template (zb. "picture_my-class.html5") anlegen, oder?

Ich möchte die Anzahl der Templates nicht unnötig erhöhen, da das ein wenig unübersichtlich wird.
Zumal die Template-Dateien ja auch nicht in Ordner gepackt werden können.
Daher wärs mir lieber wenn man direkt im RSCE-Template machen könnte.

[Spooky]

Ja eben, wie gesagt, nimm nicht picture_default, sondern image:

<?php if ($image = $this->getImageObject($this->image, [])): ?>
  <?php $image->floatClass .= ' meine-css-klasse'; ?>
  <?php $this->insert('image', (array) $image) ?>
<?php endif ?>

[thesweetg]

Der Code führt bei mir leider dazu dass Contao die src nicht mehr findet (d.h. das Attribut bleibt leer):

<!-- TEMPLATE START: vendor/contao/core-bundle/src/Resources/contao/templates/image/image.html5 -->
<figure class="image_container">
<!-- TEMPLATE START: templates/picture_default.html5 -->
<img src="" alt="" itemprop="image">
<!-- TEMPLATE END: templates/picture_default.html5 -->
</figure>
<!-- TEMPLATE END: vendor/contao/core-bundle/src/Resources/contao/templates/image/image.html5 -->

[Spooky]

Ausgebessert

[thesweetg]

Vielen Dank Spooky!
Funktioniert super

[thesweetg]

Jetzt ist doch noch ein Problem aufgetaucht:
Wenn ich den Debug-Modus aktiviere (APP_ENV=dev), dann spuckt mir Contao folgenden Fehler aus:
Bildschirmfoto 2022-02-14 um 16.07.56.png

... kann ich das irgendwie umgehen?

[Spooky]

<?php if ($image = $this->getImageObject($this->image, [])): ?>
  <?php $image = (array) $image; $image['floatClass'] .= ' meine-css-klasse'; ?>
  <?php $this->insert('image', $image) ?>
<?php endif ?>