1. Forum
    1. Themen Übersicht
  2. Hilfe
  3. Forenregeln
  4. Mitglieder
    1. Team
    2. Mitgliedersuche
  5. Webseite
  6. Archiv
  • Anmelden
  • Registrieren
  • Suche

Neuigkeiten

Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche

Neuigkeiten

Letzte Beiträge
  1. JoomGallery 3.x JUX für Joomla! 3
  2. Alle Beiträge zur JoomGallery 3.x JUX
  3. Sonstiges - JG 3.x

Preload Bilddatei in der Detailansicht

  • ClipartsFree_de
  • 4. Mai 2024 21:39
  • Erledigt
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 4. Mai 2024 21:39
    • #1

    Hallo,

    Ich möchte einen Preload-Link ala

    Code
    <link rel="preload" as="image" href="image_name.png"> 

    für Preload von Bildern im Detailansicht implementieren.

    PHP
    <link rel="preload" as="image" href="<?php echo $this->image->img_src; ?>"> 

    Der Code liefert leider keine Ergebnisse, da das Objekt beim Rendern vom Header noch nicht initialisiert ist. Wie kriege ich das gefixt?

    Danke im Voraus!

    • Zitieren
  • Elfangor93
    Moderator
    Reaktionen
    188
    • 5. Mai 2024 14:58
    • #2

    Das Vorgehen, das du gewählt hast, wäre bei einem item objekt vom com_content aus dem Core richtig. Bei der JoomGallery haben wir uns für ein anderen Ansatz entschieden.

    Du kannst im Template-File der Detailansicht sehen, wie die referenz urls zu den Bildern erzeugt werden: https://github.com/JoomGalleryfri…efault.php#L170

    Das entscheidende ist folgende Stelle

    Code
    use Joomgallery\Component\Joomgallery\Administrator\Helper\JoomHelper;
    ...
    JoomHelper::getImg($this->item, 'detail');

    Die Helper-Methode JoomHelper::getImg() erzugt den Link zum Bild entsprechend deinen Einstellungen in der JoomGallery und dem Bildtyp, wessen Link zu haben möchtest. Im Beispiel wird der Link zum Detail-Bild vom Bild-Objekt ($this->item) erzeugt.

    Ich hoffe, das hilft dir weiter...

    Wir sind auf der Suche nach Helfern für die JoomGallery 4 Entwicklung!
    Melde dich bei Interesse bei mir (Elfangor93).
    (Verfügbare Jobs: PHP-Entwicklung, Testen, Übersetzen, Dokumentation)

    • Zitieren
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 5. Mai 2024 17:31
    • #3

    Danke fürs Feedback!

    Ich nutze noch alte 3-te Version. Da scheint die Architektur anders zu sein. Wo finde ich die Funktion da?

    Einmal editiert, zuletzt von ClipartsFree_de (5. Mai 2024 17:48)

    • Zitieren
  • Elfangor93
    Moderator
    Reaktionen
    188
    • 5. Mai 2024 19:49
    • #4

    In der JoomGallery 3 gibt eine ähnliche Funktion im ambit-Objekt

    Code
    $this->_ambit->getImg('img_url', $image);

    Das ambit-Objekt sollte eigentlich in allen template files der JoomGallery 3 vorhanden sein.

    Das zweite Argument `$image` kann wahlweise das Image-Objekt oder eine Image-ID sein. Hier im Source-Code siehst du, was du im ersten argument von getImg() alles nehmen kannst, um URL oder Systempfad der drei vefügbaren Bilder zu erhalten:
    https://github.com/JoomGalleryfri…/ambit.php#L273

    Du musst dich aber natürlich in einem Template-File der JoomGallery befinden, damit das funktioniert, dann sollte aber eigenlich auch `$this->image` bereits initialisiert sein.
    Ausserhalb der JoomGallery wird es bei der JoomGallery 3 schwierig...

    Wir sind auf der Suche nach Helfern für die JoomGallery 4 Entwicklung!
    Melde dich bei Interesse bei mir (Elfangor93).
    (Verfügbare Jobs: PHP-Entwicklung, Testen, Übersetzen, Dokumentation)

    • Zitieren
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 5. Mai 2024 22:14
    • #5

    Danke sehr!

    Ich habe mehrere Ansätze ausprobiert, das funktioniert leider nicht. Ich habe ambit.php in Template index.php importiert - das lief auf Fehler. Danach habe ich eine separate Klasse für die Img-Funktion erstellt und Klasse in Header importiert - das lief auch auf Fehler. ((

    Welche Möglichkeit gibt es denn einen Preload-Link im Header zu generieren? Zumindest im Detailansicht macht es Sinn, da Google seit einiger Zeit solche Pages ohne Preload nicht besonders mag:

    "Wenn der Seite das LCP-Element dynamisch hinzugefügt wird, solltest du das Bild vorab laden, um den LCP zu verbessern. Weitere Informationen zum Vorabladen von LCP-Elementen."

    • Zitieren
  • Elfangor93
    Moderator
    Reaktionen
    188
    • 6. Mai 2024 07:30
    • #6

    Ich würde ein Template-Override von com_joomgallery/view/detail/tmpl/default.php in deinem Template anlegen und dann dort die Preload Zeile zum Header hinzufügen.

    Das würde folgendermassen funktionieren:

    Code
    $doc = JFactory::getDocument();
    $doc->addCustomTag('<link rel="preload" as="image" href="'.$this->image->img_src.'">');
    JoomGallery/components/com_joomgallery/views/detail/tmpl/default.php at master · JoomGalleryfriends/JoomGallery
    A native image gallery component for Joomla! Contribute to JoomGalleryfriends/JoomGallery development by creating an account on GitHub.
    github.com

    Wir sind auf der Suche nach Helfern für die JoomGallery 4 Entwicklung!
    Melde dich bei Interesse bei mir (Elfangor93).
    (Verfügbare Jobs: PHP-Entwicklung, Testen, Übersetzen, Dokumentation)

    • Zitieren
  • Elfangor93 6. Mai 2024 13:37

    Hat den Titel des Themas von „Implementierung vom Tag <link rel="preload" as="image" href="image.png"> im Head“ zu „Preload Bilddatei in der Detailansicht“ geändert.
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 6. Mai 2024 20:49
    • #7

    Danke schön! Das funktioniert!

    Ein Wunsch für die 4-te Version von JoomGallery, die sich gerade in Entwicklung befindet: Nehmt bitte diese Option mit Preloadlink auf. Heutzutage spielen die technischen Anforderungen seo-technisch eine wichtige Rolle:

    PageSpeed Insights

    Hier sind noch einige Ideen, die mir spontan einfallen:

    > Öffnen von Links zu allen Bildern inkl. Thumbs, Details und Originals den Suchmaschinen, damit Bilder indexiert werden.

    > Beibehalten der Linkstruktur inkl. Pages und Pfade zu den Bildern bei Migration von Version 3 auf 4. Nur dann wird sich ein Update für die alte Nutzer lohnen. Ansonsten geht die gesamte Arbeit verloren oder man muss dann sehr aufwändig entsprechende Weiterleitungen einbauen. Und ob diese dann von Google & Co. genauso wie alte Versionen gerankt werden, steht in Sternen.

    > Bereitstellung von Bildern in WebP und AVIF Formaten.

    > Aufnahme des title-Tags neben dem alt-Tag. Im Idealfall sollten die Texte pro Bild auch dann unterschiedlich sein.

    > Aufnahme einer Markierung z. B. nach Schema.org-Standard

    > Bereitstellung einer zusätzlichen vierten Bildversion für die Anzeige auf mobilen Geräten (z. B. Thumbs, Details, Originals und Mobile). um das Problem "Bilder richtig dimensionieren" zu lösen.

    • Zitieren
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 9. Mai 2024 20:56
    • #8

    Hallo Elfangor,

    erstmal vielen Dank für die Informationen!

    Ich habe auf meiner Website Suche mit unikaler URL pro Anfrage implementiert. URL hat das Format /search.html?sstring=Suchbegriff

    Ich würde aber gerne URL im folgenden Format haben: /search/Suchbegriff/

    Kannst du bitte einen Hinweis geben, wie kriege ich das hin?

    • Zitieren
  • Elfangor93
    Moderator
    Reaktionen
    188
    • 10. Mai 2024 10:39
    • #9

    Dazu müsstest du den Router der JoomGallery umprogrammieren.

    Den router findest du unter /components/com_joomgallery/router.php.

    Wie das routing in Joomla 3 funktioniert und wie die Komponenten-Router da aufgebaut sind, findest du hier:
    https://docs.joomla.org/J3.x:Supportin…_your_component

    Leider kann ich dir dazu nicht mehr behilflich sein, da ich mich mit dem alten "legacy" Router, der in der JoomGallery 3 noch eingesetzt ist nicht aus kenne. Da musst du wohl selber nachforschen.

    Wir sind auf der Suche nach Helfern für die JoomGallery 4 Entwicklung!
    Melde dich bei Interesse bei mir (Elfangor93).
    (Verfügbare Jobs: PHP-Entwicklung, Testen, Übersetzen, Dokumentation)

    • Zitieren
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 10. Mai 2024 12:59
    • #10

    Danke schön! Das kriege ich hin!

    • Zitieren
  • ClipartsFree_de
    Neumitglied
    Reaktionen
    1
    • 12. Mai 2024 16:14
    • #11

    Nach vielen Stunden Arbeit, Versuche und Tests habe ich folgende Lösung kreiert. Diese entspricht sicherlich nicht den Best Practices in der Branche, funktioniert technisch gesehen ziemlich gut. Derzeit nutze ich diese auf einer Website mit über 7000 Bildern in der Galerie. Teile gerne den Ansatz hier für alle JoomGallery-Nutzer.

    P. S. Ach ja, weitere Tipps für die Verbesserung der Lösung sind willkommen!

    IST-Zustand: In der 3-en Version der JoomGallery werden die Suchergebnisse standardmäßig unter dem Pfad .../gallerieansicht/search.html ausgegeben.

    Die Nachteile dieser Lösung aus SEO-Sicht lasse ich hier aus.

    SOLL-Zustand: Für jeden Suchbegriff soll eine eigene URL mit unikalem Title-Tag, eigener H1-Überschrift und ggf. unikalen Metatags generiert werden.

    URL-Muster: /galerieansicht/search/suchbegriff/

    Lösung:

    1. Implementierung eines Suchfeldes (Alternativ kann man auch die JoomGallery-Standardfelder mit einigen Anpassungen nutzen).

    PHP
    // SUCHFELD
    
    <form id="searchForm" action="/galerieansicht/search/" method="get">
        <input title="Galerie durchsuchen..." type="text" name="sstring" class="inputbox" onblur="if(this.value=='') this.value='Galerie durchsuchen...';" onfocus="if(this.value=='Galerie durchsuchen...') this.value='';" value="<?php echo isset($_GET['sstring']) ? htmlspecialchars($_GET['sstring']) : 'Galerie durchsuchen...'; ?>">
        <button type="submit">Suchen</button>
    </form>
    
    // AUFBEREITUNG DES SUCHBEGRIFFS
    <script>
    document.getElementById('searchForm').onsubmit = function() {
        var input = this.querySelector('.inputbox');
        var cleanInput = input.value.toLowerCase().trim().replace(/\s+/g, '-');
        var encodedInput = encodeURIComponent(cleanInput); // Sorgt für korrekte URL-Kodierung
        var actionUrl = this.action + encodedInput + '/';
        window.location = actionUrl;
        return false;
    };
    </script>
    Alles anzeigen

    2. Überarbeitete Abfragelogik in components/com_joomgallery/models/search.php

    Die SQL-Abfrage wurde nur auf ein Feld "imgtitle" begrenzt, um die Performance zu verbessern. Dabei wurde auch eine Fulltext-Suche implementiert. Voraussetzung dafür: DB sollen die Fulltext-Suche unterstützen können.

    Code
    class JoomGalleryModelSearch extends JoomGalleryModel
    {
        protected $_searchResults;
    
        public function __construct()
        {
            parent::__construct();
        }
    
        public function getSearchResults()
        {
            if ($this->_loadSearchResults())
            {
                return $this->_searchResults;
            }
            return array();
        }
    
        protected function _loadSearchResults()
        {
            $sstring = JRequest::getString('sstring');
            $searchstring = $this->_db->escape(trim($sstring));
    
            $categories = $this->_ambit->getCategoryStructure();
            $authorisedViewLevels = implode(',', $this->_user->getAuthorisedViewLevels());
    
            $query = $this->_db->getQuery(true);
    // Ändern Sie die Suchabfrage, um Full-Text-Suche zu verwenden, falls verfügbar
    $query->select('a.*, '.JoomHelper::getSQLRatingClause('a').' AS rating, u.username, ca.cid, ca.name AS name, ca.allow_download AS allow_download')
          ->from(_JOOM_TABLE_IMAGES.' AS a')
          ->innerJoin(_JOOM_TABLE_CATEGORIES.' AS ca ON a.catid = ca.cid')
          ->leftJoin('#__users AS u ON a.owner = u.id')
          ->where('MATCH(a.imgtitle) AGAINST ('.$this->_db->quote($searchstring).' IN BOOLEAN MODE)')
          ->where('a.published = 1')
                  ->where('a.approved = 1')
                  ->where('a.access IN ('.$authorisedViewLevels.')')
                  ->where('ca.published = 1')
                  ->where('ca.access IN ('.$authorisedViewLevels.')')
                  ->where('ca.cid IN ('.implode(',', array_keys($categories)).')')
                  ->where('a.hidden = 0')
                  ->where('ca.hidden = 0')
                  ->where('ca.in_hidden = 0')
                  ->where('ca.exclude_search = 0')
                  ->group('a.id')
                  ->order('a.id DESC');
    
            $this->_db->setQuery($query);
            $this->_searchResults = $this->_db->loadObjectList();
            
            return !empty($this->_searchResults);
        }
    }
    Alles anzeigen

    3. Anpassung des Routers

    Code
    a). ANPASSUNG function JoomGalleryBuildRoute
    
    ...if(isset($query['view']) && $query['view'] == 'search')
    {
      if(!empty($query['sstring'])) {
        // Sicherstellen, dass der Suchstring URL-freundlich ist
        $searchSegment = JApplication::stringURLSafe($query['sstring']);
        $segments[] = 'search';
        $segments[] = $searchSegment;
        unset($query['view'], $query['sstring']);
      } else {
        $segments[] = 'search';
        unset($query['view']);
      }
    }
    ...
    
    b). ANPASSUNG function JoomGalleryParseRoute
    
    if($segments[0] == 'search' && isset($segments[1]))
    {
      $vars['view'] = 'search';
      $vars['sstring'] = str_replace('-', ' ', $segments[1]);  // '-' wieder zu Leerzeichen konvertieren
      return $vars;
    }
    Alles anzeigen


    4. Output in components/com_joomgallery/views/search/tmpl/default.php

    PHP
    a). LOGIK IN PHP ZUR PRÜFUNG VON GEFUNDENEN ERGEBNISSEN. WENN KEINE, DANN WEITERLEITUNG AN DEFAULT PAGE. WENN JA, SETZEN DES NEUEN TITLE-TAGS
    
    // Laden der Dokumentinstanz
    $document = JFactory::getDocument();
    
    // Bereinigen und Aufbereiten des Suchbegriffs
    $searchTerm = ucwords(trim(str_replace(':', ' ', $this->sstring)));
    
    // Anzahl der gefundenen Bilder
    $count = count($this->rows);
    
    // Prüfen, ob Bilder gefunden wurden
    if ($count < 1) {
        // Setzen eines spezifischen Titels, wenn keine Bilder gefunden wurden
        $document->setTitle('Es wurden keine Bilder gefunden, die den Suchbegriffen entsprechen!');
    
        // Weiterleitung zur Suchseite, wenn keine Ergebnisse vorhanden sind. Die Seite muss in Joomla manuell im Vorfeld als Artikel erstellt werden.
        $app = JFactory::getApplication();
        $app->redirect(JRoute::_('/keine-bilder-gefunden.html'));
    } else {
        // Setzen des Titels, wenn Ergebnisse vorhanden sind
        $title = $count . ' ' . $searchTerm . ' Bilder zum Herunterladen | IhreSeitenAdresse.de';
        $document->setTitle($title);
    }
    
    b). GENERIERUNG DER H1-ÜBERSCHRIFT
    
    <div class="well well-small jg-header">
    <h1><?php echo $count . ' Bilder zum Suchbegriff &Prime;' . str_replace(':', ' ', $this->sstring) . '&Prime;'; ?></h1>
    </div>
    
    c). AUFBEREITUNG DES OUTPUTS DURCH CSS, UM GUTE WERTE BEI PAGESPEED INSIGHT ZU ERZIELEN
    
    <style>
    .jg_row {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Drei gleichmäßige Spalten */
      grid-gap: 10px 15px; /* Abstand zwischen den Spalten und Zeilen */
      margin-bottom: 0; /* Verhindert unnötige Margin am unteren Rand */
    }
    
    .jg_searchelement {
      display: flex;
      flex-direction: column; /* Inhalte vertikal stapeln */
      background: #fff; /* Hintergrundfarbe des Elements */
      border: 1px solid #ccc; /* Rand um das Element */
      box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leichter Schatten für Tiefeneffekt */
      overflow: hidden; /* Verhindert das Überlaufen des Inhalts */
      padding: 8px; /* Einheitlicher Innenabstand */
      contain: layout style; /* Beschränkt das Layout und das Styling auf das Element */
    }
    
    .jg_imgalign_search {
      display: block; /* Block-Display für die Ausrichtung der Bilder */
    }
    
    .jg_searchelem_photo {
      display: block;
      overflow: hidden; /* Verhindert das Überlaufen des Bildes */
      position: relative; /* Setzt eine relative Positionierung für das Kind-Element */
      padding-top: 75%; /* Setzt ein Verhältnis von 4:3 */
    }
    
    .jg_searchelem_photo img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Bild deckt den verfügbaren Bereich ab, ohne zu verzerrt zu werden */
    }
    
    .jg_searchelem_txt {
      padding: 10px; /* Innenabstand für den Textbereich */
      text-align: left; /* Textausrichtung links */
      margin-top: auto; /* Schiebt den Textbereich nach unten, wenn nötig */
    }
    
    /* Responsive Anpassungen für Tablets */
    @media (max-width: 768px) {
      .jg_row {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten für mehr Platz */
      }
    }
    
    /* Responsive Anpassungen für Mobilgeräte */
    @media (max-width: 480px) {
      .jg_row {
        grid-template-columns: 1fr; /* Eine Spalte auf Mobilgeräten */
      }
    }
    </style>
    Alles anzeigen

    Einmal editiert, zuletzt von ClipartsFree_de (12. Mai 2024 19:00)

    • Zitieren

Letzte Beiträge

  • Is there a way to hide the "Description:" text for Category view?

    Elfangor93 9. Juli 2025 06:19
  • Can you change the parent category of a category?

    GJSchaller 8. Juli 2025 00:32
  • URLs nach Update auf JoomGallery4 und SH404SEF /4SEF

    Elfangor93 2. Juli 2025 06:35
  • Looking to replicate JG3 Gallery / Category View under JG4

    GJSchaller 1. Juli 2025 20:01
  • What can you do with Tags?

    FriendlyUser 30. Juni 2025 22:40
  • JG3 Bilder als Artikelbild verlinkt - Welche Migrationseinstellung erhält die Dateipfade?

    MrMusic 30. Juni 2025 10:21
  • JoomGallery for Joomla 4

    MrMusic 26. Juni 2025 13:53
  • Bearbeiten von Bildern nicht möglich

    kaufi88 26. Juni 2025 11:11
  • URLS nach Migration auf JG4

    Elfangor93 25. Juni 2025 12:45
  • Inconsistent category folder paths defined in the database of your JG3 tables

    MrMusic 24. Juni 2025 15:49

Tags

  • head
  • preload
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™