Bild als background-image einsetzen

[Tim]

Hallo,
vorab. Wir lesen das Forum. Nicht unbedingt morgens um 5, aber um 8. Es ist nicht nötig uns Hinweise zu Forums-Posts via Ticketsystem zu schicken. Hier liegt kein technisches Problem. Wir helfen gern bei Verständnisfragen und Individualisierungen / eigenen Templates. Dies geschieht aber einer zeitlichen Reihenfolge.

Was hier immer noch falsch ist, ist die Ausgabe innerhalb einer foreach Schleife. (Das customelements_default Tempalte wäre vielleicht leichter hier für das Verständnis.)
Das Bild wird dadurch natürlich x-mal der Gruppen ausgebegen, ohne Zähler! -> Hinweise vorab bitte lesen und Nutzung der Variablen.

Ich empfehle einen richtigen php debugger einzusetzen (selbst firephp oder chromephp reichen), damit man einmal sieht was alles im Template bereitgestellt wird.

Es wäre ratsam das gesamte Template einmal für sich zu reduzieren. Auch sehe ich nicht, dass die Hinweise vorab genutzt werden.

Mehr muss das gesamte Template nicht ausgeben, um einmal die Fragestellung für sich zu klären. Wie das Template schlussendlich umgebaut wird, geschieht obenauf.

// pfad zum bild, hauptgruppe
<div style="background-url(<?php echo $this->field('bild_person#0')->generate(); ?>)"></div>

// pfad zum bild. 1. duplikat
<div style="background-url(<?php echo $this->field('bild_person#1')->generate(); ?>)"></div>

// pfad zum bild. 2. duplikat
<div style="background-url(<?php echo $this->field('bild_person#2')->generate(); ?>)"></div>

Auch dieser Weg ist für ein Bildfeld absolut legitim (der eigene Post).
http://forum.premium-contao-themes.c...=3815#post3815

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

<?php if(!$this->empty): ?>
<div class="content">

<?php
// feld name ausgeben
echo $this->field('name')->html(); ?>)">
?>

<?php
// komplettes Bild, berücksichtigt Attribut-Template
echo $this->field('bild_person')->html(); ?>)">
​?>

<!-- Backround Image des 1. Duplikates des Hauptbilds -->
<div style="background-url(<?php echo $this->field('bild_person#1')->generate(); ?>)"></div>

</div>
<?php else: ?>
<p class="info empty"><?php echo $this->empty; ?></p>
<?php endif;?>
</div>

[weboptimal]

Da in meinem Antwortmail des Supports gestanden hat, dass der Fall abgeschlossen ist und ich ihn mittels Antwort wieder öffnen kann, habe ich dies getan. Um welche Uhrzeit ich arbeite ist dabei sekundär... obwohl wie heisst es so schön: Der frühe Vogel fängt den Wurm. Das ist ja auch das Schöne am Mail, man kann es zu jeder Uhrzeit schreiben und stört dabei niemanden

Falls jemand ebenfalls ein Background Bild einbinden möchte:

Man muss das Template tatsächlich neu schreiben, man kann nicht lediglich einen Code des Bildes abändern (was ich eigentlich gedacht/gehofft habe). Ich habe nun alle Felder selber eingefügt (mit der Einschränkung, dass man zu einem späteren Zeitpunkt nicht einfach ein neues Feld bei *Meine Inhaltselemente* erstellen kann, ohne dieses dann noch zusätzlich manuell im Template zu erfassen).

Ich habe nun ebenfalls manuell die klassen group,group_0 und group_1 vergeben, einfachhalber habe ich auch die Aliase als Klassen übernommen (wie es auch beim Original-Template der Fall ist).

Mittels jQuery habe ich dann noch den Div mit dem Background-image an meine Darstellung angepasst (Responsive in Prozent).

Hier noch mein Code für das Template:

<?php
/**
 * Custom element grouped template example file
 */
?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

<?php if(!$this->empty): ?>
<div class="content">
    <div class="group group_0">
        <?php $arrHeadline = deserialize($this->field('name')->value()); ?>
        <h1 class="name"><?php echo $arrHeadline['value']; ?></h1>
        <div class="stellenbeschreibung"><?php echo $this->field('stellenbeschreibung')->value(); ?></div>
        <div>
            <p class="text_beschreibung"><?php echo $this->field('text_beschreibung_absatz_1')->value(); ?></p>
            <p class="text_beschreibung"><?php echo $this->field('text_beschreibung_absatz_2')->value(); ?></p>
        </div>
    </div>
    
    <div class="group group_1">
    <div class="bild_background" style="background: url(<?php echo \FilesModel::findByPk($this->field('bild_person')->value())->path; ?>) no-repeat"></div>
    </div>

</div>
<?php else: ?>
<p class="info empty"><?php echo $this->empty; ?></p>
<?php endif;?>
</div>

So funktioniert es bei mir fehlerfrei.
Falls in meinem Code trotzdem noch Fehler vorhanden sind, man möge mir verzeihen und mich darauf hinweisen. Danke

[Tim]

Kann ich alles löschen, ausser meine erste Antwort?

http://forum.premium-contao-themes.c...=4175#post4175

Man muss das Template tatsächlich neu schreiben, man kann nicht lediglich einen Code des Bildes abändern

"der Code es Bildes"

Ich glaube damit ist das jeweilige Attribute-Template gemeint, was die Ausgabe steuert. Klar geht das. Hier bereits beantwortet:
http://forum.premium-contao-themes.c...=4201#post4201

[weboptimal]

Ja, Du kannst gerne alles löschen.
Liebe Grüsse
Eva

[Tim]

Kleiner Hinweis zum responsive. Mach das lieber mit CSS. Das spart JS an dieser Stelle.

Allgemein

img {max-width:100%; width:100%; height:auto;}

[weboptimal]

Danke für Deinen Hinweis.
Da ich kein img mehr habe, sondern nur einen leeren Div mit einem Background-Image, muss ich es leider mit jQuery lösen. Der Div muss sich in meinem Layout an einen anderen Div in Höhe und Breite anpassen. Auch dieser hat keine festen Grössenangaben. Mit {max-width:100%; width:100%; height:auto;} bleibt der Div auf 0. Als nojs-Fallback habe ich im CSS eine fixe Grösse zugewiesen, damit das Background-Bild im Div dann nicht ganz verschwindet.

[weboptimal]

Du hast mich noch auf eine Idee gebracht... ich könnte das Bild zusätzlich im Div erzeugen, dann mittels CSS opacity:0 setzen. Dann sollte man (hoffe ich) das Background-Image sehen und trotzdem habe ich einen Platzhalter...... das wäre natürlich auch eine gute Alternative. Wenn ich zwischendurch etwas Zeit finde, werde ich es auf jeden Fall ausprobieren.

[Tim]

Klar, hast natürlich recht. Ist kein <img> mehr.
Schau dir mal background-size: contain bzw. cover an Damit geht auch sehr viel seitens CSS.