customelement_image_extended mit Link-Attribut

[mapfei]

Hi!

Ich habe das customelement_image_extended-Template mit einem weiteren Feld link_attribut erweitert, worüber sich die Link-Attribute nofollow, sponsored, ugc auswählen lassen. Wie bekomme ich diesen Wert (falls gesetzt und falls Link vorhanden) nun an das <?php echo $this->field('image')->html(); ?> gestrickt?

Grüße,
mapfei

[Tim]

Du kommst an die Einzelwerte der optionalen Felder mit der ->option() Methode z.B. ->field('myHyperlink')->option('titleText')
https://forum.premium-contao-themes....late-variablen

Damit kannst du quasi den Links nach eigenen Wünschen konstruieren.

Der Schlüssel steht hinter der Auswahl der Optionalen Felder in den Attribut-Einstellungen.

[mapfei]

Hm.

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

erzeugt mir aktuell ja

<figure class="image_container">
  <a href="#">
    <img loading="auto" src="files/logo_dummy.png" width="400" height="200" alt="Dummy-Logo" itemprop="image">
  </a>
</figure>

Mit meinem neuen Feld 'link_attribut' möchte ich den Link mit einem rel="<?php echo $this->field('link_attribut')->value(); ?>" versehen. Wie bekomme ich denn das 'image' zerlegt?

[Tim]

Ah ok. Also link_attribute ist ein eigenes Feld im CE.

Dann musst du im customelement_ Template das Bild bzw. den Link um das Bild händisch aufbauen.

Wie bekomme ich denn das 'image' zerlegt?

->html() durchläuft das Attribute-Template. Du kannst dort auch ein abgespecktes ce_image Template nutzen, was dir keinen Link um das Bild ausgibt, den baust du dann im customelement_ Template um keine image->html() Ausgabe.

[mapfei]

Du kannst dort auch ein abgespecktes ce_image Template nutzen, was dir keinen Link um das Bild ausgibt, den baust du dann im customelement_ Template um keine image->html() Ausgabe.

Klingt gut. Und wie genau nutze ich ein abgespecktes ce_image-Template?

[Tim]

Du legst dir eine Kopie von Contaos ce_image Template an, benennst es um, und nimmst alles raus, was du nicht brauchst und wählst es dann in deinem Bild-Attribute als Template.
(EX hat ein ce_image_raw direkt an Bord)

[mapfei]

D.h. für das Feld link_attribute wähle ich als Template das neue ce_image aus? Und hier rein kommt dann nur

<?php if($this->field('link_attribut')->value()): ?> rel="<?php echo $this->field('link_attribut')->value(); ?>"<?php endif; ?>

? So ganz habe ich es noch nicht verstanden. Und an welcher Stelle baue ich das dann in customelement_image_extended.html5 ein?

[Tim]

Du legst dir eine Kopie von Contaos ce_image Template an, benennst es um, und nimmst alles raus, was du nicht brauchst und wählst es dann in deinem Bild-Attribute als Template.

im customelement_image_extended baust du nun deinen eigenen link um das Bild.

[mapfei]

Supi! Soweit, so gut! Aber was nehme ich denn da raus?

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <?php $this->insert('image', $this->arrData); ?>

<?php $this->endblock(); ?>

Wenn ich <?php $this->insert('image', $this->arrData); ?> übrig lasse, dann wird ja trotzdem das Bild und alles andere drumherum gebaut.

[Tim]

Nimm doch das ce_image_raw aus EX. Darin entfernste nur noch den <a> wrapper. Übrig bleibt:

