Verwendung: Feature Box: image zu background-image machen

juergen's Avatar

juergen

22 Dec, 2021 02:27 PM

Produkt: Custom Elements Contao

In der Feature Box gibt es die Möglichkeit, ein Bild darzustellen - eine Hälfte Bild, eine Hälfte Text.
Ich würde dieses Bild gerne als background-image platzieren, damit es besser über CSS manipuliert werden kann.
Wie muss der Template-Code angepasst werden:

<?php if ($image = $this->getImageObject($this->image, $this->size)): ?>
    <div class="feature-box-image" >
        <?php $this->insert('picture_default', $image->picture) ?>
    </div>
<?php endif ?>
  1. Support Staff 1 Posted by RockSolid Theme... on 23 Dec, 2021 10:36 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Mit folgendem Template-Code lässt sich ein Hintergrundbild umsetzen.

    <?php if ($image = $this->getImageObject($this->image, $this->size)): ?>
        <div class="feature-box-image" style="background-image: url('<?= $image->src ?>');">
        </div>
    <?php endif ?>
    

    Beachten Sie dabei bitte, dass das .feature-box-image-Element eine Höhe via CSS gesetzt bekommen muss damit das Bild sichtbar wird.

  2. 2 Posted by Jens on 27 Jan, 2025 02:38 PM

    Jens's Avatar

    Hallo, das Thema interessiert mich für Contao 5.3. Leider kann ich den oben genannten Code im Template rsce_tao_feature_box.html5 nicht finden. Wo bzw. wie muss ich das ändern?

  3. Support Staff 3 Posted by RockSolid Theme... on 28 Jan, 2025 09:09 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Im Template rsce_tao_feature_box.html5 finden Sie vier mal die Code-Zeile:

    <?php $this->insert('picture_default', $image->picture) ?>
    

    Diese können Sie z. B. mit folgender Zeile ersetzen:

    <div style="background-image: url('<?= $image->src ?>');"></div>
    

    Bitte beachten Sie jedoch, dass auch Anpassungen am CSS-Code nötig sind um das <div>-Element wie gewünscht zu platzieren.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac