..
''**. Το χρώμα κειμένου και φόντου που βλέπουμε, έχει οριστεί στο αρχείο **template.css**.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #3a87ad;
}
Δεν θα αλλάξουμε τίποτα.
- Πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}} για να πάμε στην κατάσταση με τα κουμπάκια του JCE και εισάγουμε και το κείμενο
* Καλέστε μας για πληροφορίες.
- Τέλος πατάμε {{:el:school:lessons:html:save_n_exit_18.png}} και πηγαίνουμε στον Ιστοτοπο για να δούμε τις αλλαγές.
- Στην αρχική σελίδα έχουμε πλέον 2 ενθέματα. Οι **Προσφορές** εμφανίζονται κάτω από τις εικόνες. Εάν θέλουμε να εμφανίζονται πάνω από αυτές κάνουμε τα εξής. Επιλέγουμε πάνω δεξιά **Κατάταξη πίνακα με βάση** ''**Κατάταξη**'' και δεξιά **Επιλογή Κατάταξης** ''**Αύξουσα**''. Τώρα μπορούμε με το κουμπάκι {{:el:school:lessons:html:move_item_20.png}} αριστερά από το **Προσφορές** να το ανεβάσουμε πάνω από το **Phoca Gallery Image Module**. Ανανεώνουμε στον Ιστοτοπο για να δούμε τις αλλαγές.
* Είδαμε πως δημιουργούμε ένα δικό μας ένθετο. Εκτός από ότι κάναμε Θα μπορούσαμε επίσης να εισάγουμε και κάποια μικρή εικόνα ή να τροποποιήσουμε το κείμενο και την εμφάνισή του με οποιονδήποτε τρόπο γνωρίζουμε από την html.
- **ΠΡΟΣΘΕΤΑ (plugins) - PhocaGallery**
* Τα πρόσθετα επεκτείνουν τις λειτουργίες μέσα στο ίδιο το Joomla και βρίσκονται **Επεκτάσεις / Διαχείριση Προσθέτων**
* Στην λίστα μεταξύ άλλων βλέπουμε τον κειμενογράφο JCE που προσθέσαμε εμείς, αλλά και ενσωματωμένες δυνατότητες όπως η **Ταυτοποίηση Joomla** (δηλαδή η σύνδεση με όνομα χρήστη και κωδικό) στην 2η σελίδα την **Αναζήτηση** και την **Αποσύνδεση** και άλλα.
* Δηλαδή πολλές από τις υπάρχουσες λειτουργίες του Joomla είναι με την μορφή plugin. Αυτό επιτρέπει την χρήση παρόμοιων λειτουργιών με περισσότερες δυνατότητες που έχουν φτιάξει άλλοι. Για παράδειγμα κάποιος μπορεί να φτιάξει **ένα καλύτερο plugin για Αναζήτηση**, το οποίο να **εγκαταστήσουμε και να ενεργοποιήσουμε**, **απενεργοποιώντας το βασικό plugin** του Joomla.
* Μέχρι τώρα στα άρθρα μας **Κέρκυρα** και **Παρίσι** εμφανίζαμε από 3 εικόνες χρησιμοποιώντας την ετικέτα της html ****. Έχουμε όμως εγκαταστήσει ένα πρόσθετο, το **Phoca Gallery**, που εξειδικεύεται στην εμφάνιση εικόνων. Θα ήταν καλό να μπορούσαμε να το χρησιμοποιήσουμε για να μας εμφανίσει ακόμα πιο όμορφα, τις εικόνες και μέσα στα άρθρα.
- Για να το κάνουμε αυτό θα πρέπει να εγκαταστήσουμε το **''Phoca gallery image plugin''**. Το ψάχνουμε στο google, το κατεβάζουμε και το εγκαθιστούμε με τον γνωστό τρόπο. **ΠΡΟΣΟΧΗ!** πάντα εγκαθιστούμε την **τελευταία έκδοση** (αυτή με τον μεγαλύτερο αριθμό) και πάντα για **Joomla 3**.
- Για να επιβεβαιώσουμε ότι εγκαταστάθηκε και να δούμε και τα υπόλοιπα πρόσθετα πηγαίνουμε **Επεκτάσεις / Διαχείριση Ενθεμάτων**. Σιγουρεύουμε ότι το **''Phoca gallery image plugin''** είναι **δημοσιευμένο**.
- Τώρα που το εγκαταστήσαμε θα πρέπει να δούμε πως το χρησιμοποιούμε. Κάθε πρόσθετο (plugin) χρησιμοποιείται με διαφορετικό τρόπο σύμφωνα με τις οδηγίες που δίνει αυτός που το δημιουργησε. Ψάχνουμε λοιπόν στο google για **''phoca gallery image plugin display''**. Η αναζήτηση θα μας πάει στην σελίδα [[http://www.phoca.cz/documents/14-phoca-gallery-plugin/58-displaying-phoca-gallery-plugin]]
- Μας εμφανίζει 2 παραδείγματα. Το 1ο είναι **Categories displaying** //(Εμφάνιση κατηγοριών)// και το 2ο είναι **Images displaying** //(Εμφάνιση εικόνων)//. Εμείς θέλουμε το 2ο. Με βάση το παράδειγμα και την επεξήγηση των παραμέτρων μπορούμε να καταλήξουμε ότι εμείς θα γράφαμε έναν κώδικα όπως ο παρακάτω
* {phocagallery view=category|categoryid=2|displayname=0|displaydetail=0|displaydownload=0}
- Αυτό θα μας εμφανίσει τις εικόνες της κατηγορίας με **id 2**, δεν θα εμφανίσει **τίτλο** //(displayname=0)//, **λεπτομέρειες** //(displaydetail=0)// και **σύνδεσμο για download** //(displaydownload=0)//.
- Πηγαίνουμε στην Διαχείριση στο Joomla στο μενού **Εφαρμογές / Phoca Gallery / Categories** και βλέπουμε ποιο **id** έχει η κατηγορία **Παρίσι**. Έστω ότι έχει το **2**.
- Πηγαίνουμε **Περιεχόμενο / Διαχείριση Άρθρων** και πατάμε πάνω στο άρθρο Παρίσι.Πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}} για να δούμε τον html κώδικα.
- Εμφανίζουμε ήδη τις 3 εικόνες μέσω html. Δεν θα σβήσουμε τον κώδικα που τις εμφανίζει, θα τον βάλουμε σε σχόλια ώστε να τον αγνοήσει. Βάζουμε
μετά το τελευταίο ////. Θα μας αλλάξει το χρώμα του κώδικα, ως ένδειξη ότι μπήκε σε σχόλια. Πατάμε {{:el:school:lessons:html:save_n_edit_18.png}} και ανανεώνουμε την σελίδα **Παρίσι** στον Ιστότοπο για να δούμε την αλλαγή.
- Πίσω στην Διαχείριση του άρθρου πατάμε πάλι στο {{:el:school:lessons:html:jce_toggle_source_code.png}} για να δούμε τον html κώδικα.
- Για να εμφανίσουμε τώρα τις εικόνες από το Phoca Gallery θα βάλουμε μέσα στον κώδικα της html {phocagallery view=category|categoryid=2|displayname=1|displaydetail=1|displaydownload=1}
. Το σημαντικό εδώ είναι το **2** που είναι το id της κατηγορίας.
- Αποθηκεύουμε και πηγαίνουμε στον Ιστότοπο για να δούμε τις αλλαγές.
- Κάνουμε ακριβώς τα ίδια βήματα για το άρθρο Κέρκυρα. Δηλαδή βρίσκουμε το σωστό id, βάζουμε σε σχόλια τις ετικέτες και εισάγουμε τον κώδικα για να εμφανίσει τις εικόνες μέσα από το Phoca Gallery.
* Αυτή είναι η λειτουργία ενός **plugin** στο Joomla, μιας επιπλέον λειτουργικότητας που ενσωματώνεται μέσα στο Joomla.
- **Επαναληπτική. Άρθρα στο Joomla**
- Θα δημιουργήσουμε 2 νέα άρθρα και μενού στο Joomla για 2 νέους προορισμούς, έναν για εσωτερικό και έναν για εξωτερικό, π.χ. **Ικαρία** και **Βαρκελώνη** ή όποιες άλλες 2 πόλεις θέλουμε. Θα βάλουμε έναν μικρό τίτλο και μία παράγραφο 4-5 γραμμές περίπου στο κάθε άρθρο.
- Στην συνέχεια θα βρούμε 3 εικόνες για κάθε προορισμό, σε μεγάλο μέγεθος. **Δεν** θα τις μικρύνουμε με το **Gimp**
- Θα οργανώσουμε κατηγορίες στο **Phoca Gallery** για τους 2 προορισμούς όπως ακριβώς κάναμε και για την Κέρκυρα και το Παρίσι και θα ανεβάσουμε τις εικόνες **μαζικά** στην κάθε κατηγορία, με τον τρόπο που είδαμε στην προηγούμενη άσκηση.
- Μόλις τελειώσουμε θα πρέπει οι εικόνες μας να εμφανιστούν στον Ιστότοπο στο μενού **Φωτογραφίες**
- Θα **αντιγράψουμε** (με **Δέσμη Εντολών**) και από μία εικόνα από **Ικαρία** και **Βαρκελώνη** στην κατηγορία αρχική ώστε να φαίνονται άλλες 2 εικόνες στην αρχική σελίδα.
- **Εμφάνιση module μόνο όταν βλέπουμε συγκεκριμένο άρθρο.**
* Έχουμε ήδη δει πως να εμφανίζουμε τις εικόνες από το **Phoca Gallery** μέσα σε ένα άρθρο με χρήση του **Phoca Gallery plugin** και βάζωντας κωδικα {phocagallery .. } μέσα στο άρθρο.
* Έστω ότι **ενώ βλέπουμε το άρθρο Ικαρία** θέλουμε να εμφανίσουμε τις φωτογραφίες της Ικαρίας δεξιά ως ένθεμα στην θέση **Position-7**. Τα ενθέματα όμως δεν συνδέονται με άρθρα αλλά με μενού. Θα φτιάξουμε λοιπόν μια κρυφή ομάδα από μενού και θα βάλουμε μέσα ένα μενού για την Ικαρία.
- Πηγαίνουμε **Μενού / Διαχείριση Μενού / Προσθήκη Νέου Μενού**
- Βάζουμε τίτλο **Κρυφό** και είδος μενού **hidden**.
- Φτιάχτηκε μια νέα ομάδα μενού **Κρυφό** και φαίνεται στην λίστα μαζί με τα άλλα 2 (Main menu, user menu).
- Πατάμε πάνω στην ομάδα μενού **Κρυφό** και στην συνέχεια **Νέο**.
- Ως τίτλο ορίζουμε **Ικαρία** και alias **ikaria**
- Είδος στοιχείου μενού επιλέγουμε **Άρθρα / Μεμονωμένο Άρθρο** και στην συνέχεια επιλέγουμε το άρθρο **Ικαρία** και πατάμε {{:el:school:lessons:html:save_n_exit_18.png}}. Έχουμε δημιουργήσει μία ομάδα μενού **Κρυφό** με ένα μενού **Ικαρία** που δεν φαίνεται στο site μας όπως ακριβώς θέλαμε.
- Πηγαίνουμε **Επεκτάσεις / Διαχείριση Ενθεμάτων**. Δημιουργούμε ένα **νέο** ένθεμα διαλέγοντας τον τύπο **Phoca Gallery Image Module** από την λίστα.
- Ως τίτλο βάζουμε **Ικαρία - Εικόνες**, **τον κρύβουμε** και επιλέγουμε κατηγορία **Ικαρία**.
- Στο **Limit Count** //(Όριο Μέτρησης)// επιλέγουμε ''**5**'', ώστε να μας εμφανίζονται έως 5 εικόνες.
- Επιλέγουμε ''**Hide**'' (//Απόκρυψη//) στα **Display Name** //(Εμφάνιση Ονόματος)//, **Detail Icon** //(Εικονίδιο Λεπτομεριών)// και **Download Icon** //(Εικονίδιο Λήψης)//
- Εάν θέλουμε να μας εμφανίζεται η εικόνα στο πλήρες μέγεθος όταν κάνουμε κλικ, αλλάζουμε επίσης στο **Detail Window** //(Λεπτομέρειες Παραθύρου)// σε ''**HighSlide JS (image only)**'' και στο **Highslide JS Full Image** αλλάζουμε σε ''**Yes**''
- Θέλουμε να εμφανίζεται στα δεξιά, οπότε επιλέγουμε **Position-7**
- Στην καρτέλα **Σύνδεση Μενού** επιλέγουμε **Μόνο στις Επιλεγμένες σελίδες** και τσεκάρουμε μόνο το μενού **Ικαρία** στην ομάδα **Κρυφό**. Τέλος πατάμε {{:el:school:lessons:html:save_n_exit_18.png}}.
- Πηγαίνουμε στον Ιστότοπο και ξαναεμφανίζουμε την σελίδα για την Ικαρία. Αν μας εμφανιστούν οι εικόνες στα δεξιά σημαίνει ότι τα καταφέραμε!
- Κάνουμε ακριβώς τα ίδια παραπάνω βήματα και για την **Βαρκελώνη** για να εμφανίσουμε και σε αυτήν τις φωτογραφίες στα δεξιά. Για να κερδίσουμε χρόνο, στην δημιουργία του νέου Ενθέματος, μπορούμε να αντιγράψουμε το υπάρχον **Ικαρία - Εικόνες** και να τροποποιήσουμε στην συνέχεια τον **τίτλο**, την **κατηγορία**, την **Σύνδεση μενού** και να το **δημοσιεύσουμε**.
* Είδαμε αρκετούς τρόπους να χρησιμοποιήσουμε το **Phoca Gallery**, ένα πρόσθετο για εικόνες στο joomla. Οι εικόνες είναι βασικό στοιχείο ενός site. Η διαχείριση-οργάνωση και η όμορφη εμφάνιση τους είναι αναγκαίες γνώσεις σε ένα CMS όπως το Joomla.
|{{:el:school:lessons:html:joomla_phoca_plugin_paris.jpg?280|Phoca plugin - Paris}}|{{:el:school:lessons:html:joomla_modules_custom_n_phoca_ikaria.png?280|Custom html και Phoca modules - Ικαρία}}|{{:el:school:lessons:html:joomla_modules_phoca_barcelona_admin.png?280|Phoca image module - Admin}}|