Bild als background-image einsetzen

[weboptimal]

Hallo

Ich möchte/muss in einem customelement_grouped die vorhandenen Bilder als background-image einsetzen. Leider habe ich keine Ahnung, wie ich das bewerkstelligen soll. Wo muss ich was abändern, damit dies möglich ist? Muss ich da das Ganze selber schreiben oder kann ich da lediglich eine Zeile für das Einsetzen des Bildes abändern?

Lieben Dank für die Hilfe!
Eva

Was ich gesehen habe, für das Bild wird das custom_attr_default genommen:

<?php
/**
 * Custom elements default attribute template
 */
?>

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

Da kann ich bestimmt etwas so verändern, damit mir das Bild als background-image ausgegeben wird.......

[Tim]

Die generate() Methode hilft hier gut und es muss bzw. sollten inline-styles werden.

<div style="background-url(<?php echo $this->field('meinBild')->generate(); ?>)"></div>

[weboptimal]

Vielen Dank! Ich habe es ausprobiert und leider wird in der url kein Wert übergeben:



ich habe den Teil
field('meinBild') in field('bild_person') abgeändert.



Irgendetwas mache ich falsch. Habe ich den Code falsch eingesetzt?

<?php
/**
 * Custom elements default attribute template
 */
?>

<?php if($this->value): ?>
<div <?php echo $this->cssID; ?> <?php if($this->class): ?>class="<?php echo $this->class; ?>"<?php endif; ?>><div style="background-url(<?php echo $this->field('bild_person')->generate(); ?>)"></div></div>
<?php endif; ?>

Liebe Grüsse
Eva

[Tim]

Ist auch ein Bild ausgewählt?
Beim Pfad auf Sonderzeichen und Leerzeichen achten.
Gut wäre auch eine Größenauswahl in den Bild-Attribut-Einstellungen. Einfach mal was einsetzen.

Sowas wäre die Alternative (ohne Cache):

<?php echo \FilesModel::findByPk($this->field('image')->value())->path; ?>

[weboptimal]

Bild ist ausgewählt. Neu auch mit Grössenangabe:


Auch mit px ausprobiert:



Das Template ist angewählt, hier der neue Code:

<?php
/**
 * Custom elements default attribute template
 */
?>

<?php if($this->value): ?>
<div <?php echo $this->cssID; ?> <?php if($this->class): ?>class="<?php echo $this->class; ?>"<?php endif; ?>><div style="background-url(<?php echo \FilesModel::findByPk($this->field('bild_person')->value())->path; ?>)"></div></div>
<?php endif; ?>

Leider immer noch ohne url....



Liebe Grüsse
Eva

[Tim]

Ah jetzt machts klick. Wir beide sind in unterschiedlichen Templates.

Ich spreche hier von einem customelement_xxx Template. Also das Hauptausgabe-Template des gesamten CEs. Du bist im Template des Bild-Attributes selbst. Hier kommt der Wert direkt rein. Ohne Abfrage des Feldes selbst. Das Template gehört hier direkt dem Feld. Daher hier nur ->value

Im Attribut template:

<div style="background-url(<?php echo \FilesModel::findByPk($this->value)->path; ?>)"></div>

Im CE Template dann das Bild ganz normal über ->html() ausgeben. Das respektiert dein Template.

<?php echo $this->field('bild_person')->html(); ?>

[weboptimal]

Jetzt habe ich komplett den Überblick verloren....

Also.... Ich schreibe ins Attribut-Template:

<?php
/**
 * Custom elements default attribute template
 */
?>

<?php if($this->value): ?>
<div <?php echo $this->cssID; ?> <?php if($this->class): ?>class="<?php echo $this->class; ?>"<?php endif; ?>><div style="background-url(<?php echo \FilesModel::findByPk($this->value)->path; ?>)"></div></div>
<?php endif; ?>

Welches ist das CE Template? Ich benutze für dieses Inhaltselement das customelement_grouped.html5. Muss ich hier diesen Code intergrieren?:

<?php echo $this->field('bild_person')->html(); ?>

Wenn ja, wo?

<?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">
<?php foreach($this->groups() as $group): ?>
<div class="<?php echo $group['class']; ?>">
    <?php foreach($group['fields'] as $field): ?>    
    <div class="<?php echo $field->class; ?>">
        <div class="label"><?php echo $field->label; ?></div>
        <div class="value"><?php echo $field->html(); ?></div>
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->empty; ?></p>
<?php endif;?>
</div>

oder ist es ein anderes Template?

Liebe Grüsse
Eva

[Tim]

Die meisten Leute arbeiten ausschließlich mit dem CE Template (Einstellungen des CEs direkt unter Meine Inhaltselemente). Von diesem Template bin ich ausgegangen.

[weboptimal]

Also von diesem hier:



Wo muss ich dann diesen Code einsetzen?

