TTG Webgalerien CE2 aus dem Legokasten

Montag, 02. Januar 2012

Noch kurz vor dem Jahreswechsel hat Matt (Matthew Campagna)¬†von the turning gate¬† eine ganze Familie neuer Webmodule f√ľr Lightroom herausgebracht, die sogenannten¬†CE2¬†oder Core Elements 2¬†¬†Galerien. Jeder stellt aus dem Angebot ¬†die Komponenten zusammen, die er nutzen m√∂chte. Deshalb die √úberschrift, wie bei Lego passt ein Stein zum anderen.

Auch Fotografen ohne Kenntnisse von Webdesign, HTML, PHP und Javascript können damit erfolgreiche interaktive Webauftritte erstellen. Über die kombinierbaren Module bezahlt man immer nur das was man auch nutzt.

Die TTG CE2 Familie besteht aus

  • TTG CE2 Pages – erstellt das Ger√ľst einer Website bestehend aus php Seiten, zu der sich sehr einfach Webgalerien einf√ľgen lassen
  • TTG CE2 Highslide Gallery – Webgalerie basierend auf der besten Lighbox Alternative HighSlide
  • TTG CE2 Horizon, eine Webgalerie ohne Thumbnails f√ľr horizontsales bzw. vertikales Scrollen
  • TTG CE2 Photoswipe Gallery, Webgalerie inspiriert von den mobilen Touch Bildschirmen
  • TTG CE2 Auto Index, wer Pages nicht hat, kann das zum automatischen hizuf√ľgen von Webgalerien zu einer √úbersichtsseite benutzen
  • TTG CE2 Cart, komplettes Shoppingsystem mit Warenkorb und verschiedenen Bezahlmethoden
  • TTG CE2 Theme for WordPress, WordPress Themengenerator passend zu den Webgalerien

Mein Test von TTG CE2 Pages, TTG CE2 Highslide Gallery und TTG CE2 Horizon

Um ein Gef√ľhl daf√ľr zu bekommen, ob die Versprechen wirklich erf√ľllt werden, habe ich heute mal versucht eine komplette Webseite mit verschiedenen Webgalerien und statischen Seiten aus den Komponenten zusammenzustellen.

Beipielwebseite

Hier schon mal vorab der Link zur Webseite, die das  Ergebnis meines Tests zeigt. Hier bekommt man eine Vorstellung, welche Art von Seiten sich mit den CE2 Webgalerien erstellen lassen.

Formatierte Texte ohne HTML

Um auch ohne HTML-Kenntnisse statische Inhalte der Webseite zu erstellen, setzt  Matt auf J.Grubers Markdown.

Man erstellt simple Textdateien und bestimmt mit einer Handvoll einfacher Regeln, wie dieser Text dann im Browser erscheinen soll: Soll beispielsweise ein Wort fett dargestellt werden setzt man einfach zwei Sternchen davor und dahinter. (**fett**)

Die Texte der einzelnen Seiten erstellt man sich am besten nach diesen Regelen in einem Editor und speichert sie sich, um sie dann sp√§ter mit ausschneiden und einf√ľgen in Lightroom zu verwenden.

Grundger√ľst mit TTG CE2 Pages

Mit dieser Webgalerie kann eine Webseite mit folgenden Einzelseiten erstellt werden:

  • Startseite mit integrierter Galerie (Galleria, Photoswipe, TTG Horizon, Einzelfoto)
  • Webgalerien, eine Seite die automatisch ein Inhaltsverzeichnis aller hochgeladenen Webgalerien des Unterverzeichnis galleries erstellt und ausgibt.
  • Blog, verlinkt zu einem WordPress Blog der optional sogar mit einem passenden TTG CE2 WordPress Thema erstellt werden kann
  • statische Webseiten, 3 solche (services, info, about) k√∂nnen mit pages erstellt werden, 3 weitere k√∂nnen verlinkt werden
  • Kontakt, eine Webseite mit Formular, das per email an eine definierbare Emailadresse verschickt wird.
