Joomla - Άσκηση 12 - Πρόσθετα - PhocaGallery - Εικόνες

Δοκιμασμένο σε Joomla 3.4.5 και Phoca Gallery 4.2.2, εκτύπωση σε firefox -10%

• Νέα : Αναζήτηση και χρήση προσθέτων (components) στο joomla - Άλμπουμ εικόνων με PhocaGallery

• Έχουμε ήδη δει ένα πρόσθετο στο Joomla, τον JCE editor έναν επιπλέον επεξεργαστή html άρθρων. Θα δούμε πως βρίσκουμε πρόσθετα στο joomla γενικά και μεταξύ άλλων και το PhocaGallery για διαχείριση άλμπουμ με εικόνες

ΠΡΟΣΘΕΤΑ

1. ΕΥΡΕΣΗ ΠΡΟΣΘΕΤΩΝ - PhocaGallery
   • Ένα από τα πιο δυνατά χαρακτηριστικά ενός CMS είναι η επεκτασιμότητά του, δηλαδή να μπορούμε να προσθέσουμε επιπλέον λειτουργίες πέρα από τις βασικές. Αυτό γίνεται με την εγκατάσταση προσθέτων (Components). Έχουμε ήδη δει τον JCE Editor και θα πάμε να εγκαταστήσουμε και το Phoca Gallery.
   1. Ανοίγουμε μια νέα καρτέλα και ψάχνουμε στο google για joomla phocagallery. Θα μας πάει στο επίσημο site http://www.phoca.cz/phocagallery.
   2. Πριν το κατεβάσουμε, πάμε να δούμε τι περίπου κάνει από τα Demos. Μπορείτε να δείτε το Phoca Gallery and Joomla! 3 Demo καθώς και το Wallpapers Demo.
   3. Το κατεβάζουμε από τον Download σύνδεσμο. Θέλουμε την έκδοση για Joomla 3 προφανώς. Είναι ένα συμπιεσμένο αρχείο zip. Αποθηκεύουμε το αρχείο εγκατάστασης στον φάκελο mathimata/html/joomla/phoca (τον δημιουργούμε εάν δεν υπάρχει).
   4. Τα περισσότερα πρόσθετα είναι στα αγγλικά. Πολλά όμως δημοφιλή έχουν μεταφραστεί. Στην ίδια σελίδα που το κατεβάσαμε έχει στο κάτω μέρος γλώσσες. Επιλέγουμε Display Num : All για να εμφανιστούν όλες οι μεταφράσεις, βρίσκουμε την Ελληνική μετάφραση και αποθηκεύουμε το zip αρχείο στον ίδιο φάκελο mathimata/html/joomla/phoca
   5. Εάν θέλουμε και άλλες δυνατότητες μπορούμε να πάμε στο μενού Download στο site και να δούμε όλα τα downloads. Ενδιαφέροντα είναι τα Phoca Gallery Themes, αλλά και κάποιο από τα Slideshow modules. Δεν θα κατεβάσουμε κάτι άλλο προς το παρόν αφού πρέπει πρώτα να εξοικειωθούμε με τις βασικές λειτουργίες.
   6. Πηγαίνουμε στην Διαχείριση του site μας και με τον ίδιο τρόπο όπως είχαμε εγκαταστήσει τον JCE Editor, εγκαθιστούμε το phocagallery και την μετάφραση από τα 2 αρχεία που κατεβάσαμε. Προσοχή! Ποιο πρέπει να εγκαταστήσουμε πρώτα;.
   • Η εγκατάσταση της μετάφρασης μπορεί να αποτύχει. Το κάθε πρόσθετο εξελίσσεται. Είτε για να δουλέψει σε μια νέα έκδοση του Joomla (1.5, 2.5, 3.5 ..) είτε επειδή προστίθενται δυνατότητες. Οτιδήποτε κατεβάζουμε δωρεάν μπορεί να είναι απλά εθελοντική εργασία, όπως οι μεταφράσεις. Έτσι η μετάφραση που κατεβάσαμε μπορεί να ήταν για μια παλιότερη έκδοση του phocagalery. Μέχρι να βρεθεί κάποιος εθελοντικά να μεταφράσει την τελευταία έκδοση του Phoca Gallery στα ελληνικά, είμαστε αναγκασμένοι να δουλεύουμε στα αγγλικά. Μπορούμε και εμείς να συνεισφέρουμε σε διάφορα projects που μας ενδιαφέρουν.
