LinuxFanClub Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<pagebreak>
====== 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|Προβολή Εικόνων}}|
<pagebreak>