SwissChecklist

Checklist: Galerie-Bausteine konfigurieren

Erstelle deine eigene Galerie mit dieser Checkliste.
  • Download Basispaket

    Show Details Show Substeps Show Substeps Show Substeps
  • Lade das Basispaket herunter

    Show Details Show Substeps Show Substeps Show Substeps
    Basispaket herunterladen:
    Basispaket
  • Bilderupload jQuery

    Show Details Show Substeps Show Substeps Show Substeps
  • jQuery Datei auf deiner Seite einbinden

    Show Details Show Substeps Show Substeps Show Substeps
    Diese Datei einbinden ->/js/Imageupload/imageupload.js
    z.B.
    <script type="text/javascript" src="/Portals/_default/Skins/DNN Gallery/js/Imageupload/imageupload.js"></script>
  • Form and List installieren

    Show Details Show Substeps Show Substeps Show Substeps
    Zuerst muss das Modul "Form and List" installiert werden.
  • Aktiviere das Modul "Form and List" unter -> System -> Module

    Show Details Show Substeps Show Substeps Show Substeps
  • Modul konfigurieren (Form and List Configuration)

    Show Details Show Substeps Show Substeps Show Substeps
  • Erstelle zwei neue Felder:

    Show Details Show Substeps Show Substeps Show Substeps
    • Bild hochladen (Type: Bild)
    • Bildbeschreibung (Type: Langtext(HTML))

    Setze beide auf "Required".
  • Unter "More Column Settings" kannst du den Thumbnails (Klein-Ansicht der Bilder) eine maximale Höhe und Breite geben

    Show Details Show Substeps Show Substeps Show Substeps
    *Achtung: Bei der Galerie ImageFlow, bitte keine Massen angeben!
  • Unter "List settings" fügst du das XSLT Template hinzu

    Show Details Show Substeps Show Substeps Show Substeps
    • Wähle "XSLT using self made or generated stylesheets".
    • Danach lade die Datei Gallery.xsl hoch.

    Achtung: Für die Galerien
    • ScrollGallery
    • ImageFlow
    • Neues Fenster

    braucht es ein anderes XSLT Template! (mehr unter Thumbnail- oder Gross-Ansicht)
  • Nun Speichere dies

    Show Details Show Substeps Show Substeps Show Substeps
    "Save Configuration and Return"
  • Thumbnailer installieren

    Show Details Show Substeps Show Substeps Show Substeps
  • Thumbnail.ashx im ~/Porals/_default/ Ordner einfügen

    Show Details Show Substeps Show Substeps Show Substeps
  • Binde den Thumbnailer auf deiner Seite ein

    Show Details Show Substeps Show Substeps Show Substeps
    z.B.
    <script type="text/javascript" src="/Portals/_default/Skins/DNN Gallery/js/Thumbnailer/Thumbnailer.js"></script>
  • web.config anpassen

    Show Details Show Substeps Show Substeps Show Substeps
    Füge
    <!-- Gallery Thumbnailer -->
     <add key="ToSIC Gallery ImagesPath" value="~/Portals/0/" /> (passe den Ordnerpfad, in welchem sich die Bilder befinden, an)
     <add key="ToSIC Gallery MaxSize" value="800" />

    in der web.config unter appSettings ein.
  • Thumbnailer anpassen

    Show Details Show Substeps Show Substeps Show Substeps
    Damit der Thumbnailer Problemlos funktioniert, müssen in der Datei "Thumbnailer.js" noch Anpassungen gemacht werden!

    var imagelink = link + img.attr("src").replace("/DesktopModules/UserDefinedTable/MakeThumbnail.ashx?image=%2fPortals%2f0%2f", "").replace("&w=200&h=200&PortalId=0", "").replace("&w=100&h=100&PortalId=0", "").replace("/Portals/0/", "");

    Passe die Grösse der Thumbnails an(&w=200&h=200&)!
    • Füge die Grösse ein welche du im "Form and List" Modul angegeben hast.

    Passe den Bild Ordner an(/Portals/0/)!
    • Die Bilder befinden sich in einem Ordner. Gebe den richtigen Pfad ab /Portals... an!
  • Thumbnail-Ansichten

    Show Details Show Substeps Show Substeps Show Substeps
  • Füge einige Test-Bilder ein

    Show Details Show Substeps Show Substeps Show Substeps
  • Zoom-Mouseover

    Show Details Show Substeps Show Substeps Show Substeps
  • Scroll-Galerie

    Show Details Show Substeps Show Substeps Show Substeps
  • Mini-Thumbnails

    Show Details Show Substeps Show Substeps Show Substeps
    Nicht für Konfigurationen mit Grossansichten gedacht!
  • ImageFlow

    Show Details Show Substeps Show Substeps Show Substeps
    Achtung: Kann nicht mit anderen Galerie-Bausteinen konfiguriert werden!
  • Grossansichten

    Show Details Show Substeps Show Substeps Show Substeps
  • Lightbox einfügen

    Show Details Show Substeps Show Substeps Show Substeps
  • Mouseover-Ansicht

    Show Details Show Substeps Show Substeps Show Substeps
  • Ansicht in neuem Feld

    Show Details Show Substeps Show Substeps Show Substeps
  • Neues Fenster

    Show Details Show Substeps Show Substeps Show Substeps
  • Mouseover-Beschreibung

    Show Details Show Substeps Show Substeps Show Substeps
    Achtung: Dies ist nicht für alle Galerien möglich!
  • Mouseover-Beschreibung einbinden

    Show Details Show Substeps Show Substeps Show Substeps
    Paket herunterladen
    Bildbeschreibung Paket
  • Neuer Schritt

    Show Details Show Substeps Show Substeps Show Substeps
  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
Use this Checklist

Preview/Print

Use

Change

Sort