Eigene Felder :: Bilder Aufruf in Override...

ThiloS · 3. Oktober 2022

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

Elwood · 3. Oktober 2022

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:

Zitat von ThiloS

.webp

Beitrag

RE: WEBP

[…]

Das kannst Du z.B. mit https://www.irfanview.de/ in .jpg, .png etc. konvertieren.

Ansonsten nutze ich ganz gerne https://dj-extensions.com/dj-webp

-OJ-

15. Mai 2022

ThiloS · 3. Oktober 2022

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:

PHP

<?php
  // JOOMLA 4 ZUSATZ INFOS BEI EIGENENE FELDERN ENTFERNEN !!!
   $meinBild = $this->item->jcfields[4]->value;
   // custom field ID an eigenes Foto anpassen

  // Zerlegen:
  $wurmInfos = HTMLHelper::_('cleanImageURL', $meinBild);

  // ENDE DES WURMS ZERHACKEN
  ?>

<?php echo $wurmInfos->url; ?>
// der eigentliche Aufruf des Bildes.

Alles anzeigen

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

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

ThiloS · 3. Oktober 2022

Danke Elwood!!!

Ja der Artikel ist sehr gut : -)

Elwood · 3. Oktober 2022

Zitat von ThiloS

Danke Elwood!!!

Ja der Artikel ist sehr gut : -)

Danke Re:Later

Ist sein Artikel!

Re:Later · 3. Oktober 2022

Zitat von ThiloS

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:

Zitat von ThiloS

{" imagefile":"images\="" musiker\="" bildname.webp#joomlaimage:\="" \="" local-images\="" bildname.webp?width="550&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.

Zitat von ThiloS

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

ThiloS · 4. Oktober 2022

@ 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

ThiloS · 14. Oktober 2022

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 ?)

ThiloS · 14. Oktober 2022

Habe das hier gerade in der deutschen Doku gefunden:

Zitat

Media Field

Der Feldtyp „Medien“ schreibt nun die Bild-Metadaten in den internen Wert. Hier ein Beispielwert:

images/banners/osmbanner1.png#joomlaImage://local-images/banners/osmbanner1.png?width=468&height=60

Um die endgültige Bild-URL oder den relativen Bilddateipfad zu erzeugen, kann die neue Hilfsfunktion verwendet werden:

echo \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($oldValue);

Zum Abrufen des reinen Wertes (ohne Adapterinformationen und Metadaten) aus dem Wert, der im Medienformularfeld gespeichert ist:

echo \Joomla\CMS\Helper\MediaHelper::getCleanMediaFieldValue($oldValue);

Die Funktion cleanImageURL bereinigt die Bild-URL nicht, sondern gibt ein Objekt zurück, bei dem ein Teil des Objekts die bereinigte URL ist. Die Verwendung von echo führt zu einem Fehler.

Alles anzeigen

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

ThiloS · 14. Oktober 2022

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">

ThiloS · 14. Oktober 2022

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.

DerPhilippe · 24. April 2023

Hallo zusammen, ich habe das hier beschriebene Problem ebenfalls. Habe auch laut dem hier verlinkten Beitrag und Hilfen alles probiert aber ich bekomme es nicht hin. Kann mir bitte einer sagen was ich falsch mache?

PHP

<?php

/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
use Joomla\Component\Content\Site\Helper\RouteHelper;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
use Joomla\CMS\HTML\HTMLHelper;

// Create a shortcut for params.
$params  = &$this->item->params;
$canEdit = $this->item->params->get('access-edit');
$info    = $this->item->params->get('info_block_position', 0);

// Check if associations are implemented. If they are, define the parameter.
$assocParam = (Associations::isEnabled() && $params->get('show_associations'));

$currentDate       = Factory::getDate()->format('Y-m-d H:i:s');
$isExpired         = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
$isNotPublishedYet = $this->item->publish_up > $currentDate;
$isUnpublished     = $this->item->state == ContentComponent::CONDITION_UNPUBLISHED || $isNotPublishedYet || $isExpired;

?>

<?php
  // JOOMLA 4 ZUSATZ INFOS BEI EIGENENE FELDERN ENTFERNEN !!!
   $meinBild = $this->item->jcfields['rezeptfoto']->rawvalue;
   // custom field ID an eigenes Foto anpassen

  // Zerlegen:
  $wurmInfos = HTMLHelper::_('cleanImageURL', $meinBild);

  // ENDE DES WURMS ZERHACKEN
  ?>

<?php foreach($this->item->jcfields as $jcfield)
     {
          $this->item->jcFields[$jcfield->name] = $jcfield;
     }
?>

<div class="item-content">
  <div class="img-hover-zoom rounded position-relative">
Muss ich das Bild mit dem einsetzen? <?php echo $wurmInfos->url; ?>
Oder hiermit? <?php echo $this->item->jcFields['rezeptfoto']->rawvalue; ?>
    <div class="overlay">

Alles anzeigen

Im Frontend sehe ich folgendes:

Code

{"imagefile":"images\/2023\/04\/01\/Spargel_mit_Sauce_Hollandaise_large.jpg#joomlaImage:\/\/local-images\/2023\/04\/01\/Spargel_mit_Sauce_Hollandaise_large.jpg?width=1280&height=962","alt_text":"Rezept: Spargel mit Sauce Hollandaise - Philippe's Foodblog"}

Danke für die Hilfe

Indigo66 · 24. April 2023

DerPhilippe der Thread ist seit Okt. 22 gelöst. Bitte mache einen eigenen auf (Forenregel) mit allen aktuellen Infos zum System und Ifrastruktur. Gene mit Verweis, dass die Lösung aus diesem Thread bei Dir nicht hilft.

Media Field

Tags