Piwigo - własna internetowa galeria zdjęć dla każdego*

Piwigo own internet gallery

Prywatna strona www z zdjęciami w sieci niezależna od wszechobecnych molochów, domowy poligon doświadczalny zamiast flickr, tumblr, deviantart, flog, plfoto, instagram, pinterest, Facebook, Google+, Picasa, itd..., bo [>]prawie mój jest ten bit podłogi ;)

* jest znacznie łatwiejsza niż budowanie galerii online na "joomli" ;), nie zawsze wymaga flash, wykorzystuje też html, skrypty, css, php. Potrzebuję trochę więcej niż inne automatyczne serwisy, np trzeba wykonać instalacje, ustawić samemu ostrzeżenie o "[>] ciasteczkach" ### .

### Google PageSpeed Insights sugeruje potem aby umieścić skrypt w "head" - proste do wykonania jedynie kopiuj wklej.

Wersja Piwigo 2.8 obsługuje PHP 5.7 tzw "7" i jest szybciej, choć automatyczny RSS przestał działać, niestabilny może być także rozszerzenie FCK Editor

Materiały pochodzące od Piwigo których lepiej nie opiszę :

[>] Jak działa galeria Piwigo

[>] Wymagania techniczne

[>] Opis instalacji

Własne obserwacje i wnioski z używania w praktyce.

Serwer / Hosting / strona www - gdzie może działać ?

• Praktycznie każdy dostawca usług sieciowych wystarczy w tym nawet bezpłatny przy niewielkim ruchu.

(np pierwsza moja strona na cba.pl, tylko w nocy ok pierwszej ~ drugiej w nocy jest/była "chwilowa konserwacja" systemu, [>] free hostinger jedynie do statystyki Piwik używałem)

Piwigo wymaga aby wysyłane pliki nie posiadały:

• spacji w nazwach
• Polskich znaków ąężźćłóś, specjalnych i innych narodowych, jedynie zwykły alfabet.

To można szybko skorygować przez program Antrenamer lub inny program przetwarzający nazwy plików "hurtowo/wsadowo'.

Obsługa galerii działa w 30 językach. Choć np tag Łódź nie udało mi sie wprowadzić od razu, dopiero z poziomu zarządzania tagami a nie bezpośrednio pod zdjęciem. Litera ą kasuje cały tag ale zostaje tylko ą - trzeba dopisać brakującą resztę ;) .

Uwaga pozycjonerzy ;) i inni specjaliści "seo Magicy" : system piwigo nie przyjmuje czasem plików z maksymalną dopuszczalną ilością liter w opisie, konieczne jest usunąć kilka znaków w takim przypadku. Analogicznie długość nazwy folderu nie może zbyt długa. Dostępny jest dodatek do opisów meta i generator sitemap.

Pliki można wysyłać bezpośrednio przez panel administracyjny www galerii lub klasycznie przez program FTP do wybranego katalogu /galleries/zdjecia1 . Dodanie zdjęć do ogólnego systemu "spisu" może być wykonane z głównej strony administracji przez przyciski

• Synchronizuj oraz po przeładawaniu strony zatwierdź.

Katalogi utworzone przez

• FTP - są na stałe
• stronę www - można je dowolnie przesuwać.

Jedno zdjęcie można w dowolnej ilości przypisać różnym katalogom bez potrzeby dublowania pliku, niepotrzebny katalog można ukryć lub usunąć.

Tworzone wirtualne foldery bez zdjęć nie pojawiają się na stronie do czasu dołączenia do nich zdjęć. Są jedynie widoczne w menu wyboru.

RSS

RSS umieszczony czy może raczej schowany ;) jest w powiadomieniach.

Wystarczy skopiować odnośnik i wstawić ręcznie w stronę.

Np : jak w nagłówku strony

RSS - ostatnie zdjęcia - last photo

RSS Nie pojawia się domyślnie w pasku przeglądarki.

Wtyczki "dodatki" które mogą być przydatne :

