Joomla - Άσκηση 13 - Ενθέματα, Πρόσθετα - PhocaGallery - Εικόνες

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

• Νέα : Εγκατάσταση ενθεμάτων (plugins - modules), slideshow κ.α.

• Έχουμε ήδη εγκαταστήσει το πρόσθετο phocagallery και έχουμε ανεβάσει και οργανώσει σε φακέλους εικόνες για Κέρκυρα και Παρίσι. Τις εικόνες αυτές τις βλέπουμε ανά κατηγορία από ένα μενού. Θα δούμε και άλλες επιλογές εμφάνισης, όπως σε slideshow και μέσα στα άρθρα.

ΕΝΘΕΜΑΤΑ - ΠΡΟΣΘΕΤΑ

1. ΕΝΘΕΜΑΤΑ (modules) - PhocaGallery
   • Τα ενθέματα (modules) εμφανίζονται γύρω από το κυρίως άρθρο, σε άλλες θέσεις όπως αριστερά, δεξιά, πάνω ή κάτω.
   1. Στην διαχείριση του Joomla πηγαίνουμε Επεκτάσεις / Διαχείριση Ενθεμάτων. Εδώ βλέπουμε τα ενθέματα για το μενού Main Menu, ένα πεδίο αναζήτησης Search, και το Breadcrumbs που εμφανίζει που βρισκόμαστε (π.χ. Βρίσκεστε εδώ: Αρχική/Προορισμοί/Εσωτερικό/Κέρκυρα).
   2. Κάθε ένθεμα εμφανίζεται σε μία θέση. Για παράδειγμα το πεδίο Αναζήτησης είναι πάνω δεξιά στην θέση Position0. Πάμε να το αλλάξουμε. Κάνουμε κλικ πάνω στο ένθεμα Search. Στις επιλογές του δεξιά ορίζουμε Θέση Position-8 και πατάμε
   3. Πηγαίνουμε στον Ιστότοπο για να δούμε την αλλαγή. Παρατηρούμε ότι η Αναζήτηση μεταφέρθηκε αριστερά. Είναι προφανές ότι δεν είναι ωραίο σημείο οπότε αλλάζουμε πάλι την θέση του σε Position0.
   4. Θα θέλαμε ίσως να βάλουμε ένα ένθεμα που να εμφανίζει κάποιες φωτογραφίες από αυτές που έχουμε στο PhocaGallery. Ένα τέτοιο ένθεμα είναι το Phoca Gallery Image Module. Το ψάχνουμε στο google, το κατεβάζουμε και το εγκαθιστούμε με τον ίδιο τρόπο που εγκαταστήσαμε τα JCE και Phoca Gallery. ΠΡΟΣΟΧΗ! πάντα εγκαθιστούμε την τελευταία έκδοση (αυτή με τον μεγαλύτερο αριθμό) και πάντα για Joomla 3.
   5. Μόλις το εγκαταστήσουμε πηγαίνουμε πάλι Επεκτάσεις / Διαχείριση Ενθεμάτων και θα πρέπει πλέον να μας εμφανίζεται στην λίστα και το ένθεμα Phoca Gallery Image Module. Σιγουρεύουμε ότι το Phoca gallery image module είναι δημοσιευμένο. Αν δεν είναι, το δημοσιεύουμε