2. ΔΗΜΙΟΥΡΓΙΑ ΚΑΤΗΓΟΡΙΩΝ - PhocaGallery
   • Γνωρίζουμε ήδη πως να ανεβάζουμε εικόνες στο site μας και να τις εμφανίζουμε σε άρθρα. Θα δούμε τι παραπάνω μπορούμε να κάνουμε με ένα πρόσθετο ειδικά για εικόνες.
   • Μεταξύ άλλων με το Phoca Gallery πορούμε να κάνουμε οργάνωση όλων των εικόνων μας σε κατηγορίες και υποκατηγορίες, να τις εμφανίζουμε όμορφα σε αναδυόμενα παράθυρα ή σε slideshow κ.α.
   • Θα ξεκινήσουμε με το να δημιουργήσουμε 2 κατηγορίες, Κέρκυρα και Παρίσι.
   1. Πηγαίνουμε Εφαρμογές/Phoca Gallery, πατάμε στο Categories (Κατηγορίες) και μετά Νέο.
   2. Στο Title (Τίτλος) εισάγουμε Κέρκυρα, στο Alias εισάγουμε kerkyra
   3. Δίπλα από το Category Folder (Φακελος Κατηγορίας) πατάμε στο Select Folder (Επιλογή Κατηγορίας) και στην συνέχεια εισάγουμε kerkyra και πατάμε Create Folder (Δημιουργία Φακέλου). Τέλος πατάμε για να επιλέξουμε τον φάκελο που μόλις δημιουργήσαμε.
   4. Πατάμε Αποθήκευση & Νέο και με τον ίδιο τρόπο εισάγουμε νέα κατηγορία με τίτλο Παρίσι, alias paris. Δημιουργούμε και επιλέγουμε νέο φάκελο paris.
   5. Πατάμε Αποθήκευση. Έχουμε δημιουργήσει τις 2 κατηγορίες μας.
3. ΠΡΟΣΘΗΚΗ ΕΙΚΟΝΩΝ - PhocaGallery
   • Έχουμε ήδη από 3 εικόνες για Κέρκυρα και για Παρίσι. Θα τις ανεβάσουμε στο Phoca Gallery.
   1. Ενώ είμαστε στο Phoca Gallery από αριστερά επιλέγουμε Images (Εικόνες) και πατάμε Νέο.
   2. Στο Title (Τίτλος) εισάγουμε Κέρκυρα Εικόνα 1, στο Alias εισάγουμε kerkyra1, στο Category (Κατηγορία) επιλέγουμε Κέρκυρα.
   3. Δίπλα από το Filename (Όνομα Αρχείου) πατάμε στο Select Filename (Επιλογή Αρχείου).
   4. Στο παράθυρο που άνοιξε κάνουμε διπλό κλικ στον φάκελο kerkyra για να μπούμε μέσα. Στην συνέχεια πατάμε Αναζήτηση και βρίσκουμε την εικόνα Kerkyra1.jpg (την κανονική όχι την small) και πατάμε Start Upload (Έναρξη μεταφόρτωσης). Τέλος πατάμε για να επιλέξουμε την εικόνα που μόλις δημιουργήσαμε.
   5. Πατάμε Αποθήκευση & Νέο και με τον ίδιο τρόπο εισάγουμε τις 2 άλλες εικόνες (Κέρκυρα Εικόνα 2, kerkyra2, Κέρκυρα Εικόνα 3, kerkyra3), πάντα στην κατηγορία Κέρκυρα στον φάκελο kerkyra.
   6. Τι γίνεται εάν κάνουμε κάποιο λάθος και θέλουμε να διαγράψουμε κάποια εικόνα και να την ανεβάσουμε πάλι; Αυτό γίνεται από την Διαχείριση Πολυμέσων. Πηγαίνουμε λοιπόν Περιεχόμενο / Διαχείριση Πολυμέσων. Υπάρχει ένας φάκελος phocagallery και μέσα έχει 2 φακέλους kerkyra και paris.
   • Εδώ μπορούμε να κάνουμε αλλαγές, αν θέλουμε, όπως να μετονομάσουμε ή να διαγράψουμε εικόνες, φακέλους κτλ.
   • Στον φάκελο kerkyra υπάρχουν οι εικόνες μας. Όμως υπάρχει και ο φάκελος thumbs. Εκεί υπάρχουν μέσα πάλι οι εικόνες σε μικρότερο μέγεθος. Όπως ακριβώς είχαμε φτιάξει και εμείς τις εικόνες -small από το Gimp έτσι και το Phoca Gallery φτιάχνει αυτόματα τις μικρές εικόνες (προεπισκοπίσεις) που εμφανίζονται στο site. Οι μεγάλες θα εμφανίζονται μόνο όταν θα κάνουμε κλικ πάνω και έτσι το site φορτώνει πάντα γρήγορα.