• [>] FCK Editor - edytor opisów, treści html. Do Bardziej zaawansowanej modyfikacji lepiej użyć CKE Editor i wklejać kod html w źródło artykułu.
• [>] Add tags Mass - dodanie wielu tagów do bazy, niestety nie do konkretnego zdjęcia.
• [>] Automatic Size - automatyczne dopasowanie wielkości zdjęcia.
• [>] Custom Download Link - przycisk pobierz zdjęcie aby nie naciskać prawym i zapisz jako a odrazu pobierać.
• [>] AStat.2 - statystyki - wykazuje boty i użytkowników którzy blokują javascript i cookies ;). (wymaga Grum Plugin Classes)
• [>] BBCode Bar - kody BB.
• [>] Copyrights dodane menu prawa autorskie.
• [>] Easy Captcha - proste zabezpieczenie przed spamem.
• [>] GuestBook - jeżeli ktoś koniecznie chce zostawić po sobie ślad.
• [>] Lightbox - błyskawiczne przeglądanie zdjęć - wady aby daną fotografię potem komuś pokazać trzeba kliknąć w nazwę pliku (co nie jest oczywiste !) która przekieruje do całej strony z zdjęciem i opisem, i przyciskami dzielenia się facebook, google i inne. Oraz system analityki internetowej google analitycs / Piwik nie wie co poza startowym zdjęciem było przeglądane bo lightbox ładuje tylko plik jpg. Jedynie przez Astat2 można sprawdzić które pliki jpg były przeglądane przez konktretne IP. Z obserwacji w Piwik analityka jednak czasem jest na odwrót -> To Piwik wykrywa przeglądane zdjęcia a Atat piwigo brak.
• [>] Menu Random Photo - losowe zdjęcie pojawia się co kilka sekund "bez końca" wskazanie kursorem zatrzymuje pokaz i może przeniść go tego zdjęcia.
• [>] Mobile Theme for Tablets - przełącza styl strony na mobilny dla urządzeń które tego wymagają.
• [>] Meta - opisy meta dla zdjęć i katalagów - optymalizacja strony tzw "SEO"
• [>] Perso Footer - Edycja stopki.
• [>] PersoFavicon - małe logo strony w karcie przeglądarki.
• [>] PiwiShack - generator kodów html / bb do wstawiania swoich zdjęć w obrębie strony lub w całym internecie. Ikonka "Piwishack" pojawia się w trybie admin przy przegladniu zdjęć.
• [>] ShareThis - "dzielmy się" skróty do swoich udostępnienia zdjęć dla: Google +, tweet, "facebook like", tumlbr, linkedin.
• [>] Smilies Support - uśmiechy w kometarzach.
• [>] Subscribe to Comments - śledzenie dyskusji pod danym zdjęciem.
• [>] VideoJS - umożliwia odtwarzanie plików "x264" "mp4" "avi" zamieszczonych w katalogu zdjęć.

• [>] RV sitemap - generowanie pliku mapy strony - sitemap.xml - który można wskazać w [>] Google Webmaster Tools, [>] Bing / Yachoo Webmaster Tools, [>] Yandex Webmaster Tools, jeżeli hosting nie blokuje chińskich IP również [>] Baidu Webmaster Tools (aktywacja konta baidu przebiega bez chińskiej weryfikacj sms przez np pocztę Microsoft @live.com) i w kilku małych [>] exalead, [>] gigablast, [>] sogou .

Uwaga należy zaznaczyć z wciśniętym Ctrl wybrane katalogi, tagi i wybraną wielkość zdjęć jakie mają pojawić się w pliku sitemap.xml. Domyślnie ustawione są tylko adresy do zdjęć ;)

Każdy nowy element:

tag czy album należy ponownie zaznaczyć aby był umieszczony w mapie strony. Przykładowa generowana mapa strony [>] sitemap.xml

• [>] Statistics - Miejsce do wklejenia kodu śledzenia dla systemów: Piwik, GWT, Statystyki Analitycs Google system utracił autoryzacje - rozwiązanie to przeniesieni kodu do wtyczki Piwigo "Add < head > element"
• [>] Photo Update - zmiana / aktualizacja pojedynczego zdjęcia bez usuwania całego opisu.
• [>] Admin Tools - przydatne przy edycji bezpośrednio w galerii (wymaga Grum Plugin Classes)
• [>] PayPal Shopping Cart - sprzedawanie zdjęć przez PayPal
• [>] Piwecard - własna "e-kartka" (zawieszała działanie strony cba.pl, fuknkcja działa chyba tylko tylko na lepszym serwerze)
• [>] CDNPlus - "CDNPlus is an plugin for Piwigo that allows an easy integration with a Content Delivery Network (CDN)." umieszczenie kluczowych elementów strony na różnych serwerach rozmieszczonych na w różnych częściach internetu na świecie - dla zwiększenia szybkości i stabilności galerii tak aby ktoś z Azji nie pobierał strony z Ameryki Północnej tylko np z Chin czy Rosji .
• [>] Embedded Videos - wstawianie filmów z Dailymotion, Youtube, Vimeo,
• [>] Photo Sphere - obsługa plików panaromicznych z Google Camera
• [>] Social Connect - logowanie do Systemu Piwigo poprzez konto Facebook, Google, Instagram, LinkedIn, Tumblr, Twitter, Windows Live, Yahoo, OpenID, Flickr, Steam Community, Wordpress, Persona, 500px, Vkontakte.
• [>] Piwigo-openstreetmap - Wsparcie dla darmowych map przy lokalizacji zdjęć. [>] Openstreetmap , z map można zawsze korzystać bezpłatnie po podaniu źródła.
• [>] RV autocomplete - przydatne dodawaniu tagów np: pisząć Łó pokażą się wszystkie wcześniej użyte tagi które zawierają na początku litery Ł ó czyli np Łódź ..... , Łódka.
• [>] Forecast - prognoza pogody na podstawie danych gps z zdjęcia, korzysta z Forecast.io
• [>] Preload - stopniowe ładowanie zdjęć na stronie w zależności od pozycji - może sprawiać problemy i wyświetlać wszystkie przy miniaturki zamiast płynnego pojawiania się, przy zwiększeniu limitu przeglądania galerii np do 100 albo max 999.