2. ΝΕΑ ΚΑΤΗΓΟΡΙΑ - Αρχική - Phoca Gallery
   • Θα θέλαμε να εμφανίσουμε στην αρχική μας σελίδα π.χ. στο πλάι δεξιά κάποιες ενδεικτικές φωτογραφίες.
   1. Στην Διαχείριση πηγαίνουμε Εφαρμογές/Phoca Gallery/Categories και πατάμε νέο.
   2. Στο Title (Τίτλος) εισάγουμε Αρχική, στο Alias εισάγουμε arxiki
   3. Δίπλα από το Category Folder (Φακελος Κατηγορίας) πατάμε στο Select Folder (Επιλογή Κατηγορίας) και στην συνέχεια εισάγουμε arxiki και πατάμε Create Folder (Δημιουργία Φακέλου). Τέλος πατάμε για να επιλέξουμε τον φάκελο που μόλις δημιουργήσαμε. Τέλος πατάμε για να αποθηκεύσουμε.
   4. Από το αριστερό πλαίσιο επιλέγουμε Images για να πάμε στις εικόνες του Phoca Gallery.
   5. Τσεκάρουμε 2 εικόνες, μία από Κέρκυρα και μία από Παρίσι και πατάμε στο κουμπί Δέσμη Εντολών
   6. Στο παράθυρο που θα μας ανοίξει επιλέγουμε κατηγορία για μεταφορά/αντιγραφή Αρχική και ενέργεία Αντιγραφή. Τα υπόλοιπα τα αφήνουμε όπως είναι και πατάμε Εκτέλεση. Θα πρέπει να δούμε 2 αντίγραφα των εικόνων που επιλέξαμε να ανήκουν στην κατηγορία Αρχική.
   7. Πηγαίνουμε στον Ιστότοπο και πατάμε στο μενού Φωτογραφίες. Βλέπουμε ότι μας εμφανίζεται και η κατηγορία Αρχική. Αυτό δεν το θέλουμε αφού την φτιάξαμε για άλλο σκοπό.
   8. Στην Διαχείριση πηγαίνουμε Εφαρμογές/Phoca Gallery/Categories. Μας εμφανίζεται η λίστα των κατηγοριών. Κάθε κατηγορία έχει και ένα ID (έναν αύξοντα αριθμό) π.χ. 3. Σημειώνουμε ποιον έχει η κατηγορία Αρχική γιατί θα μας χρειαστεί παρακάτω.
   9. Στο αριστερό πλαίσιο πατάμε στο Control Panel του Phoca Gallery και μετά δεξιά στο κουμπί Επιλογές.
   10. Στην καρτέλα Categories View (Προβολή Κατηγοριών) στο πεδίο Hide Categories (Απόκρυψη κατηγοριών) εισάγουμε το ID (τον αριθμό) της κατηγορίας Αρχική που βρήκαμε παραπάνω και πατάμε .
   11. Ανανεώνουμε στον Ιστότοπο τις σελίδα με τις Φωτογραφίες. Θα πρέπει να κρύφτηκε η κατηγορία Αρχική.
3. ΡΥΘΜΙΣΕΙΣ Phoca Gallery Image Module
   • Θα εμφανίσουμε τώρα στην Αρχική σελίδα στο πλάι τις φωτογραφίες που θέλουμε.
   1. Πηγαίνουμε Επεκτάσεις / Διαχείριση Ενθεμάτων και κάνουμε κλικ πάνω στο Phoca Gallery Image Module
   2. Στο Select Category (Επιλογή Κατηγορίας) επιλέγουμε Αρχική.
   3. Κρύβουμε τον τίτλο, ορίζουμε να είναι Δημοσιευμένο και επιλέγουμε από τις θέσεις του Protostar Δεξιά-position 7.
   4. Πατάμε στην καρτέλα Σύνδεση Μενού. Θέλουμε να εμφανίζεται μόνο στην Αρχική σελίδα οπότε επιλέγουμε Μόνο στις Επιλεγμένες και τσεκάρουμε μόνο την Αρχική.
   5. Πατάμε και πηγαίνουμε στον Ιστότοπο και ανοίγουμε την αρχική σελίδα για να δούμε αν τα καταφέραμε.
   6. Βλέπουμε ότι μας εμφανίστηκε μόνο στην Αρχική και πουθενά αλλού, μία εικόνα δεξιά, μαζί με τον τίτλο της ένα κουμπάκι λεπτομέρειες και ένα για download . Εμείς όμως είχαμε 2 εικόνες και ίσως δεν θέλουμε τίτλο και τα κουμπάκια.
   7. Πηγαίνουμε πάλι στην Διαχείριση στο Επεκτάσεις / Διαχείριση Ενθεμάτων και κάνουμε κλικ πάνω στο Phoca Gallery Image Module -
   8. Στο Limit Count (Όριο Μέτρησης) επιλέγουμε 5, ώστε να μας εμφανίζονται έως 5 εικόνες.
   9. Επιλέγουμε Hide (Απόκρυψη) στα Display Name (Εμφάνιση Ονόματος), Detail Icon (Εικονίδιο Λεπτομεριών) και Download Icon (Εικονίδιο Λήψης)
   10. Εάν θέλουμε να μας εμφανίζεται η εικόνα στο πλήρες μέγεθος όταν κάνουμε κλικ, αλλάζουμε επίσης στο Detail Window (Λεπτομέρειες Παραθύρου) σε HighSlide JS (image only) και στο Highslide JS Full Image αλλάζουμε σε Yes και αποθηκεύουμε.
   11. Ανανεώνουμε την Αρχική σελίδα στον Ιστότοπο για να δούμε τις αλλαγές.
