Möglicherweise ist der Ordner in der Dateiverwaltung nicht auf Öffentlich gestellt. Du kannst das prüfen, indem du den entsprechenden Ordner bearbeitest. Das Häkchen bei Öffentlich muss gesetzt sein, ansonsten wird das Bild nicht im Frontend angezeigt.
Dazu muss im Theme jQuery und das jQuery-Template j_colorbox geladen werden. Das Layout kann im Backend unter Themes und über das drittletzte Icon Seitenlayouts des Theme ID 1 bearbeiten bearbeitet werden.
Bei animierten GIFs darf bei den Bildeinstellungen keine Bildgröße gesetzt werden, ansonsten bleibt die Animation nicht erhalten.
Füge dazu im Artikel Intro einfach ein Bildelement nach der Teaser Box ein. In diesem Fall wird das Bild unterhalb des Textes dargestellt.
Um das Bild oberhalb des Textes darzustellen, platziere das Bildelement vor der Teaser Box.
Damit das Bild links neben dem Text steht, füge in den Einstellungen des übergeordneten Artikels (Werkzeug-Icon) unter
Experten-Einstellungen die Klasse left-image
hinzu.
Damit das Bild rechts neben dem Text steht, füge in den Einstellungen des übergeordneten Artikels (Werkzeug-Icon) unter
Experten-Einstellungen die Klasse right-image
hinzu.
Damit das Bild unterhalb dem Text steht und das Bild etwas überlappt, füge in den Einstellungen des übergeordneten
Artikels (Werkzeug-Icon) unter Experten-Einstellungen die Klasse image-overflow
hinzu.
Füge dazu folgendes CSS in die custom.scss ein und lade die Seite anschließend mit Strg + F5 neu.
.intro .ce_ct_teaserBox .image>div {
filter: none;
}
Wenn neuere Browser versuchen ein WEBP-Bild zu laden und es nicht unterstützt wird, kann es zu einer Fehlermeldung kommen.
Die Fehlermeldung kann dann in etwa so aussehen:
request.CRITICAL: Uncaught PHP Exception RuntimeException: "Image format "webp" is not supported in Imagine\Imagick\Imagine on this environment. Consider removing this format from contao.image.valid_extensions or switch the contao.image.imagine_service to an implementation that supports it.
#1 Imagine updaten oder vom Hoster machen lassen (neueste Version nutzen)
#2 Alternative Bildbearbeitungsmöglichkeit nutzen
Über die config.yml kannst du einen anderen Bildbearbeitungsservice angeben, anschließend muss der Cache geleert werden. Oftmals hilft dieser Punkt bereits. Wenn WEBP unterstützt wird, solltest du es bei den Bildgrößen auch auswählen können.
contao:
image:
imagine_service: 'contao.image.imagine.gd'
oder
contao:
image:
imagine_service: 'contao.image.imagine.gmagick'
#3 Entfernen von WEBP aus den erlaubten Dateiendungen
Füge folgendes in der config.yml hinzu und leere anschließend den Cache neu.
contao:
image:
valid_extensions:
- jpg
- jpeg
- gif
- png
- tif
- tiff
- bmp
- svg
- svgz
#4 Anpassung der .htaccess
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
Normalerweise bekommen Besucher, die die Webseite bereits besucht haben, eine „gecachte“ Datei ausgeliefert. Möchte man das verhindern kann man dies über eine Anpassung im fe_page-Template erreichen.
Passe dazu folgendes Template an: fe_page_convert.html5.
Damit die CSS-Datei nicht gecached wird, kann man z. B. einen Timestamp an den Dateinamen anhängen. Füge dazu bei der
Zeile echo $combiner->getCombinedFile(); ?>">
vor den Anführungszeichen folgendes ein:
?date=<?= time() ?>
So sollte es aussehen:
<link rel="stylesheet" type="text/css" media="all" href="<?php
// add stylesheets
$combiner = new Combiner();
$combiner->add($file->path);
echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">