<?php echo $this->field('bild_person')->html(); ?>

In dieses Template customelement_grouped ? Wenn ja, wo? Und den anderen Code zusätzlich ins Template custom-attr_xxx? Ich habe dies versucht und habe immer noch eine leere url..... also mache ich ja offensichtlich etwas falsch.

[Tim]

Das kannst du überall im Ausgabe-Template einsetzen.
--

Bitte aufmerksam lesen: http://forum.premium-contao-themes.c...=4201#post4201

Wenn du weiterhin dein Attribut-Template nutzt, was weiterhin nicht die url ausgibt, wird ->html() diese auch nicht ausgeben. ->html() durchläuft dieses Template.

Stell das Template in dem Bild-Attribute lieber erstmal wieder auf das default und arbeite ausschließlich im CE Template.

->html() gibt dir erstmal das Bild selbst aus. Damit weisst du, dass alles richtig ist.

->generate() gibt dir dann den Pfad zum Bild.

[weboptimal]

Ich habe jetzt dem Bild wieder das normale default-Tempate zugewiesen. Nun habe ich das customelement_grouped_background erstellt und den Code eingefügt:

<?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">
<?php foreach($this->groups() as $group): ?>
<div class="<?php echo $group['class']; ?>">
    <?php foreach($group['fields'] as $field): ?>    
    <div class="<?php echo $field->class; ?>">
        <div class="label"><?php echo $field->label; ?></div>
        <div class="value"><?php echo $field->html(); ?></div>
        <div style="background-url(<?php echo $this->field('bild_person')->generate(); ?>)"></div>
        
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->empty; ?></p>
<?php endif;?>
</div>

Nun habe ich oben die Bildausgabe, unten das Background-Bild. Zudem habe ich nun überall den Div mit dem Background-image (in jeder group etc) und nicht nur 1 x als Bildersatz......



Könntest Du etwas konkreter werden?

[Tim]

Ja, so ist das schon mal gut.
--

Hier unerwähnt ist, da es erst im Ticket kam: Diese Ausgabe soll NUR für ein Bild in einer duplizierten 2. Gruppe erfolgen.


Das wiederum geht nur im Ausgabe-Template des gesamten CEs, nicht im Attribut-Template. Das Attribut-Template steuert die Ausgabe des Feldes, egal in welcher Gruppe. Es ist die Html-Basis.

3. Punkt
http://forum.premium-contao-themes.c...late-variablen

Daraus ergibt sich:

Pfad zum Bild, inkl Caching.

<?php echo $this->field('bild_person#1')->generate(); ?>

Pfad zum Bild

<?php echo \FilesModel::findByPk($this->field('bild_person#1')->value())->path; ?>

[weboptimal]

Danke! Damit lässt sich arbeiten

[weboptimal]

Nun ist das Bild immer noch in group_0 und group_1 enthalten, und immer noch keine URL



Ich möchte nur das Bild in der group_1 von einem normalen Image in ein Background-image umwandeln. Ich verwende das Template customelements_grouped.
Wo genau muss ich was ändern? Wie genau sollte das Template nachher aussehen?

Mein Inhaltselement sieht so aus:


Code:

<?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">
<?php foreach($this->groups() as $group): ?>
<div class="<?php echo $group['class']; ?>">
    <?php foreach($group['fields'] as $field): ?>    
    <div class="<?php echo $field->class; ?>">
        <div class="label"><?php echo $field->label; ?></div>
        <div class="value"><?php echo $field->html(); ?></div>
        <div style="background-url(<?php echo \FilesModel::findByPk($this->field('bild_person#1')->value())->path; ?>)"></div>
        
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->empty; ?></p>
<?php endif;?>
</div>

Ich habe auch bereits versucht, die group_0 und group_1 manuell hineinzuschreiben und somit 2 Div's zu gestalten, ohne Schleife. Dann habe ich zwar den Div nur in der 2.Gruppe, aber es stimmt auch sonst nichts mehr.

[weboptimal]

Wenn ich diesen Code eingebe (nur person_bild und nicht person_bild#1), habe ich zwar die URL, aber den Div immer noch überall:

<?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">
<?php foreach($this->groups() as $group): ?>
<div class="<?php echo $group['class']; ?>">
    <?php foreach($group['fields'] as $field): ?>    
    <div class="<?php echo $field->class; ?>">
        <div class="label"><?php echo $field->label; ?></div>
        <div class="value"><?php echo $field->html(); ?></div>
        <div style="background-url(<?php echo $this->field('bild_person')->generate(); ?>)"></div>
        
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->empty; ?></p>
<?php endif;?>
</div>

Ich möchte den Div mit dem Backgroundbild nur in group_1, anstelle des Bildes. Im Moment ist ja immer noch das Bild und zusätzlich der Div mit dem Background-image zu sehen.