Pozostałe dodatki można przeglądać tutaj: [>] http://pl.piwigo.org/ext/index.php?cid=null .

Aktualizacja systemu i dodatków Piwigo przebiega automatycznie, wystarczy jedynie potwierdzać.

Aktualizacja dodatków

Wykaz aktualizacji

Proces aktualizacji (na cba.pl pokazuje błąd ale tylko w komunikacie)

Sukces

Wygląd

Aktualnie używam stylu Modus który jest prosty, klasyczny i jednocześnie "Elastyczny" tzw responsywny oraz smart pocket dla urządzeń z systemem Android, Apple, Windows Phone (Mobilny styl zakrywany jest od góry przez reklamę cba zrezygnowałem i zrezygnowałem z opcji).

Przez pewien czas używałem Grey Dragon który wygląda idealnie ale strony generowane z tego szablonu przy katalogach z wieloma galeriami wymagają kilkukrotnie większego transferu danych gdy oprócz albumów w podglądzie ładują się także miniaturki zdjęć - nie ma na razie opcji wyboru jakości.

Modus może korzystać z najmniejszych miniaturek w prezentacji(po zmianie ustawień). Grey dragon prezentuje podgląd tylko z plików średniej wielkości, przy kilkudziesięciu sztukach zdjęć strona może wymagać pobrania kilku megabajtów zamiast kilkuset kilobajtów.

Są też inne wersje kolorystyczne podstawowego motywu, podstawowa różnica oprócz kolorów to nazwa pliku pod kwadratem miniaturek - (Modus wyłącza nazwę pliku a miniaturki skalują według oryginału).

Dodatkowo GreyDragon wymaga włączonego Javascript w przeglądarce co dodatkowo niepotrzebnie może obciążać przeglądarkę i komputer - galeria praktycznie przestaje działać.

Modus strona działa bez javascript jedynie miniaturki nie są tak idealnie spasowane.

Inne style wyglądu:

Jeżeli to nie wystarcza można stworzyć coś dla siebie, system piwigo to tylko "silnik" porządkujący zdjęcia. Na piękne portfolio chyba tak odrazu się nie nadaje piwigo ;).

Uwaga

Uwaga konieczne jest cykliczne sprawdzanie wolnego miejsce na koncie FTP galerii, nie tylko przez Filezilla, która może nie pokazywać dokładnej ilości danych ale przez panel administracyjny dostawcy hostingu. Bo gdy zabraknie wolnego miejsca trzeba będzie kasować zdjęcia aby co kolwiek zrobić.

Pierwszy objaw to brak miniaturek przy nowych zdjęciach. Niestety nie działają już wtedy opcje wprowadzania "oszczędności"

* Usunięcie części miniatur menu / narzędzia / konserwacja.

* ograniczenie typów i stopień kompresji miniatur konfiguracja / opcje / rozmiary zdjęć.

i konieczne jest usuwanie ręczne przez FTP najmniej ważnych plików lub zdjęć.

Optymalizacja

Jest pewna cecha Piwigo. Automatycznie obok wysłanego orginalnego zdjęcia system tworzy kilka rozmiarów zdjęć do podglądu. Nie ważne że zdjęcie oryginalne może być optymalnie dobrane pod względem wielkości i kompresji to i tak powstaną dodatkowe inne kopie. Można tylko określić ich ilość, rozdzielczość i kompresje.

Połowiczny "kompromis" to wybranie xss z rodzielczością 145x145 oraz medium.

Czemu także xss ? Przy wyborze tylko "M - średni" zniknie opcja wyboru widoku zdjęcia orginalnego.

W efekcie obok pliku rozdzielczości 1024x768 ~ 100 KB powstanie dodatkowe 30KB.

Niestety dodatek:

* Automatic Size nie wyświetli pliku pierwotnego i zawsze będzie wyświetlał medium. Aby wyświetlić obraz większy trzeba specjalnie dodatkowo kliknąć. Pewnym pośrednim rozwiązaniem jest ręczny wpisanie link do pliku oryginalnego w opisie zdjęcia.

