Webdesign Tipps

Joomla Bildergalerie aus Google Fotos und Google Plus Beiträgen mit Ozio Gallery

Veröffentlicht in Joomla 3.x

Bilder folgen in Kürze!

Für einen Webdesign Kunden aus Neustadt i. H. habe ich ein Fotoalbum mit seinen eigenen Google Fotos in seine Homepage eingebunden. Die Homepage des Webdesign Kunden aus dem Bereich Gartenbau ist mit dem Content-Management-System Joomla 3.x erstellt und die Bilder aus dem Google Fotos Album sollen ohne weitere Anpassungs-Arbeiten (im Bildbearbeitungsprogramm oder in Joomla) automatisch auf der Joomla Website dargestellt werden. Der Kunde möchte also die Bilder nicht extra bearbeiten und dann umständlich hochladen.

Diese Aufgabe lässt sich wunderbar mit der Joomla 3.x Erweiterung Ozio Gallery realisieren. Bilder aus Google Plus und Google Fotos (und auch aus anderen Quellen wie Flicker und sogar Youtube-Videos) können mit Ozio Gallery in Beiträgen und Modulen ausgegeben werden. Dabei wird automatisch die Dateigröße der Bilder so verkleinert, dass die Ladezeiten der Bildergalerie gering bleibt und die Bildgröße für den jeweiligen Monitor optimiert ist. Die Anordnung der Bilder geschieht responsive, passt sich also dem Monitor an und sieht auf allen Ausgabegeräten (PC, Tablet, Handy/Smartphone) gleich schick aus.

Die Ozio Gallery Installation besteht aus der Komponente und einem Plugin. So kann ein Album sowohl als eigene Contentseite über einen Menüpunkt ausgegeben werden als auch in beliebigem Content (Beitrag oder Modul) über das Plugin.

Bei der folgenden Anleitung zeige ich nur die Einbindung von Bildern aus Google Fotos und gehe davon aus, dass Ozio Gallery bereits installiert ist und ein Google-Account mit Google Fotos vorhanden ist.

Um nun eine Google Bildergalerie in Joomla 3.4 zu erstellen benötigt man:

  • eine Joomla Website mit installierter Ozio Gallery Erweiterung
  • einen Google Fotos Account

Und so gehts: Bildergalerie erstellen

1. Album in Google Fotos einrichten

  • Zuerst meldet man sich in seinem Google-Konto an und wechselt dann zu Google Fotos und dort dann in den Bereich Fotos.

  • Wenn die Fotos für das gewünschte Album noch nicht hochgeladen sind, so können diese jetzt in Google Fotos hochgeladen werden:
    • Dazu auf die kleine schwarze Wolke klicken und die Fotos auf dem lokalen PC auswählen und hochladen.
  • Um ein neues Album zu erstellen gibt es zwei Möglichkeiten:
    • Bilder auswählen und mit diesen ein neues Album erstellen
      Im Bereich Fotos kann man ein Bild markieren, indem man mit der Maus über die linke obere Ecke des Bildes fährt und den dann erscheinenden Kreis/Haken klickt. So kann man beliebig viele Bilder markieren, um dann für alle eine gemeinsame Aktion zu wählen. Oben rechts wählt man nun das mittlere Symbol, also das Plus-Zeichen, wählt dort Album aus und schließlich "Neues Album". Nun wird ein neues Album erstellt, dem man noch einen eigenen Namen geben kann. Nun erscheint das neue Album im Bereich Alben in Google Fotos.
    • erst das Album erstellen, dann Fotos zuweisen
      Im Bereich Alben oben rechts neben dem Suchen-Feld auf das Plus-Zeichen klicken, Album auswählen (nicht geteiltes Album!), Fotos wie oben beschrieben markieren und dann Fertig (oben rechts) klicken.

2. Ozio Gallery einrichten