4. ΝΕΟ ΠΡΟΣΑΡΜΟΣΜΕΝΟ ΕΝΘΕΜΑ HTML (custom html Module)
   • Πέρα από τα ενθέματα που υπάρχουν ήδη μπορούμε να προσθέσουμε και νέα. Θα μπορούσαμε να φτιάξουμε ένα νέο μενού στα αριστερά ή στα δεξιά ή στο κάτω μέρος της σελίδας, ένα άλλο ένθεμα με εικόνες του Phoca Gallery από άλλη κατηγορία, ένα ένθεμα με σχετικά άρθρα με αυτό που βλέπουμε κτλ..
   1. Πηγαίνουμε πάλι στην Διαχείριση στο Επεκτάσεις / Διαχείριση Ενθεμάτων. Πατάμε στο κουμπί Νέο
   2. Μας εμφανίζει μία λίστα με είδη ενθεμάτων για να διαλέξουμε. Επιλέγουμε Προσαρμοσμένος κώδικας HTML ώστε να φτιάξουμε ένα ένθεμα μέσω html.
   3. Δίνουμε τίτλο Προσφορές
   4. Στην θέση επιλέγουμε position-7. Κατάσταση ορίζουμε Δημοσιευμένο και στην καρτέλα Σύνδεση Μενού επιλέγουμε Εμφάνιση Ενθέματος Σε όλες τις σελίδες. Εάν θέλαμε μόνο σε κάποια σελίδα π.χ. στην Αρχική μπορούμε να το αλλάξουμε.
   5. Επιστρέφουμε στην καρτέλα Ένθεμα. Στο κείμενο εισάγουμε
      • 4 ημέρες στην Κέρκυρα σε 5αστερο ξενοδοχείο με 50% έκπτωση!
   6. Επιλέγουμε όλο το κείμενο που γράψαμε και από το πεδίο Styles του JCE Editor επιλέγουμε το στυλ alert-info. Θα μας εμφανίσει το κείμενό μας τονισμένο σε μπλε.
   7. Πατάμε πάνω στο εικονίδιο για να δούμε τον html κώδικα. Βλέπουμε ότι το κείμενο μπήκε μέσα σε μια <p class=“alert-info”> .. </p>. Το χρώμα κειμένου και φόντου που βλέπουμε, έχει οριστεί στο αρχείο template.css.

      alert-info {
              background-color: #d9edf7;
              border-color: #bce8f1;
              color: #3a87ad;
      }

      Δεν θα αλλάξουμε τίποτα.

   8. Πατάμε πάνω στο εικονίδιο για να πάμε στην κατάσταση με τα κουμπάκια του JCE και εισάγουμε και το κείμενο
      • Καλέστε μας για πληροφορίες.
   9. Τέλος πατάμε και πηγαίνουμε στον Ιστοτοπο για να δούμε τις αλλαγές.
   10. Στην αρχική σελίδα έχουμε πλέον 2 ενθέματα. Οι Προσφορές εμφανίζονται κάτω από τις εικόνες. Εάν θέλουμε να εμφανίζονται πάνω από αυτές κάνουμε τα εξής. Επιλέγουμε πάνω δεξιά Κατάταξη πίνακα με βάση Κατάταξη και δεξιά Επιλογή Κατάταξης Αύξουσα. Τώρα μπορούμε με το κουμπάκι αριστερά από το Προσφορές να το ανεβάσουμε πάνω από το Phoca Gallery Image Module. Ανανεώνουμε στον Ιστοτοπο για να δούμε τις αλλαγές.
   • Είδαμε πως δημιουργούμε ένα δικό μας ένθετο. Εκτός από ότι κάναμε Θα μπορούσαμε επίσης να εισάγουμε και κάποια μικρή εικόνα ή να τροποποιήσουμε το κείμενο και την εμφάνισή του με οποιονδήποτε τρόπο γνωρίζουμε από την html.
