Ankündigung

Einklappen
Keine Ankündigung bisher.

customelement_image_extended mit Link-Attribut

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • customelement_image_extended mit Link-Attribut

    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

  • #2
    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.
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      Hm.

      Code:
      <?php echo $this->field('image')->html(); ?>
      erzeugt mir aktuell ja

      HTML-Code:
      <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?
      Zuletzt geändert von mapfei; 30.09.2020, 11:25.

      Kommentar


      • #4
        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.
        Zuletzt geändert von Tim; 30.09.2020, 11:31.
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          Zitat von Tim Beitrag anzeigen
          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?

          Kommentar


          • #6
            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)
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              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-Code:
              <?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?

              Kommentar


              • #8
                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.

                Klicke auf die Grafik für eine vergrößerte Ansicht

Name: screenshot_6121.jpg
Ansichten: 297
Größe: 109,4 KB
ID: 20629

                http://www.premium-contao-themes.com

                Kommentar


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

                  PHP-Code:
                  <?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.
                  Zuletzt geändert von mapfei; 30.09.2020, 13:16.

                  Kommentar


                  • #10
                    Nimm doch das ce_image_raw aus EX. Darin entfernste nur noch den <a> wrapper. Übrig bleibt:
                    Code:
                    [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]
                    http://www.premium-contao-themes.com

                    Kommentar


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

                      PHP-Code:
                      <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:

                      HTML-Code:
                      <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>
                      Zuletzt geändert von mapfei; 06.10.2020, 14:09.

                      Kommentar


                      • #12
                        So kurz vorm "Ziel" keine Lösung?

                        Kommentar


                        • #13
                          Mhh... steht alles bereits im Thread. Der Rest ist zusammen bauen oben sogar mit Bildern.
                          http://www.premium-contao-themes.com

                          Kommentar


                          • #14
                            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:

                            PHP-Code:
                            <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:

                            PHP-Code:
                             <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:

                            HTML-Code:
                            <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:
                            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Screenshot 2020-10-19 123821.jpg
Ansichten: 312
Größe: 39,0 KB
ID: 20838


                            Grüße,
                            mapfei

                            Kommentar


                            • #15
                              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.

                              Code:
                                <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>
                              http://www.premium-contao-themes.com

                              Kommentar

                              Lädt...
                              X