Zun√§chst w√§hlt man in Lightroom die Fotos aus. Fotos 1 bis 6 werden als Seitenfotos der Unterseiten verwendet, ab Fotos 7 werden die Fotos f√ľr die integrierte Fotogalerie auf der ersten Seite verwendet.
Dann muss man sich Schritt f√ľr Schritt durch die gef√ľhlten 1000 Einstellungsm√∂glichkeiten der Webgalerie k√§mpfen. ¬†Die √úberschriften der Unterbereiche Siteinformationen, Farbpalette, Erscheinungsbild, Bildinformationen, Ausgabeeinstellunen und Einstellungen f√ľr das Hochladen stimmen zwar nicht so ganz mit den Einstellungen darin √ľberein, aber der Aufbau ist in sich logisch und man kann sie systematisch von oben nach unten abarbeiten.
Empfehlenswert ist es, Zwischenstände immer wieder als Vorlagen zu speichern, da man schon einige Zeit einrechnen muß, bis alles so eingestellt ist, wie man sich das vorgestellt.

Einstellungen der Optionen

Im Einzelnen gehe ich nicht auf die vielen Optionen ein, das w√ľrde den Rahmen hier sprengen. ¬†Trotzdem zeige ich als Beispiel der Einstellungsm√∂glichkeiten rechts einen Screenshot, damit man sich eine Vorstellung machen kann, welche Art von Optionen zur Verf√ľgung stehen.

F√ľr jemanden ohne CSS Kenntnisse ist¬†manche ¬†Bezeichnung von Optionen wie zum Beispiel „margin-top“ ¬†nicht leicht verst√§ndlich.

Die immense Anzahl von Optionen gewährleistet, daß man letztlich mit etwas Geduld genau die Webseiten erhält, die man braucht.

Die erzeugten Webseiten halten sich an neueste Standards wie HTML5 und CSS3 sind aber auch kompatibel zu alten Browsern. Da hat Matt wirklich sauberes Webdesigner Handwerk geleistet.

Doku und Hilfe

Braucht man Hilfe bei der Arbeit mit den Modulen, sollte man sich auf der Webseite von theturninggate.net umschauen. Die Webseite besteht im wesentlichen aus 4 Bestandteilen:

  • Blog mit Neuigkeiten, Tips, Tricks und Tutorials
  • Wiki mit der Dokumentation und den detailierten Anleitungen
  • Community das ist das Benutzerforum, in dem Fragen beantwortet werden und eine beachtliche Wissensdatenbank entstanden ist.
  • Shop, wo die einzelnen Lightroom Zusatzmodule gekauft bzw. kostenlos geladen werden k√∂nnen.

Zentrale Anpassungsmöglichkeit

Eine wichtige M√∂glichkeit, die das TTG CE2 System vorsieht, ist die zentrale php Datei phplugins mit erweiterbaren PHP Funktionen. Damit kann zum Beispiel das Men√ľ zentral angpasst/erweitert werden oder eine gemeinsame CSS Datei definiert werden, die f√ľr alle Seiten gilt, auch sp√§ter hinzugef√ľgte Galerien.

Also sollte man den Haken setzen und den richtigen Pfad eintragen. Hilfe dazu bekommt man auf wiki:phplugins

Fertige Pages hochladen

Sind die Seiten soweit fertig sollte man die Einstellungen als Vorlage speichern und die Seiten exportieren und auf den Server mit PHP Unterst√ľtzung hochladen, ausprobieren und notwendige Korrekturen vornehmen, bis die Seiten soweit in Ordnung sind.

Die Seite Webgalerien ist noch leer und mu√ü noch gef√ľllt werden.

Gallerien hinzuf√ľgen

Als erstes habe ich mich entschlossen, die TTG CE2 Highslide  zu probieren.

Highslide hat sich bei vielen meiner Webprojekte hervorragend bew√§hrt, es ist ein gro√üartiges Produkt, das seine Lizenzgeb√ľhr (Nicht kostenlos!) in jedem Fall wert ist.

Zun√§chst sucht man in Lightroom die Fotos f√ľr die Galerie aus. Am besten geht man den Weg √ľber eine Sammlung.

Im Arbeitsbereich WEB sucht man sich den Layoutstil ¬†TTG CE2 Highslide und beginnt wieder von oben nach unten die richtigen Einstellungen zu treffen. Der prinzipielle Aufbau des Einstellungsbaums ist genuso wie bei TTG CE2 Pages, so da√ü es diesmal viel schneller ging, die gew√ľnschte Galerieseite zu erhalten.

Richtig Freude kommt dann auf, wenn man nach dem Exportieren das gesamte Verzeichnis einfach per FTP das Unterverzeichnis¬†galleries¬†auf den Webserver √ľbertr√§gt und dann wieder die Seite Webgalerien aufruft. Jetzt ist dort ganz von selbst diese als erste Webgalerie mit Vorschaubild, Titel und Untertitel zum Anklicken bereit. so macht die Erweiterung einer Webseite um Galerien Spa√ü.