Ruft man die Komponente selbst über das Menü im Joomla-Backend auf (Komponenten -> Ozio Gallery), so erhält man nur Informationstexte zu Ozio Gallery. Auch über den Button "Optionen" oben rechts findet man ausser zu Berechtigungen keine weiteren Einstellungsmöglichkeiten. Alle Einstellungen werden im Menüpunkt vorgenommen.

Ozio Gallery als Menüpunkt

Um ein Google Fotos Album zu verknüpfen legt man zuerst einen neuen Menüpunkt an und wählt als Menüeintragstyp die Ozio Gallery. Hier hat man dann verschiedene Galerie Oberflächen zur Auswahl:

  • Skin Nano: zeigt Fotos von Google Plus, Google Fotos oder Flicker
  • Skin Video/photo light Gallery: zeigt Videos von Youtube oder Fotos von Google Plus
  • Skin jGallery: zeigt Fotos von Google Plus
  • Albenliste: Zeigt alle freigegebenen und aktiven Alben von Google Plus oder Google Fotos
  • Karte der Bilder: zeigt die Karte von Google Maps mit den Orten der Album-Bilder entsprechend der gespeicherten Geo-Location.
  • Skin Fuerte: zeigt Fotos von Google Plus oder Google Fotos


Ich verwende vorerst die Auswahl Skin Nano und wechsel dann zur Registerkarte Optionen.

  • Unter Storage type wähle ich Google Photo/Google+

  • Unter User ID muss die User Id vom Google-Konto angegeben werden.

    Wenn man diese nicht weiß, so kann man sie folgendermaßen ermitteln und eintippen:
    • Google Plus im Browser aufrufen (https://plus.google.com) und in das eigene Konto anmelden
    • Das eigene Profil aufrufen
    • User-ID aus Adresszeile des Browsers ablesen (siehe rote Markierung im Bild).

    Oder wenn man bereits in sein Google-Konto angemeldet ist kann Ozio Gallery die ID auch eigenständig ermitteln:
    • Dazu die voreingestellte ID (diese ist direkt von Ozio und kann zum Testen verwendet werden) aus dem Eingabefeld löschen und den Button rechts daneben klicken.
    • Jetzt öffnet sich ein Popup, in dem man sein Google-Konto auswählen kann (besitzt man mehrere, so werden alle angezeigt).
    • Nach einem Klick auf das gewünschte Konto wird die Google User ID automatisch in das entsprechende Eingabefeld im Joomla Backend eingetragen.
      Achtung: Sollte das nicht funktionieren, dann einfach den Browser wechseln. Bei mir klappte dies nicht mit Firefox, wohl aber mit Google Chrome!
  • Unter Album List muss nun das gewünschte Fotoalbum aus dem Google Fotos Account ausgewählt werden:

    Klickt man in das Eingabefeld, so öffnet sich die Liste der Alben, die unter der oben eingegebenen User-ID gespeichert und freigegeben sind. Hat man ein neues Album erstellt und dieses wird nicht angezeigt, so geht man folgendermaßen vor:
    • Den Button rechts neben dem Eingabefeld (Zahnradsymbol) drücken und es erscheint ein Popup-Fenster, in dem man sein sein Google-Konto auswählen kann (besitzt man mehrere, so werden alle angezeigt).
    • Nach einem Klick auf das gewünschte Konto öffnet sich ein weiteres Fenster, in dem alle gespeicherten Google Alben gelistet sind.
      Achtung: Sollte das nicht funktionieren, dann einfach den Browser wechseln. Bei mir klappte dies nicht mit Firefox, wohl aber mit Google Chrome!
    • In dieser Liste das neue Album auswählen und "Make Public" klicken, anschließend OK klicken. Jetzt erscheint das neue Album in der Album List und kann ausgewählt werden.
  • Wird nun der neue Menüeintrag über das Frontend aufgerufen, so sollte das Album als Fotogalerie dargestellt werden. Hat man einmal etwas im Google Album geändert, z. B. weitere Fotos hinzu gefügt, so dauert es ein wenig, bis die Änderungen auch bei der Ozio Gallery in Joomla ankommen. Also einfach ein bisschen warten.

Ozio Gallery im Modul oder Beitrag

Möchte man eine Foto-Galerie nicht als Menüpunkt, sondern innerhalb eines Modules oder Beitrages anzeigen, so verwendet man dazu das Ozio Plugin. Dieses ist nach der Installation automatisch aktiviert und kann direkt verwendet werden.

An der betreffenden Stelle im Modul Eigene Inhalte (oder im Beitrag) muss die Referenz zur Ozio Gallery folgendermaßen angegeben werden:

{oziogallery 122}

 

Um diesen Code zu erzeugen stellt der Hersteller einen eigenen Button im Content-Editor zur Verfügung, der direkt nach der Installation von Ozio Gallery automatisch unterhalb des Editor-Fensters erscheint. Klickt man auf diesen, so erscheint ein Popup-Fenster, in dem man die gewünschte Galerie aus allen mit Ozio verknüpften Galerien auswählen kann. Nach dem Klick erscheint der benötigte Code direkt an der Stelle, an der der Cursor steht.

Jetzt muss noch in den Moduloptionen die folgende Einstellung gewählt werden:

Inhalte vorbereiten: Ja

 

Es gibt noch eine Vielzahl von Einstellungsmöglichkeiten innerhalb eines Ozio-Menüpunktes und die Komponente bietet noch einige interessante Möglichkeiten, die hier wegen des Umfanges nicht detailliert beschrieben werden. Bei starker Nachfrage und genügend Kapazitäten schreibe ich aber gerne eine Fortsetzung der Anleitung.

 

Weitere Möglichkeiten der Ozio Gallery

  • Anzeige von Google Maps Karten entsprechend der Geo-Location von Fotos
  • Anzeige von geschachtelten Alben
  • Anzeige von Albumtitel und Bildbeschreibung
  • Anzeige von zusätzlichen Bildinformationen
  • Verschiedene Arten der Galerie-Darstellung

 

Links

Ozio Gallery Download bei Joomla Extensions
http://extensions.joomla.org/extensions/extension/photos-a-images/galleries/ozio-gallery

Ozio Gallery Homepage (nur englisch verfügbar)
http://www.opensourcesolutions.es/en/ext/ozio-gallery.html

Ozio Gallery Demo
http://www.opensourcesolutions.es/en/ext/ozio-gallery/demo.html

Google Fotos
https://photos.google.com/

Unsichtbarer Pinterest-Link erscheint plötzlich im Quellcode von Beiträgen

Veröffentlicht in Joomla 3.x

Bei meinem aktuellen Joomla Webdesign Projekt hatte ich plötzlich das Phänomen, dass im Quellcode von Beiträgen ein Code mit einem unsichtbaren (hidden) Link zu Pinterest erschien. In diesem Beitrag kam auch die Zeichenfolge "base64" vor, wodurch ich im ersten Moment an einen Hacker-Angriff gedacht habe.

Ich habe dann den Code im Backend mal entfernt und den Beitrag gespeichert. Wenn ich dann den Beitrag erneut geöffnet habe und in den Quellcode geschaut habe, so war der Code gleich wieder da.

Der Code sah ungefähr folgendermaßen aus:

<p><a href="//de.pinterest.com/pin/create/extension/" style="height: 20px; width: 40px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; background-color: transparent; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAYAAAD/Rn+7AAADU0lEQVR42s2WXUhTYRjHz0VEVPRFUGmtVEaFUZFhHxBhsotCU5JwasEf1EWEEVHQx4UfFWYkFa2biPJiXbUta33OXFtuUXMzJ4bK3Nqay7m5NeZq6h/tPQ+xU20zugjOxR/+7/O8539+5znnwMtNTExwJtMb3L/fiLv3botCSmUjeCaejTOb39AiFothfHxcFIrHY8RksZjBsckJcOIRMfFsHD/SsbExUYpnI8DR0dGUGjSb0byhEJp5Uqg5CTSzc2CQleJbMEj9/ywBcGRkJEk9DQqouEVQT1sK444yWI9UonmTjGqauVLEIlHa9x8lAMbj8SSpp0rwKGMVvg8P46vbg0C7na8z8JsMcgHe7jlEa+edRhiLy8n/TUMfu6EvLElk+U0WtGwrTrdfAGQf5J8iiK4LVzDU28t8JtMSocf8E+l68myaNFXm/6rXslLK7ay5TOunuRvZWpJuvwAYjUaTpOIWoquuAZ219RTaxKYp9BbjycoN5FvL9qH9TBX5rvoGdJythvXYSTxdtRnWylO/ZdqrLsGwszzhWQ593z2KlAwCYCQSSZJ6ehZ0W7bD9VBLgN0NCqr3qR7R2rBrL3pu3Sb/7nDlz2uy6cG0OXk0GTbZXzNp8trsPAQdTj6frlWzN2DcXZGKQQAMh8NJ6rpyHe+PnkCr/CAFdZyvpfpjuvkifLF9wIt1Wwlo0OHie1RvWrxs93RjzfzliTzPKz3ltB0/Tevmwp14wGUgHAzSOoUEwFAolFaaBSuhnslPRkJexUJtZ6v5HtUeLswl33n1BgEY5fvhs9sJ3FAiT+QYyyvoAQJuD0KBAFRTJNAuz5/s3gJgMBhMJwrVFRThM5tY5zUF/A4X1f2fvQTRLCuBreoim0YmAbqNJryvPEXeeq46kaNdkQ/1HCncbJKPs9ZSv2VHGfWsZ2hfkhKAfr8/pdxWKx4wwD69PmVfNSOL+lr2w+gYqHpWDtXt1xad8AMlWU0e1lqLd/APRHoP8AJqWrQG9gYxcPMsvSJUvAA4MDKTUJ7MZLaVy8v+qT21tcDx/OemePr0RTkNrur4A6PP5xCgBsL+/X4wiQDpuuVxOeL1eMYmYeDY6sOp0z+B0OuHxeEQhxkJMFosJiSO/UinOI/8Pc+l7KKArAT8AAAAASUVORK5CYII=');">
</a></p>

Ursache für diesen Effekt ist ein Addon im Firefox-Browser namens "Pin it Button". Mit diesem Addon ist es möglich, beliebiger Fotos auf Webseiten direkt auf der eigenen Pinnwand bei Pinterest abzulegen.

 Webdesign Joomla 3 Tipp: Unsichtbarer Pinterest-Link erscheint plötzlich im Quellcode von Beiträgen

Das Deaktivieren dieses Addons (Achtung, anschließend Browser neu starten!) bewirkte dann, dass der Code aus dem Beitrag verschwand.


Jetzt sieht auch der Quellcode der Homepage wieder schick aus, alles funktioniert und der Webdesign Kunde ist zufrieden mit seiner Webdesignerin :-).