5. ΠΡΟΣΘΕΤΑ (plugins) - PhocaGallery
   • Τα πρόσθετα επεκτείνουν τις λειτουργίες μέσα στο ίδιο το Joomla και βρίσκονται Επεκτάσεις / Διαχείριση Προσθέτων
   • Στην λίστα μεταξύ άλλων βλέπουμε τον κειμενογράφο JCE που προσθέσαμε εμείς, αλλά και ενσωματωμένες δυνατότητες όπως η Ταυτοποίηση Joomla (δηλαδή η σύνδεση με όνομα χρήστη και κωδικό) στην 2η σελίδα την Αναζήτηση και την Αποσύνδεση και άλλα.
   • Δηλαδή πολλές από τις υπάρχουσες λειτουργίες του Joomla είναι με την μορφή plugin. Αυτό επιτρέπει την χρήση παρόμοιων λειτουργιών με περισσότερες δυνατότητες που έχουν φτιάξει άλλοι. Για παράδειγμα κάποιος μπορεί να φτιάξει ένα καλύτερο plugin για Αναζήτηση, το οποίο να εγκαταστήσουμε και να ενεργοποιήσουμε, απενεργοποιώντας το βασικό plugin του Joomla.
   • Μέχρι τώρα στα άρθρα μας Κέρκυρα και Παρίσι εμφανίζαμε από 3 εικόνες χρησιμοποιώντας την ετικέτα της html <img>. Έχουμε όμως εγκαταστήσει ένα πρόσθετο, το Phoca Gallery, που εξειδικεύεται στην εμφάνιση εικόνων. Θα ήταν καλό να μπορούσαμε να το χρησιμοποιήσουμε για να μας εμφανίσει ακόμα πιο όμορφα, τις εικόνες και μέσα στα άρθρα.
   1. Για να το κάνουμε αυτό θα πρέπει να εγκαταστήσουμε το Phoca gallery image plugin. Το ψάχνουμε στο google, το κατεβάζουμε και το εγκαθιστούμε με τον γνωστό τρόπο. ΠΡΟΣΟΧΗ! πάντα εγκαθιστούμε την τελευταία έκδοση (αυτή με τον μεγαλύτερο αριθμό) και πάντα για Joomla 3.
   2. Για να επιβεβαιώσουμε ότι εγκαταστάθηκε και να δούμε και τα υπόλοιπα πρόσθετα πηγαίνουμε Επεκτάσεις / Διαχείριση Ενθεμάτων. Σιγουρεύουμε ότι το Phoca gallery image plugin είναι δημοσιευμένο.
   3. Τώρα που το εγκαταστήσαμε θα πρέπει να δούμε πως το χρησιμοποιούμε. Κάθε πρόσθετο (plugin) χρησιμοποιείται με διαφορετικό τρόπο σύμφωνα με τις οδηγίες που δίνει αυτός που το δημιουργησε. Ψάχνουμε λοιπόν στο google για phoca gallery image plugin display. Η αναζήτηση θα μας πάει στην σελίδα http://www.phoca.cz/documents/14-phoca-gallery-plugin/58-displaying-phoca-gallery-plugin
   4. Μας εμφανίζει 2 παραδείγματα. Το 1ο είναι Categories displaying (Εμφάνιση κατηγοριών) και το 2ο είναι Images displaying (Εμφάνιση εικόνων). Εμείς θέλουμε το 2ο. Με βάση το παράδειγμα και την επεξήγηση των παραμέτρων μπορούμε να καταλήξουμε ότι εμείς θα γράφαμε έναν κώδικα όπως ο παρακάτω

      •  {phocagallery view=category|categoryid=2|displayname=0|displaydetail=0|displaydownload=0}

   5. Αυτό θα μας εμφανίσει τις εικόνες της κατηγορίας με id 2, δεν θα εμφανίσει τίτλο (displayname=0), λεπτομέρειες (displaydetail=0) και σύνδεσμο για download (displaydownload=0).
   6. Πηγαίνουμε στην Διαχείριση στο Joomla στο μενού Εφαρμογές / Phoca Gallery / Categories και βλέπουμε ποιο id έχει η κατηγορία Παρίσι. Έστω ότι έχει το 2.
   7. Πηγαίνουμε Περιεχόμενο / Διαχείριση Άρθρων και πατάμε πάνω στο άρθρο Παρίσι.Πατάμε πάνω στο εικονίδιο για να δούμε τον html κώδικα.
   8. Εμφανίζουμε ήδη τις 3 εικόνες μέσω html. Δεν θα σβήσουμε τον κώδικα που τις εμφανίζει, θα τον βάλουμε σε σχόλια ώστε να τον αγνοήσει. Βάζουμε

      <!--

      πριν το 1ο <img ..> και

       --> 

      μετά το τελευταίο <img ..>. Θα μας αλλάξει το χρώμα του κώδικα, ως ένδειξη ότι μπήκε σε σχόλια. Πατάμε και ανανεώνουμε την σελίδα Παρίσι στον Ιστότοπο για να δούμε την αλλαγή.

   9. Πίσω στην Διαχείριση του άρθρου πατάμε πάλι στο για να δούμε τον html κώδικα.
   10. Για να εμφανίσουμε τώρα τις εικόνες από το Phoca Gallery θα βάλουμε μέσα στον κώδικα της html

        {phocagallery view=category|categoryid=2|displayname=1|displaydetail=1|displaydownload=1}

       . Το σημαντικό εδώ είναι το 2 που είναι το id της κατηγορίας.

   11. Αποθηκεύουμε και πηγαίνουμε στον Ιστότοπο για να δούμε τις αλλαγές.
   12. Κάνουμε ακριβώς τα ίδια βήματα για το άρθρο Κέρκυρα. Δηλαδή βρίσκουμε το σωστό id, βάζουμε σε σχόλια τις ετικέτες <img> και εισάγουμε τον κώδικα για να εμφανίσει τις εικόνες μέσα από το Phoca Gallery.
   • Αυτή είναι η λειτουργία ενός plugin στο Joomla, μιας επιπλέον λειτουργικότητας που ενσωματώνεται μέσα στο Joomla.
