Ankündigung

Einklappen
Keine Ankündigung bisher.

Layout der Gallery modifizieren

Einklappen
Das ist ein wichtiges Thema.
X
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Layout der Gallery modifizieren

    Hallo zusammen,

    Ich wurde schon des öfteren gefragt, wie man das Layout der Gallery modifizieren kann. Konkret ging es bei den Fragen darum, alternative Darstellungsformen zu den "3 Bilder nebeneinander" umzusetzen. Letzte Woche habe ich für einen meinen Kunden die Gallery grafisch etwas modifiziert. Das Endresultat seht ihr am Ende dieser Nachricht im Anhang. Gerne erkläre ich Euch in diesem Thread, wie ihr eine solche Gallery selber umsetzen könnt.

    1. Als erstes müsst ihr die Content Seite der Gallery anpassen. Dazu öffnet ihr im Content Manager die Seite, welche dem Bereich gallery zugeordnet ist (siehe Werte in der 2. Spalte von links). Der komplette Inhalt sieht in meinem Fall wie folgt aus:

      HTML-Code:
      <script type="text/javascript">
      Shadowbox.loadSkin('classic','lib/javascript/shadowbox/src/skin/');
      Shadowbox.loadLanguage('en', 'lib/javascript/shadowbox/src/lang');
      Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'lib/javascript/shadowbox/src/player');
      </script>
      
      <script type="text/javascript">
      window.onload = function(){
          Shadowbox.init();
      };
      </script>
      
      <div id="gallery">
          <!-- BEGIN galleryCategories -->
          <div id="gallery_tree_box">&nbsp;Sie sind hier:&nbsp;[[GALLERY_CATEGORY_TREE]]</div>
          
          <!-- BEGIN galleryCategoryList -->
          <div class="gallery_category_box">
              <div class="gallery_category_box_image">[[GALLERY_CATEGORY_IMAGE]]</div>
              <div class="gallery_category_box_content">[[GALLERY_CATEGORY_NAME]]</div>
          </div>
          <!-- END galleryCategoryList -->     
          
          <!-- BEGIN galleryImageBlock -->      
          [[GALLERY_JAVASCRIPT]]
          <!-- BEGIN galleryShowImages -->
      
      <div id="gallery">
          <div id="gallery_tree_box">Fotos</div>
          
      <div style="float: left; width: 300px: height: 200px; padding-right: 30px;">[[GALLERY_IMAGE1]]</div>
      <div style="float: left; width: 143px: height: 95px; padding-right: 14px;">[[GALLERY_IMAGE2]]</div>
      <div style="float: left; width: 143px: height: 95px;">[[GALLERY_IMAGE3]]</div>
      <div style="float: left; width: 143px: height: 95px; padding-right: 14px; padding-top: 10px;">[[GALLERY_IMAGE4]]</div>
      <div style="float: left; width: 143px: height: 95px; padding-top: 10px;">[[GALLERY_IMAGE5]]</div>
      
      <div style="float: right; width: 300px: height: 200px; padding-left: 30px; padding-top: 10px;">[[GALLERY_IMAGE6]]</div>
      <div style="float: right; width: 143px: height: 95px; padding-left: 14px; padding-top: 10px;">[[GALLERY_IMAGE7]]</div>
      <div style="float: right; width: 143px: height: 95px; padding-top: 10px;">[[GALLERY_IMAGE8]]</div>
      <div style="float: right; width: 143px: height: 95px; padding-left: 14px; padding-top: 10px;">[[GALLERY_IMAGE9]]</div>
      <div style="float: right; width: 143px: height: 95px; padding-top: 10px;">[[GALLERY_IMAGE10]]</div>
      
      <div style="float: left; width: 143px: height: 95px; padding-right: 14px; padding-top: 10px; padding-bottom: 5px;">[[GALLERY_IMAGE11]]</div>
      <div style="float: left; width: 143px: height: 95px; padding-right: 30px; padding-top: 10px; padding-bottom: 5px;">[[GALLERY_IMAGE12]]</div>
      <div style="float: left; width: 143px: height: 95px; padding-right: 14px; padding-top: 10px; padding-bottom: 5px;">[[GALLERY_IMAGE13]]</div>
      <div style="float: left; width: 143px: height: 95px; padding-top: 10px; padding-bottom: 5px;">[[GALLERY_IMAGE14]]</div>     
      </div>
          <!-- END galleryShowImages -->
      
          <div id="gallery_paging">[[GALLERY_PAGING]]&nbsp;</div>
          <!-- END galleryImageBlock --> 
               
          <!-- END galleryCategories -->       
      </div>

      Interessant ist besonders der Teil zwischen <!-- BEGIN galleryShowImages --> und <!-- END galleryShowImages -->.
      In diesem Teil wird die Ausgabe der Thumbnails produziert. Jedes Bild erhält einen Platzhalter ([[GALLERY_IMAGEX]]). Insgesamt haben in diesem Block also 14 Bilder Platz.

      Jetzt gibt es aber noch eine Besonderheit zu beachten: die Anzahl der Bilder pro Seite muss in den Einstellungen der Gallery zwingend auf diesen Wert (=14) eingestellt werden. Ist der Werte grösser oder tiefer, so wird der Block nicht vollständig gefüllt. Das kann zu einem unerwarteten Verhalten des Systems, bzw. des Designs führen.

      Wichtiger Hinweis: das Layout ist für eine Breite von mindestens 650 Pixel ausgelegt. Stellt also sicher, dass Euer Content diese Breite aufweist, da andernfalls das Design verrissen werden könnte.
    2. Als nächstes müsst ihr die Datei modules/gallery/index.class.php mit der Datei aus dem Anhang überschreiben. Die Datei wurde so angepasst, dass 14 Bilder pro Seite ausgegeben werden. Dieser Wert findet sich auf Zeile 1041 und muss ggf. angepasst werden, wenn mehr oder weniger Bilder in einem Block verwendet werden sollen. Wichtig: die Datei wurde für die Version 2.1 erstellt und ist evt. nicht kompatibel mit älteren, bzw. neueren Versionen!
    3. Jetzt könnt ihr Euch ans Hochladen der Bilder machen. Da die Thumbnails zwei verschiedene Grössen besitzen müsst ihr das beim Uploaden, bzw. Erzeugen der Thumbnails in Contrexx beachten. Für die Erzeugung der Thumbnails muss folgende Grössen gewählt werden:
      • Grosse Bilder: 300 x 200 Pixel
      • Kleine Bilder: 143 x 95 Pixel


      Damit die Bilder auch im richtigen Platzhalter ausgegeben werden muss eine strikte Sortierung der Bilder eingehalten werden. Da diese bequem im System geändert werden kann, ist das allerdings kein grosses Problem. Folgend das Prinzip:

      • Grosse Bilder: Bild #1, Bild #6, Bild #15, Bild #20, Bild #29, Bild #34, ...
      • Kleine Bilder: Bild #2, Bild #3, Bild #4, Bild #5, Bild #7, Bild #8, Bild #9, Bild #10, Bild #11, Bild #12, Bild #13, Bild #14, Bild #16, ...


      Ich denke es ist klar, was ich meine. Wenn ihr all diese Punkte befolgt, so solltet die Gallery jetzt wie unten gezeigt aussehen. Viel Spass mit Eurem neuen Design!
    Angehängte Dateien
    Forenregeln | Contrexx-Wiki | Contrexx-Themes

  • #2
    Da stoße ich da doch heute eher zufällig drauf...
    Wollte nur was wg dem Platzhalter für die Startseite von der Gallery suchen...

    Geile Anleitung, wenn auch älter...

    --> ABER: Das müsste sogar in der V4 funktionieren... Die Codestelle in der Zeile 1041 habe ich bereits gefunden.


    ***

    Was ich gesucht hatte: Zufallsbild auf der Startseite: Platzhalter: -->
    Code:
    [[GALLERY_RANDOM]]
    ---->>>> Betriebsferien vom 27.08. - 22.09.2019 <<<<----

    Viele Grüße Markus
    ... der Römer aus dem ältesten Dorf "Krefeld´s" :-)


    Kenne contrexx V.1, V.2, V.3, V.4... | ... und ab sofort auch V.5 :-)

    Offizieller "cloudrexx Partner" :-)

    Kommentar

    Lädt...
    X