Joomla Update (Migration) von 2.5.28 auf 3.4.1 erzeugt 1091 Fehler

Veröffentlicht in Joomla 3.x

Für einen Webdesign Kunden sollte ich auf seiner Homepage eine Joomla Migration (eigentlich ist dies ja keine Migration sondern ein Update) von Version Joomla 2.5.22 auf die aktuelle Version Joomla 3.4.1 durchführen. Insgesamt besitzt dieser Kunde 7 Homepages mit Joomla Installationen in der gleichen Version. 6 davon unterscheiden sich im Webdesign kaum voneinander und haben eine nahezu identische Joomla-Installation. Sie ließen sich reibungslos migrieren. Bei der letzten Homepage jedoch hagelte es dann Fehlermeldungen.

Ich habe auf der Website zuerst das Joomla Update von 2.5.22 auf 2.5.28 durchgeführt. Anschließend Joomla auf Kurzzeitsupport umgestellt und das Joomla Update von Version 2.5.28 auf Version 3.4.1 über die Schaltfläche im Kontrollzentrum durchgeführt. Das Joomla Update bricht bei ca. 86% ab und erzeugt im Backend den folgenden Fehler:

Webdesign Joomla Tipp: 1091 Fehler nach Joomla Update

1091 – Es ist ein Fehler aufgetreten
Can't DROP 'imagepos'; check that column/key exists SQL=ALTER TABLE `itbasis_contact_details` DROP `imagepos`;