6. Επαναληπτική. Άρθρα στο Joomla
   1. Θα δημιουργήσουμε 2 νέα άρθρα και μενού στο Joomla για 2 νέους προορισμούς, έναν για εσωτερικό και έναν για εξωτερικό, π.χ. Ικαρία και Βαρκελώνη ή όποιες άλλες 2 πόλεις θέλουμε. Θα βάλουμε έναν μικρό τίτλο και μία παράγραφο 4-5 γραμμές περίπου στο κάθε άρθρο.
   2. Στην συνέχεια θα βρούμε 3 εικόνες για κάθε προορισμό, σε μεγάλο μέγεθος. Δεν θα τις μικρύνουμε με το Gimp
   3. Θα οργανώσουμε κατηγορίες στο Phoca Gallery για τους 2 προορισμούς όπως ακριβώς κάναμε και για την Κέρκυρα και το Παρίσι και θα ανεβάσουμε τις εικόνες μαζικά στην κάθε κατηγορία, με τον τρόπο που είδαμε στην προηγούμενη άσκηση.
   4. Μόλις τελειώσουμε θα πρέπει οι εικόνες μας να εμφανιστούν στον Ιστότοπο στο μενού Φωτογραφίες
   5. Θα αντιγράψουμε (με Δέσμη Εντολών) και από μία εικόνα από Ικαρία και Βαρκελώνη στην κατηγορία αρχική ώστε να φαίνονται άλλες 2 εικόνες στην αρχική σελίδα.
