Preload Bilddatei in der Detailansicht

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

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);
    }
}

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;
}

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>