Im Frontend der Website erscheint eine 404-Meldung als html-Quelltext (hier in Layout-Ansicht dargestellt).
404 Fehlermeldung Joomla Migration


Nachdem diverse eigene Lösungsansätze und auch Tipps anderer Webdesigner keine Abhilfe schaffen konnten, hat mir dann doch noch ein Tipp bei stackoverflow weitergeholfen:
http://stackoverflow.com/questions/20738790/migrate-from-joomla-2-5-17-to-joomla-3-2-1-failed

Mit Hilfe dieser Informationen bin ich dann folgendermaßen vorgegangen:

  1. Joomla-Update auf Version 2.5.28 und Update aller installierten Komponenten soweit möglich. Nicht Joomla-3-kompatible Erweiterungen löschen.

  2. Das Verzeichnis "updates" im Ordner root/administrator/components/com_admin/sql/ löschen (root durch den eigenen Serverpfad ersetzen!).

  3. Jetzt das Joomla-Update über das Kontrollzentrum durchführen
    Webdesign Joomla 3 Tipp: Homepage migrieren Joomla Update im Kontrollzentrum

    -> es erscheint wieder nach 86% die bekannte Fehlermeldung 1091 (s.o).

  4. phpMyAdmin aufrufen, die Datenbank öffnen und über folgenden SQL-Befehl die Tabelle #__content_types manuell anlegen (#_ durch das eigene Tabellen-Präfix ersetzen!).

    CREATE TABLE IF NOT EXISTS `#__content_types` ( `type_id` int(10) unsigned NOT NULL AUTO_INCREMENT, `type_title` varchar(255) NOT NULL DEFAULT '', `type_alias` varchar(255) NOT NULL DEFAULT '', `table` varchar(255) NOT NULL DEFAULT '', `rules` text NOT NULL, `field_mappings` text NOT NULL, `router` varchar(255) NOT NULL  DEFAULT '',`content_history_options` varchar(5120) COMMENT 'JSON string for com_contenthistory options', PRIMARY KEY (`type_id`), KEY `idx_alias` (`type_alias`)) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=10000;

    Webdesign Joomla 3 Tipp: Homepage migrieren Datenbank

  5. Direkt über die Homepage URL die Funktion "Datenbank reparieren" ausführen (meine-homepage.de durch eigene URL ersetzen!):
    www.meine-homepage.de/administrator/index.php?option=com_installer&task=database.fix
    Webdesign Joomla 3 Tipp: Homepage migrieren Datenbank reparieren

  6. direkt über die Homepage URL die Funktion "Erweiterungen überprüfen" ausführen (meine-homepage.de durch eigene URL ersetzen!):
    administrator/index.php?option=com_installer&view=discover&task=discover.refresh
    und alle Erweiterungen überprüfen/installieren
    Webdesign Joomla 3 Tipp: Homepage migrieren Erweiterungen überprüfen


