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.
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:
Link und Trackback zu dieser Seite
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
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
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.
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.
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.
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
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.
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
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!
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
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“
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.
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…