Eigene Felder :: Bilder Aufruf in Override...

  • Hi zusammen,

    nach dem Update auf J4 machen meine eigenen Felder für Bilder komische Sperenzien:


    Wählte ich bisher ein Foto aus wurde einfach die relative, sauber URL im Feld dargestellt.
    Beispiel:

    images/musiker/bildname.webp

    Fertig.


    Im Beitrags oder Blog Override konnte ich es dann immer mit

    PHP
      <img src="<?php echo $this->item->jcfields[1]->rawvalue; ?>" loading="lazy" />

    aufrufen.


    Seit dem Update speichert J4 nach der Bild-URL im eigenen Feld noch div. Zusatzinfos ab. Beispiel:


    images/musiker/bildname.webp#joomlaImage://local-images/musiker/bildname.webp?width=550&height=367


    Der Aufruf im Front-End über jcfields bringt entsprechend Seltsames zutage:


    Code
    <img src="/{" imagefile":"images\="" musiker\="" bildname.webp#joomlaimage:\="" \="" local-images\="" bildname.webp?width="550&amp;height=367&quot;,&quot;alt_text&quot;:&quot;&quot;}&quot;" loading="lazy">


    Wie kann ich J4 dazu bringen diese Zusatzinfos wegzulassen?


    Greets,

    Thilo

  • Vielleicht hilfreich dazu:


    Joomla 4: Einleitungs-, Beitragsbild. Komische Pfade. - GHSVS-Dein Web mit Mehr
    In Joomla 4 wurden die Pfade in der Datenbank für intro_image und fulltext_image im Feld images blöd verändert. Aufpassen beim Auslesen und Verwenden!
    ghsvs.de



    Und noch interessantes zu:

    .webp


  • Ah - ok ein wenig Google förderte diesen Artikel zutage:


    Joomla 4: Einleitungs-, Beitragsbild. Komische Pfade. - GHSVS-Dein Web mit Mehr
    In Joomla 4 wurden die Pfade in der Datenbank für intro_image und fulltext_image im Feld images blöd verändert. Aufpassen beim Auslesen und Verwenden!
    ghsvs.de


    In meinem Fall heißt das für ein Custom Field folgendes:



    Höhe und Breite werden jedoch nach wie vor mit übergeben...

    Was bei responsiven Dingen manchmal mit einem CSS override überschrieben werden muss.

  • Der Aufruf im Front-End über jcfields bringt entsprechend Seltsames zutage:

    Das grundlegende Problem hier ist aber ein ganz anderes. In deinem Code ist ein verstümmelter JSON-String zu sehen. Siehe geschweifte Klammern:

    {" imagefile":"images\="" musiker\="" bildname.webp#joomlaimage:\="" \="" local-images\="" bildname.webp?width="550&amp;height=367&WCF_AMPERSAND",&WCF_AMPERSAND"alt_text&WCF_AMPERSAND":&WCF_AMPERSAND"&WCF_AMPERSAND"}

    Vor der "Verstümmelung" hätte also irgendwo noch ein

    Code
    json_decode(...)

    laufen müssen, um erst mal den tatsächlichen "Bild-Wurm" zu bekommen. Dann wäre, das width, height nebenbei auch wurst, weil sie ja nicht als IMG-Attribute eingesetzt werden, sondern wirkungslos nur hinter dem Gatterzeichen oder bei dir Fragezeichen.

    Höhe und Breite werden jedoch nach wie vor mit übergeben...

    Was bei responsiven Dingen manchmal mit einem CSS override überschrieben werden muss.

    Na ja, eigentlich geht man ja (spätestens) heutzutage davon aus, dass das Basis CSS bereits ein oder zwei allgemeine Regeln für IMG enthält (max-width und/oder width in Prozent(!!)).


    Das width- und height-Attribut im Zusammenhang mit loading="lazy" ist dann nur noch eine Ratio-Information, die Browser dringend brauchen. Hat also im Normalfall gar nix mit der Darstellungsgröße des Bildes zu tun. Es geht hier dem Browser nur um das Rechenergebnis

    Code
    width/height = Ratio-Zahl
  • @ ReLater:

    Danke für den sehr sauberen Beitrag zum Wurm! Der wird bestimmt vielen Usern noch sehr hilfreich sein.


    Ach ja und noch was:

    Den sog. HTMLHelper noch einbinden, falls - wie bei mir - noch nicht integriert.


    Code
    use Joomla\CMS\HTML\HTMLHelper;

    Damit klappt es weiter wie bisher...



    Thema IMG und CSS:
    Es ist ja so, dass per width:100%-Regel das Bild sauber eingepasst wird, solange das Bild selbst KEINE Höhe mit ausgibt.
    Bringt das Element aber eine Höhe mit wird das Bild neben den 100% width auf die Element Höhe verzerrt. In den meisten Fällen unschön.


    Da bei mir bisher keinerlei Breiten und Höhen mitgeliefert wurden musste ich also bei der Höhe auch nicht per CSS eingreifen, da der Browser die Höhe dann wie Du schreibst ja auch automatisch korrekt darstellt.


    Jetzt MIT Höhenangaben braucht es eben eine Zeile mehr mit height:auto inkl !important Angaben.


    Grüße

  • So - jetzt muss ich hier doch noch mal nachhaken bei den Wurm Profis...


    Neues Problem bei weiterem Joomla4 Switch:


    Ich habe dort für den Kunden eine Art Popup Dia-Show gebastelt mit Custom Media Fields.

    Dort hinterlegen die Kunden zwischen drei und neun Fotos die ich dann einzeln aufrufe per Popup-LINK.


    Code dazu war bisher immer:

    PHP
    <a href="<?php echo $this->baseurl . '/' . $this->item->jcfields[23]->rawvalue; ?>" data-lightbox="einname" data-title="<?php echo $this->escape($this->item->title); ?>"> HIER EINE KLEINE BILDERVORSCHAU  </a>

    Mit "rawvalue" konnte ich immer die reine Bild-URL laden was mir hier beim Popup sehr hilfreich war!

    Bekomme ich das mit limitiertem (seeehr limitiertem) PHP "Wissen" ähnlich hin?


    Für Tipps wäre ich sehr dankbar. (Evtl. gibt es ja auch für die Custom Fields Ausgabe noch einen anderen "Schalter" - ähnlich wie früher rawvalue ?)

  • Habe das hier gerade in der deutschen Doku gefunden:


    Jetzt eben wieder mein nicht vorhandenes PHP Know-How... : -)

  • Der folgende Versuch bringt wie erwartet nichts sinnvolles zu Tage:

    PHP
    use Joomla\CMS\Helper\MediaHelper;
    
    $link1 = $this->item->jcfields[21]->rawvalue;
    
    $wurmInfos1 = MediaHelper::getCleanMediaFieldValue($link1);
    
    <a href="<?php echo $wurmInfos1; ?>"

    :) Evtl. sieht ein Checker ja sofort an welcher Stelle ich Mist gebaut habe?

    Output ist so:


    Code
    <a href="/{"imagefile":"images\/ordner1\/ordner2\/ordner3\/bildname.webp" data-lightbox="schaffitzel" data-title="Sonnensegel Dortmund">
  • Ah ok - manchmal dauert es bei mir eben etwas länger... ohne genau zu wissen was man tut probiert man eben öfters :)


    Also korrekte Lösung:


    PHP
    $link1 = json_decode($this->item->jcfields[21]->rawvalue);
    
    
    
    <?php echo $link1->imagefile; ?>


    (Wusste nicht - dass es beim Media-Field noch zwei Attribute gibt...)


    Damit passt es jetzt.