Nun sieht im Frontend der Website alles wieder schick aus, aber das Backend ist noch ein bisschen durcheinander. Hier ist noch das Bluestork-Template aus Joomla 2.5 zugewiesen. Dies muss durch das Joomla 3 Template Isis ersetzt werden.

In der momentanen Backend-Ansicht funktioniert das leider nicht; rufe ich das Isis-Template über Erweiterungen – Templates auf, so ist es bereits als Standard-Template ausgewählt und auch ein erneutes Speichern bringt keinen Erfolg. Also muss die Einstellung direkt in der Datenbank vorgenommen werden:

  1. phpMyAdmin aufrufen und Datenbank öffnen

  2. Tabelle #__template_styles suchen und öffnen
    hier sieht man bereits, dass in der Spalte "home" das Bluestork-Template durch die Eins zugewiesen ist. Hier muss beim Bluestork die Eins durch eine Null ersetzt werden und beim Isis genau anders herum
    Webdesign Joomla 3 Tipp: Homepage migrieren Datenbank Templates

  3. In Zeile Bluestork auf bearbeiten klicken und die Eins durch eine Null ersetzen, anschließend mit OK speichern
    Webdesign Joomla 3 Tipp: Homepage migrieren Datenbank Template Bluestork

  4. In Zeile Isis  auf bearbeiten klicken und die Null durch eine Eins ersetzen, anschließend mit OK speichern
    Webdesign Joomla 3 Tipp: Homepage migrieren Datenbank Template Isis

  5. Das Bluestork-Template kann anschließend deinstalliert werden, da es unter Joomla 3 sowieso nicht funktioniert.