7. Εμφάνιση module μόνο όταν βλέπουμε συγκεκριμένο άρθρο.
   • Έχουμε ήδη δει πως να εμφανίζουμε τις εικόνες από το Phoca Gallery μέσα σε ένα άρθρο με χρήση του Phoca Gallery plugin και βάζωντας κωδικα {phocagallery .. } μέσα στο άρθρο.
   • Έστω ότι ενώ βλέπουμε το άρθρο Ικαρία θέλουμε να εμφανίσουμε τις φωτογραφίες της Ικαρίας δεξιά ως ένθεμα στην θέση Position-7. Τα ενθέματα όμως δεν συνδέονται με άρθρα αλλά με μενού. Θα φτιάξουμε λοιπόν μια κρυφή ομάδα από μενού και θα βάλουμε μέσα ένα μενού για την Ικαρία.
   1. Πηγαίνουμε Μενού / Διαχείριση Μενού / Προσθήκη Νέου Μενού
      1. Βάζουμε τίτλο Κρυφό και είδος μενού hidden.
      2. Φτιάχτηκε μια νέα ομάδα μενού Κρυφό και φαίνεται στην λίστα μαζί με τα άλλα 2 (Main menu, user menu).
   2. Πατάμε πάνω στην ομάδα μενού Κρυφό και στην συνέχεια Νέο.
      1. Ως τίτλο ορίζουμε Ικαρία και alias ikaria
      2. Είδος στοιχείου μενού επιλέγουμε Άρθρα / Μεμονωμένο Άρθρο και στην συνέχεια επιλέγουμε το άρθρο Ικαρία και πατάμε . Έχουμε δημιουργήσει μία ομάδα μενού Κρυφό με ένα μενού Ικαρία που δεν φαίνεται στο site μας όπως ακριβώς θέλαμε.
   3. Πηγαίνουμε Επεκτάσεις / Διαχείριση Ενθεμάτων. Δημιουργούμε ένα νέο ένθεμα διαλέγοντας τον τύπο Phoca Gallery Image Module από την λίστα.
      1. Ως τίτλο βάζουμε Ικαρία - Εικόνες, τον κρύβουμε και επιλέγουμε κατηγορία Ικαρία.
      2. Στο Limit Count (Όριο Μέτρησης) επιλέγουμε 5, ώστε να μας εμφανίζονται έως 5 εικόνες.
      3. Επιλέγουμε Hide (Απόκρυψη) στα Display Name (Εμφάνιση Ονόματος), Detail Icon (Εικονίδιο Λεπτομεριών) και Download Icon (Εικονίδιο Λήψης)
      4. Εάν θέλουμε να μας εμφανίζεται η εικόνα στο πλήρες μέγεθος όταν κάνουμε κλικ, αλλάζουμε επίσης στο Detail Window (Λεπτομέρειες Παραθύρου) σε HighSlide JS (image only) και στο Highslide JS Full Image αλλάζουμε σε Yes
      5. Θέλουμε να εμφανίζεται στα δεξιά, οπότε επιλέγουμε Position-7
      6. Στην καρτέλα Σύνδεση Μενού επιλέγουμε Μόνο στις Επιλεγμένες σελίδες και τσεκάρουμε μόνο το μενού Ικαρία στην ομάδα Κρυφό. Τέλος πατάμε .
   4. Πηγαίνουμε στον Ιστότοπο και ξαναεμφανίζουμε την σελίδα για την Ικαρία. Αν μας εμφανιστούν οι εικόνες στα δεξιά σημαίνει ότι τα καταφέραμε!
   5. Κάνουμε ακριβώς τα ίδια παραπάνω βήματα και για την Βαρκελώνη για να εμφανίσουμε και σε αυτήν τις φωτογραφίες στα δεξιά. Για να κερδίσουμε χρόνο, στην δημιουργία του νέου Ενθέματος, μπορούμε να αντιγράψουμε το υπάρχον Ικαρία - Εικόνες και να τροποποιήσουμε στην συνέχεια τον τίτλο, την κατηγορία, την Σύνδεση μενού και να το δημοσιεύσουμε.

• Είδαμε αρκετούς τρόπους να χρησιμοποιήσουμε το Phoca Gallery, ένα πρόσθετο για εικόνες στο joomla. Οι εικόνες είναι βασικό στοιχείο ενός site. Η διαχείριση-οργάνωση και η όμορφη εμφάνιση τους είναι αναγκαίες γνώσεις σε ένα CMS όπως το Joomla.