Bildunterschrift anzeigen

Hallo,

ich habe seit der Migration von J3 auf J4 einige kleine Styling-Probleme.

So wird mir unter den Bilder nicht mehr die Bildunterschrift angezeigt.

Bei J3 war es so, dass der img-title immer direkt unter dem Bild angezeigt wurde. Der Code war und ist noch immer in der template.css mit .img_caption angelegt.

Nun wird mir beim Einleitungsbild bzw. beim Kompletten Beitragsbild und bei den Bildern innerhalb des Artikels keine Bildunterschrift angezeigt.

Beispiel: Live-Link https://www.hdsports.at/laufkalender-international

Gibts es evtl. ein Tutorial, wie man Bildunterschriften in Joomla 4 einblenden kann oder hat hier jemand einen Lösungsweg?

Danke und Liebe Grüße

Das hilft leider nicht weiter. Ich habe ein paar tausend Artikel, wo bereits bei den Bildern eine Bildunterschrift bzw. eine caption angegeben ist. Diese wurde in J3 immer unter dem Bild angezeigt, bei J4 nicht. Ist leider auch rechtlich gesehen, problematisch, da dort oft Copyright-Angaben gemacht wurden.

Liebe Grüße

Liegt es auch. Bei mir haben alle Bilder die Klasse "caption"

Also z.B. <img class="caption" title="123" src="bild.jpg">.

Damit sollte es doch problemlos möglich sein, dass ich den Titel (also 123) unter dem Bild anzeigen lasse.

Ich habe es nun mittels Javascript gelöst:

<script type="text/javascript" async="async">
  // get all images that have caption class
  const images = document.getElementsByClassName('caption')
  Object.keys(images).forEach((key) => { 
    // create paragraph HTML tag. it might be span, div, lists and etc. 
    let caption = document.createElement('p');
    // here, we put the title attribute content into a new element we just created
    caption.textContent = images[key]['title'];
    // append class to caption
    caption.classList.add("caption_style");
    // and finally, we add the caption after each image  
    images[key].after(caption);
  })
</script>

Und im CSS

.caption_style {
  background: #070335;
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin: 0;
  padding: 5px;
  border-radius: 8px;
}