Jetzt sieht auch das Backend der Homepage wieder schick aus, alles funktioniert und der Webdesign Kunde ist zufrieden mit seiner Webdesignerin :-).

Template Override für K2 Artikel Liste im Backend

Veröffentlicht in Joomla 3.x

Im Backend von K2 haben einem Webdesign-Kunden bei der Ansicht der Artikel als Liste (index.php?option=com_k2&view=items) die angezeigten Felder nicht ausgereicht. Gerne hätte er noch den Artikel-Alias oder andere Felder angezeigt. Dafür habe ich per Template-Override eine weitere Spalte in die Artikelübersicht eingeblendet.

 

Das Template Override dafür gelingt folgendermaßen:

/administrator/components/com_k2/views/items/tmpl/default.php

Diese Datei duplizieren und kopieren nach:

administrator/templates/MY_ADMIN_TEMPLATE/html/com_k2/items 

wobei  MY_ADMIN_TEMPLATE durch den Namen des Admin-Templates (in meinem Fall isis) ersetzt werden muss.

 

Anschließend nur noch die gewünschten Änderungen in die default.php einarbeiten.

Das gleiche funktioniert auch mit allen anderen K2-Views und natürlich auch mit anderen Komponenten.

Akeeba Backup Installation auf XAMPP erzeugt Fehler

Veröffentlicht in Joomla 3.x

In einem Webdesign-Projekt mit lokaler XAMPP Joomla-Installation erzeugt der Versuch, Akeeba Backup zu installieren, die folgende Fehlermeldung:

„Es gibt einen Fehler beim Hochladen dieser Datei auf den Server.“

Dies liegt daran, dass die Upload-Variable in der php.ini des XAMPP zu klein eingestellt ist. Die Voreinstellung erlaubt maximal 2 MByte. Zur Lösung des Problems einfach den Wert auf 10 MByte erhöhen, dann funktioniert die Installation. Anschließend unbedingt den XAMPP neu starten, damit die Änderung aktiv wird.

Die php.ini Datei liegt unter

root\xampp\php\php.ini

wobei "root" den Speicherort des XAMPP auf der lokalen Festplatte angibt, zum Beispiel C:

Die betreffende Variable trägt den Namen upload_max_filesize. Einfach danach suchen und den Wert 2M durch 10M ersetzen (bei mir in Zeile 922).

also: upload_max_filesize=10M

Ich habe auch gleich noch die Variable darunter für die Anzahl der gleichzeitig hochzuladenen Dateien von 20 auf 100 erhöht, man weiß ja nie...

also: max_file_uploads=100

Am Ende den Neustart des XAMPP nicht vergessen!