Auf gleiche Art habe ich dann noch eine andere TTG CE2 Highslide Galerie eingef√ľgt , zwei TTG CE2 Horizon Galerien und eine TTG CE Client Response Galerie. Passt alles klaglos zusammen, so wie man es sich w√ľnscht.

Bei allen habe ich auf die zentrale Verwaltungsm√∂glichkeit √ľber PHPlugins geachtet, siehe oben.

L√§stig ist, da√ü man viele gemeinsame Einstellungen wie das Men√ľ , die Farben etc bei jedem neuen Zusatzmodul wieder neu einstellen mu√ü. Abhilfe schafft da nur eine manuelle Bearbeitung der Vorlagendateien, die reine Textdateien sind. Matt beschreibt das Verfahren in einem Videoclip auf Youtube.

Sobald ich die Einstellungen angepasst hatte, habe ich jeweils gleich Vorlagen f√ľr die Wiederverwendung erstellt. Sollte jmeand Interesse an meinen Vorlagen haben, kann ich sie gerne zum Download ¬†bereitstellen.

Weitere Möglichkeiten

Es wird auch die Warenkorb L√∂sung TTG CE2 Cart angeboten, mit der sich wohl out of the box ein Webshop f√ľr die eigenen Fotografien einrichten l√§sst. Das habe ich noch nicht selbst getestet, es soll aber bestens funktionieren.

Ganz neu kann man auch ein Thema f√ľr WordPress bekommen, das dann auch nahtlos zum Rest passt.

Weitere Galerien sollen folgen.

Fazit

Mich hat das CE2 Baukastensystem √ľberzeugen k√∂nnen.Eine gewisse Einarbeitungszeit mu√ü man einplanen. Sobald man aber seine Vorlagen erstellt hat, kommt man sehr effektiv zu hochwertigen Ergebnissen. Man merkt den Webmodulen die langj√§hrige Erfahrung des Entwicklers Matt an.

Nur mit Lightroom, den Webmodulen und einem FTP Programm kann auch jemand ohne ein Webdesigner zu sein, oder einen Webdesigner zu beauftragen , einen Webauftritt erstellen, der sich sehen lassen kann.  Die Webseiten lassen sich dann kontinuierlich durch weitere Webgalerien erweitern.


Weiterlesen zum Thema:
Drucke diesen Artikel