* Sitemap nie daje możliwości zaznaczenia rejestrowania w spisie sitemap.xml obrazu pierwotnego, skutkiem czego google najpierw zaindeksuje początkowo tylko obraz średni.

Wariant lepszy

bez wad w dodatkach powyżej

XSS zmiana np do 400x300 dla zwykłych zdjęć.

Gdy na stronie są szerokie panoramy wtedy ta rozdzielość nie wystarczy i miniaturki powstaną tylko z przeskalowania obrazu i czas ładowania strony będzie tak długi jak dla zdjęć w dużej rozdzielczości. Dlatego zmieniłem ustawienia na 4000x300 i wszytkie panoramy zmieściły się w tym limicie przykład : [>] /index.php?/category/77

M - tryb Średni

"9999 x 9999" równie dobrze mogłoby być 2000x2000, ważne jest aby ta rozdzielczośc byla większa od każdego zdjęcia w Piwigo. System nie wygeneruje M na skutek "zamierzonego błędu" i wyświetlany będzie tylko oryginalny rozmiar.

Cechy :

* Po kliknięciu miniaturki wyświetla się jedno optymalne zdjęcie.

* Sitemap na skutek "błędu" Medium wskazuje ścieżkę do orginału zdjęcia.

Używam stylu Modus z ustawieniami XSS inne tryby spowodują skalowanie z pełnej rozdzielczości zdjęcia bez utworzenia małego podglądu, przez co ładowanie strony może się wydłużyć znacząco.

Cechy ogólne systemu zarządzania zdjęciami Piwigo

* Plik .htacces nie tworzy się automatycznie

Na stronie dragon soft [>] http://blog.dragonsoft.us/2014/09/25/piwigo-and-htaccess/ ,

jest przykładowy układ nie jest on uniwerasalny. Na razie utrudnia to dalszą optymalizacje wdg strony :

[>] http://blog.shpyo.net/438/35-regulki-htaccess-dzieki-ktorym-strona-bedzie-szybsza.html

* Sprawdzanie pisowni w FCK Editor działa tylko w podglądzie kodu..., dodatkowo sam edytor jest okrojonej wersji, np nie ma opcji tworzenia kotwic w artykule.

* System Piwigo nie nadaje się bespośrednio do "pisania/blogowania" nie ma opcji tworzenia tylko tekstów. Można utworzyć folder i tworzyć w nim tekst, na głównej stronie pojawi się gdy doda się zdjęcie. Skutkem tego jest brak tagów dla tekstu opisów jedynie czysty html, opcją kompromisową jest dobranie zdjęcia do tekstu i dokładne opisanie go oraz odpowiednie tagi związane z treścią artykułu. Również nawigacja po "folderach / tekstach" może być nieczytelna i wymaga jednoznacznego wskazania w co kliknąć.

Jako uzupełnienie używam szybkiego [>] CMS Monstra, który jeszcze da się używać na zasadzie kopiuj wklej wyklikaj ;) /start/

* Uwaga Style/szablony Piwik gdy są elastyczne responsywne "rwd" np: Modus i miniaturki zdjęć dopasowują się do rozdzielczości ekranu. Problem pojawia się przy pisaniu tekstu przy FulllHD " 1080p i szerszych rozdzielczościach tekst się rozjeżdza po całej szerokości i wyjątkowo nieczytelnie to wygląda.

Rozwiązanie

Wypośrodkowana tabela o ustalonej szerokości zmiana parametru "width" według własnych potrzeb.

W każde źródło dokumentu można wkleić na początku i na końcu dokumentu:

* Responsywne zdjęcie kod html Elastyczny RWD "responsive"

Czyli np własny elastyczny nagłówek do kompletu z szablonem strony bez kombinacji z CSS, Edycja przez dodatek "Add < head > element"

na podstawie: https://stackoverflow.com/questions/15458650/make-an-image-responsive-simplest-way

* Uwaga wyświetlanie zdjęć bezpośrednio przez tagi powoduje że na jedno zdjęcie (zapytanie do bazy?) 5KB sprawdzane przy PHP 5.6 pamięci RAM (serwera hostingu naszej strony). Gdy ktoś z odwiedzających stronę wywoła tag z którym powiązana ogromna ilość zdjęć może zobaczy podobny komunikat ale z innymi liczbami:

W zależności od limitów hostingu www lub serwera problem pojawi się przy kilku tysiącach lub dziesiątkach tysięcy zdjęć ;). [poruszone na [>>>>] forum cba.pl ] , problem nie występuje przy wywołaniu tego tagu przez zaplecze administratora przy porządkowaniu zdjęć.

Problem odsuwa w czasie PHP7 ze względu na mniejsze zużycie pamięci. Można to ominąć tworząc tagi z rocznikami tak aby nie przekroczyc przypadkiem limitu pamięci.

Wykorzystane grafiki: