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