16 Kommentare zu diesem Artikel

  1. Markus :

    Hallo Thomas,
    sehr gute Zusammenfassung von TTG, ich arbeite mich auch gerade in die Module ein. Der erste Wurf ist auch schon recht zufriedenstellend, aber sicherlich noch zu optimieren. Auf jeden FAll finde ich das Konzept auch sehr gelungen, gerade wenn man – so wie ich – wenig bis keine Ahnung von CSS etc. hat.

    Ich habe TTG Pages, Autoindex und Highslide Pro im Einsatz. Bei Youtube habe ich etliche Videos gefunden, in denen Matt die einzelnen Module erl√§utert, au√üerdem ist das Wiki auch gut aufgebaut. Und selbst mit meinem nicht √ľppigen Schulenglisch ist es recht gut verst√§ndlich.

    Trotzdem komme ich mit einigen Anleitungen nicht ganz klar, vielleicht kannst du f√ľr Aufkl√§rung sorgen (ich w√ľrde mich freuen)

    – wenn ich z.B. von einer Sammlung in der Bibliothek in die Webgalerie „CE2 Pages“ im Web-Modul wechsel, ist nur noch das erste Bild markiert und nicht mehr meine f√ľr die Homepage ausgew√§hlten Bilder (einzige M√∂glichkeit w√§re, nur die verwendeten Bilder in der Sammlung zu haben)
    – muss ich den Autoindex im Kapitel Galerie verwenden und dann f√ľr jede einzelne Galerie z.b. Highslide einstellen? Oder wie verfahre ich mit Autoindex?
    – Hast du die Galerien als Sammlung oder Webgalerie erstellt. Wenn ich das richtig sehe, werden durch die Sammlungss√§tze die Hierarchie „gebaut“ (also z.B. Galerie->Tiere->V√∂gel->Schreitv√∂gel), die dann durch Autoindex gezeigt wird und mit der Webgalerie „Schreitv√∂gel“ letztendlich die beinhalteten Bilder (z.B. Bilder von Reihern etc.). Hab ich das so richtig verstanden?
    – Welches Programm nutzt du, um nur die √Ąnderungen, die in TTG Pages am Design oder Inhalt gemacht wurden, auf den FTP-Server √ľbertragen werden? Macht ja keinen Sinn immer alles zu √ľbertragen.

    Sind doch einige Fragen zusammengekommen, aber vielleicht hast du ja den ein oder anderen Tipp f√ľr mich, damit ich meine Webseite irgendwann mal fertig bekomme ūüėČ

    Auf jeden Fall schon mal vielen Dank und sch√∂ne Gr√ľ√üe

    Markus

  2. Ich habe inzwischen auch Gelegenheit von Matthew bekommen das Shopping System TTG CE2 Cart zu testen.

    Was mich echt schwer beeindruckt hat daran, ist wie leicht es gelingt damit wirklich einen kompletten Webshop zu bauen inklusive der Abrechnung √ľber Paypal. Daf√ľr ist der Preis von 50$ f√ľr das Modul mehr als gerechtferigt!

    Hier könnt Ihr das mal ansehen, TTG CE2 Cart und TTG CE2 Highslide

  3. ezra :

    hallo Thomas Du hast geschrieben:

    „Sobald ich die Einstellungen angepasst hatte, habe ich jeweils gleich Vorlagen f√ľr die Wiederverwendung erstellt. Sollte jmeand Interesse an meinen Vorlagen haben, kann ich sie gerne zum Download bereitstellen.“

    was ich nicht herausfinde, ist wie ich die eigentlich fertigen Einstellungen unter TTG CE2 speichere. Es hat ja die M√∂glichkeit mit ctrl+r zu aktualisieren und dann l√§sst sich das ja auch exportieren oder sogar gleich hochladen. das hochladen lass ich sein, machs √ľber filezilla.

    nur wenn ich dann lightroom schliesse, dann wieder öffne und den import mache, sind alle Web-Einstellungen weg. Es muss alles wieder neu eingegeben werden. Gibt es da eine Möglichkeit, diese Informationen zu speichern. bzw. wieder aufzurufen?

    Gruss
    Ezra

    • Vorlagen sind da das Geheimnis des Erfolges!

      • Vorlagen lassen sich auch nach und nach immer wieder anpassen, indem man einen rechten mausklick auf die Vorlage macht und die Option „mit den aktuellen Einstellungen aktualisieren“ w√§hlt

        Einstellungen lassen sich exportieren und wieder importieren und können auf diese Weise an andere weitergegeben werden.

        • ezra :

          wow, das ging aber flott, vielen dank f√ľr diesen Beitrag!

          da habe ich noch eine frage und dann kann ich Рso hoffe ich mal Рschon bald meine seite veröffentlichen.

          Der text der einzelnen Seiten wie z.B. home, galleries etc. muss ja noch ge√§ndert werden. Leider habe ich kein Zugang zum Text. Habe bereits unter Fragments z.B. die Datei „about.html“ oder „index.html“ bearbeitet bzw. den text angepasst, was jedoch nichts brachte. Irgendwo in tutorial.de habe ich gelesen, dass das ganz einfach mit copy paste ginge… wo kann ich den Text einf√ľgen?

          Gruss und vielen Dank f√ľr die wertvollen Informationen!

          • Die Links der Navigation lassen sich unter „Site-informationen“ und „Navigation Hyperlinks“ (ziemlich in der Mitte) einrichten.

            • Textteil der Unterseiten

            Der Textteil der Unterseiten wird in TTG CE2 Pages definiert. Unter Farbpalette finden sich:

            -Home Page: The Block
            -Galleries Page: The Block
            -Services Page: The Block
            -Info Page: The Block
            -About Page: The Block
            -Contact Page: The Block

            Die Inhalte werden in Markdown geschrieben.

            • Anpassung f√ľr Fortgeschrittene PHPLUGINS

            Wer etwas PHP Kenntnisse hat und mehr Anpassungsmöglichkeiten braucht, sollte sich mit PHPLUGINS beschäftigen. Dies vereinfacht letztlich die Erstellung und auch nachträgliche Anpassung der Galerien

            Beispielhafte Tutorials

            Demos

  4. ezra :

    hallo thomas

    habe ja ttg CE2 pages. Es zeigt mir keine Bilder in der Gallerie an, sobald ich die Seite zum Provider hochgeladen habe. Habe dann den TTG XML Maker installiert. Nun habe ich ein Ordner Thumbnails und eine Datei (auf Root ebene) die autoindex.xml heisst. Die Bilder sind in Lightroom unter „Web“ sichtbar. Sobald ich das Zeugs uploade und die Seite anschauen will sind einfach keine Bilder vorhanden. Hast Du eventuell noch ein Tipp f√ľr mich?

    Eine ruhige Weihnachtszeit w√ľnsche ich Euch.

    • Thomas Menath :

      hallo so aus der Beschreibung kann ich nicht sagen, was die Ursache des problems sein kann.

      Kannst du mir das, was Du zum provider hochlädst, zippen und schicken.

      Dann schau ich mir es an .

      Alolen Lesern w√ľnsche ich auch eine sch√∂ne weihnachtszeit

  5. Helmut Kruse :

    Hallo,

    also irgendwie verstehe ich immer noch nicht ganz wof√ľr welches PlugIn da ist…

    Vielleicht schildere ich mal, was ich machen will:

    – eine zentrale Seite erstellen, die nur aus mehrere Gallieren besteht.
    – Die Navigation soll sich dann um die neuen Gallerien automatisch erweiteren.

    Was brauche ich dazu?

    K√∂nnte ich mir die Rahmenseite mit dem Men√ľpukt „Galerien“ selbst erstellen? Doch wie kommen erweitert sich dann der Men√ľpunkt Galerien? Oder brauch ich dazu nur „Auto Index“. Kann ich dann nur f√ľr die Galerien auch jede andere LR Vorlage nutzen?

    Danke!

  6. F√ľr das, was du willst, brauchst Du
    – eine oder mehrere TTG Foto Galerien und
    – TTG Autoindex, das daf√ľr sorgt dass eine √úbersichtsseite automatisch alle Galerien verlinkt.

    Statt Autoindex kann man auch TTG Pages verwenden, womit noch eine Satzseite, kontaktseite etc erstellt werden können.

    Empfehlen kann ich TTG Publisher, mit dem die nachträgliche Pflege erstellter Galerienu und das Ersteller neuer Galerien in einem einheitlichen Design besonders gut gelöst ist

  7. Helmut Kruse :

    hm..habe mir jetzt erst mal nur „CE 3 Gallery“ mal installiert.

    Da wir ja auch ne Seitenstruktur erzeugt, jedoch hier wohl nur mir einer Galerie. Ich denle ich werde die reinen Galerien damit erzeugen und mir dann eine √úbersichtsseite mit Navigation selber bauen…

    Wie bekomme ich es dann hin (bei TE3 GallerY), das die Vorschaubilder nicht bei Mouseover wieder so einen großen Rahmen haben.
    Das die Bilder im Grid ohne Rahmen angezeogt werden habe ich irgendwie geschafft.

    Siehe hier http://www.hkinteractive.de/Fotos/Zillertal_neu/

    Super wäre hier aber beim Weiterblättern mit Hilfe der Navigation in der Großansicht ein Transition-Effekt..so wie bei dem andern Style. Wie ließe sich denn sowas realisieren?

    • Es gibt den Parameter „background-color :hover“ vor dem man ein H√§ckchen setzen kann oder eben nicht.

      Ohne das H√§ckchen dort tritt der hover Effekt wenn man mit dem Mauszeiger √ľber einem Thumbnail ist, nicht mehr auf. Die Gr√∂√üe des Bereichs kann √ľber „Cell height“, „Cell width“ und „Cell margin“ eingestellt werden. bei einer Mischung aus Fotos im Hoch- und Querformat, gibt es aber keine M√∂glichkeit nur schmale Rahmen um die Bilder zu bekommen. nNur der „Gallery Style“ „Masonry“ erlaubt da sowas.

      Diese Einstellung findet man unter „Erscheinungsbild“, „Gallery/Thumbnail Grid“

  8. Helmut Kruse :

    ah ok…danke.

    Und irgendeinen Effekt bei diesem Theme f√ľr das bl√§ttern in der Vollbildansicht kann man nicht irgendwo einstellen?

    • Nein, die Galerie soll ja auch auf Telefonen und Tablets gut mit einem Fingerwisch bedienbar sein, da passt dann aber ein √úbergangseffekt nicht dazu.

      • Helmut Kruse :

        stimmt auch wieder…schade, dass man das bei der Masse der Einstellungen im keinen Theme eistellen kann, welchen √úbergangseffekt man will. Die Scriptbibliothek an sich sieht das vor…

^ Link und Trackback zu dieser Seite

TTG Webgalerien CE2 aus dem Legokasten

Thematisch passende Artikel:

Suchbegriffe zum Thema