[COLOR=#333333][SIZE=11px][COLOR=#0045aa]<figure [/COLOR][COLOR=#007ab7]class=[/COLOR][COLOR=#5d8f00]"image_container">[/COLOR]
[COLOR=#878787]?php[/COLOR] [COLOR=#8735A5]$this[/COLOR][COLOR=#000000]->[/COLOR][COLOR=#3F6E7D]insert[/COLOR]([COLOR=#DD2400]'picture_default'[/COLOR], [COLOR=#8735A5]$this[/COLOR][COLOR=#000000]->picture[/COLOR]); [COLOR=#878787]?[/COLOR][COLOR=#878787]>[/COLOR]
[COLOR=#0045aa]</figure>[/COLOR][/SIZE][/COLOR]

[mapfei]

Das Template customelement_image_extended.html5 sieht nun folgendermaßen aus:

<div class="<?php echo $this->class; ?> block <?php echo $this->field('frame')->value(); ?> <?php echo $this->field('style')->value(); ?> <?php echo $this->field('halign')->value(); ?> <?php echo $this->field('mob_align')->value(); ?>" <?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <div class="ce_image_extended_inside" style="<?php if($this->field('margin_right')->value()): ?> margin-right: <?php echo $this->field('margin_right')->value(); ?>%;<?php endif; ?><?php if($this->field('margin_left')->value()): ?> margin-left: <?php echo $this->field('margin_left')->value(); ?>%;<?php endif; ?>">
<?php if($this->field('render_svg')->value()): ?>
<?php echo file_get_contents(TL_ROOT.'/'.$this->field('image')->generate()); ?>
<?php else: ?>
<?php if ($this->href): ?>
<a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if($this->field('link_attribut')->value()): ?> rel="<?php echo $this->field('link_attribut')->value(); ?>"<?php endif; ?><?= $this->attributes ?>>
<?php endif; ?>
<?php echo $this->field('image')->html(); ?>
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
</div>

und das ce_image Template habe ich ebenfalls entsprechend deines Vorschlags aus #10 angepasst und dem Bild im CE zugewiesen.

Das betreffende Bild hat auch einen Bildlink zugewiesen. Dieser wird allerdings nicht ausgegeben:

<div class="ce_image_extended fadeInLeft animate block frame-no style-default align-center " >
  <div class="ce_image_extended_inside" style="">
    <figure class="image_container"><img loading="auto" src="files/logo.png" width="400" height="200" alt="" itemprop="image"></figure>
  </div>
</div>

[mapfei]

So kurz vorm "Ziel" keine Lösung?

[Tim]

Mhh... steht alles bereits im Thread. Der Rest ist zusammen bauen oben sogar mit Bildern.

[mapfei]

Hier nochmal alle betroffenen Schritte und Templates zusammengefasst:

Das Element Bild (im Inhaltselement Bild [Erweitert]) hat ein neu zugewiesenes Template namens ce_image_rel, welches wie folgt aussieht:

<figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
<?php $this->insert('picture_default', $this->picture); ?>
</figure>

Das Template customelement_image_extended.html5 sieht wie folgt aus:

 <div class="<?php echo $this->class; ?> block <?php echo $this->field('frame')->value(); ?> <?php echo $this->field('style')->value(); ?> <?php echo $this->field('halign')->value(); ?> <?php echo $this->field('mob_align')->value(); ?>" <?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>  <div class="ce_image_extended_inside" style="<?php if($this->field('margin_right')->value()): ?> margin-right: <?php echo $this->field('margin_right')->value(); ?>%;<?php endif; ?><?php if($this->field('margin_left')->value()): ?> margin-left: <?php echo $this->field('margin_left')->value(); ?>%;<?php endif; ?>">
<?php if($this->field('render_svg')->value()): ?>
<?php echo file_get_contents(TL_ROOT.'/'.$this->field('image')->generate()); ?>
<?php else: ?>
<?php if ($this->href): ?>
<a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if($this->field('link_attribut')->value()): ?> rel="<?php echo $this->field('link_attribut')->value(); ?>"<?php endif; ?><?= $this->attributes ?>>
<?php endif; ?>
<?php echo $this->field('image')->html(); ?><?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
</div>

Die HTML-Ausgabe wird nach Zuweisung des neuen Attributs link_attribut jedoch nicht berücksichtigt:

<div class="ce_image_extended first block frame-no style-default align-center " >
<div class="ce_image_extended_inside" style="">
<figure class="image_container">
<img loading="auto" src="files/myimage.png" width="224" height="112" alt="XXX" itemprop="image">
</figure>
</div>
</div>

Hier noch ein Screenshot zu den Einstellungen:



Grüße,
mapfei

[Tim]

Das customelement_image_extended Template sieht grundsätzlich anders aus. Schau mal genau mein Bild an und mach quasi copy and paste aus meinem Bild.

Dein Template hat eine zusätzliche Abfrage auf if($this->href). Das Feld bzw. die Variable gibt es aber nicht. Damit scheitert die <a> Ausgabe vollständig.

  <div class="<?php echo $this->class; ?> block <?php echo $this->field('frame')->value(); ?> <?php echo $this->field('style')->value(); ?> <?php echo $this->field('halign')->value(); ?> <?php echo $this->field('mob_align')->value(); ?>" <?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
  <div class="ce_image_extended_inside" style="<?php if($this->field('margin_right')->value()): ?> margin-right: <?php echo $this->field('margin_right')->value(); ?>%;<?php endif; ?><?php if($this->field('margin_left')->value()): ?> margin-left: <?php echo $this->field('margin_left')->value(); ?>%;<?php endif; ?>">
  <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if($this->field('link_attribut')->value()): ?> rel="<?php echo $this->field('link_attribut')->value(); ?>"<?php endif; ?><?= $this->attributes ?>>
  <?php echo $this->field('image')->html(); ?>
  </a>
  </div>
  </div>