Bild im Template mit eigenem CSS-Klassennamen einbinden

Hallo,

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

Code:

---

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

HTML-Code:

---

<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 :D

Vielen Dank eure Hilfe!

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

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

PHP-Code:

---

<?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)

Super, danke, hat funktioniert :D

Hier das Resultat:

Code:

---

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

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

D.h. um ein:

Code:

---

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

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

PHP-Code:

---

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

---

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

Code:

---

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

---

Ausgebessert :)

Vielen Dank Spooky!
Funktioniert super :D

Jetzt ist doch noch ein Problem aufgetaucht:
Wenn ich den Debug-Modus aktiviere (APP_ENV=dev), dann spuckt mir Contao folgenden Fehler aus:
Anhang 25240

... kann ich das irgendwie umgehen?

PHP-Code:

---

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

---