4. ΠΟΛΛΑΠΛΗ ΠΡΟΣΘΗΚΗ ΕΙΚΟΝΩΝ - PhocaGallery
   • Είδαμε πως εισάγουμε εικόνες μία κάθε φορά. Όμως η διαδικασία θέλει χρόνο. Εάν είχαμε πάνω από 10-20 εικόνες θα καθυστερούσε πάρα πολύ. Υπάρχει όμως και η πολλαπλή προσθήκη εικόνων. Με αυτόν τον τρόπο θα βάλουμε τις εικόνες από το Παρίσι.
   1. Πηγαίνουμε Εφαρμογές/Phoca Gallery, από αριστερά επιλέγουμε Images (Εικόνες) και πατάμε Multiple Add (Πολλαπλή Προσθήκη).
   2. Στα δεξιά εμφανίζονται οι φακέλοι kerkyra, paris και avatars. Επιλέγουμε τον φάκελο paris ώστε οι εικόνες που θα ανεβάσουμε να μπουν εκεί.
   3. Πατάμε στο κάτω μέρος στην καρτέλα Multiple Upload (Πολλαπλή Μεταφόρτωση) και στο κουμπί Add Files (Προσθήκη Αρχείων).
   4. Βρίσκουμε τις εικόνες paris1.jpg, paris2.jpg, paris3.jpg και με πατημένο το CTRL επιλέγουμε και τις τρεις.
   5. Πατάμε το κουμπί Start Upload (Έναρξη Μεταφόρτωσης). Οι εικόνες μας ανέβηκαν στο site.
   6. Στο Title (Τίτλος) εισάγουμε Παρίσι - Εικόνα, στο Alias εισάγουμε paris, στο Category (Κατηγορία) επιλέγουμε Παρίσι.
   7. Στο δεξί πλαίσιο μας εμφανίστηκαν οι 3 εικόνες. Τσεκάρουμε και τις 3 και πατάμε Αποθήκευση.
5. ΔΗΜΙΟΥΡΓΙΑ ΜΕΝΟΥ - PhocaGallery
   • Οι εικόνες μας έχουν ανεβεί στο site και έχουν οργανωθεί 2 κατηγορίες. Μένει να τις εμφανίσουμε.
   1. Πηγαίνουμε Μενού / Main Menu και πατάμε στο κουμπί Νέο.
   2. Στο Είδος Στοιχείου Μενού επιλέγουμε Phoca Gallery/List of Categories (Category View) (Λίστα Κατηγοριών Phoca Gallery - Προβολή Κατηγορίας)
   3. Τίτλος μενού : Φωτογραφίες, Ψευδώνυμο : photos
   4. Πατάμε . Το μενού μας βρίσκεται μετά το μενού Επικοινωνία, στα δεξιά του. Για να πάει στα αριστερά του, θα το μεταφέρουμε πάνω από αυτό, όπως γνωρίζουμε, με το εικονίδιο . Πηγαίνουμε στον Ιστότοπο και ανανεώνουμε για να δούμε να εμφανίζεται το άλμπουμ μας.
   5. Ας κάνουμε μια περιήγηση στις φωτογραφίες. Μπορούμε να ανοίξουμε περισσότερες από μία ταυτόχρονα. Βλέπουμε κουμπιά πλοήγησης στην προηγούμενη και στην επόμενη, κουμπί slideshow και το κουμπί download.
6. ΡΥΘΜΙΣΕΙΣ ΠΡΟΣΘΕΤΟΥ - PhocaGallery
   • Παρατηρούμε ότι στο παράθυρο που μας εμφανίζεται η εικόνα, δεν έχει το πλήρες μέγεθός της. Το Phoca Gallery έχει ρυθμιστεί έτσι για λόγους απόδοσης. Κάθε πρόσθετο έχει ρυθμίσεις. Θα τις τροποποιήσουμε.
   1. Στην Διαχείριση πηγαίνουμε Εφαρμογές/Phoca Gallery και πατάμε πάνω δεξιά στο κουμπί Επιλογές.
   2. Στην καρτέλα Detail View (Λεπτομέριες Εμφάνισης) στο Detail Window (Λεπτομέρειες Παραθύρου) ορίζουμε Jak LightBox.
   3. Πατάμε και ανανεώνουμε με F5 το site. Ανοίγουμε πάλι μια εικόνα και παρατηρούμε την αλλαγή.
   4. Στο Detail Window (Λεπτομέρειες Παραθύρου) αλλάζουμε σε HighSlide JS (image only) και στο Highslide JS Full Image αλλάζουμε σε Yes, ώστε να εμφανιστεί η εικόνα στο πλήρες μέγεθος.
   5. Πατάμε και ανανεώνουμε με F5 το site. Ανοίγουμε πάλι μια εικόνα και παρατηρούμε την αλλαγή.
   6. Δοκιμάζουμε και άλλες αλλαγές εάν θέλουμε. Στο τέλος αφήνουμε αυτή που μας αρέσει ή ξαναγυρίζουμε το Detail Window (Λεπτομέρειες Παραθύρου) σε Modal Box
   • Υπάρχουν διάφορες ρυθμίσεις, όπως στην Thumbnails στο Images And Detail Window Size Settings, υπάρχουν ρυθμίσεις για το μέγεθος των μικρών φωτογραφιών και το μέγεθος του Παραθύρου Εμφάνισης του. Μπορούμε να πειραματιστούμε.