Υπάρχει ένας πυρήνας του λογισμικού Joomla με μια λειτουργία που θα σας επιτρέψει να εισάγετε μια εικόνα, αλλά ο Διαχειριστής Εικόνας που παρέχονται από τον Επεξεργαστή Περιεχομένου Joomla (JCE κειμενογράφος) αυξάνει τη λειτουργικότητα του και διευκολύνει τους αρθρογράφους μας στην εισαγωγή των εικόνων τους. Σε αυτό το σεμινάριο θα δείξουμε πώς να εισαγάγετε μια εικόνα χρησιμοποιώντας τον κειμενογράφο JCE και θα σας εξηγήσω μερικά από τα βασικά βήματα του διαχειριστή της εικόνας που προσφέρονται από το JCE.
How to Access the Image Manager (πρόσβαση στον διαχειριστή εικόνας)
Ο Διαχειριστής της εικόνας μπορεί να προσεγγιστεί μέσω του κουμπιού κορνίζας εντός του JCE δηλαδή έχουμε επιλέξει την επεξεργασία ενός άρθρου. Όπως δείχνει και η επόμενη εικόνα μέσα στο τετραγωνισμένο μπλε πλαίσιο.
How to Insert an Image (εισαγωγή εικόνας)
Ο Διαχειριστής εικόνας (image manager) θα σας δώσει πρόσβαση σε εικόνες μέσα από το Media Manager σας, αλλά θα επιτρέψει επίσης σε σας να φορτώσετε μια εικόνα από τον υπολογιστή σας στο Media Manager σας. Για να φορτώσετε μια εικόνα στον Διαχειριστή Media χρησιμοποιώντας τον JCE κειμενογράφο, κάντε κλικ στο εικονίδιο upload όπως δείχνει η επόμενη εικόνα. Εδώ είναι σημαντικό να γνωρίζουμε τι τύπο εικόνας πρέπει να ανεβάζουμε. Οι καλύτερες εικόνες και ο συνήθης τύπος πρέπει να είναι png ή jpg και η ανάλυση να μην ξεπερνάει τα 800Χ600. Ακόμη σημαντικό είναι οι φωτογραφίες να μπαίνουν σε συγκεκριμένο φάκελο για να είναι εύκολη η αναζήτησή τους. Στην επόμενη φωτογραφία πριν ανεβάσετε φωτογραφίες πατήστε στην μεσαία στήλη τους φακέλους για να φανεί το περιεχόμενο τους. Για παράδειγμα εάν θέλουμε να ανεβάσουμε φωτογραφίες για τα multicopters και κάνουμε επιλογή στο φάκελο projects αμέσως μετά επιλέγουμε το φάκελο multicopters οπότε αφού μας δείξει το περιεχόμενο του φακέλου μετά ξεκινάμε την διαδικασία να ανεβάσουμε φωτογραφίες. Επίσης σημαντικό είναι η ονομασία του αρχείου της φωτογραφίας να είναι με λατινικούς χαρακτήρες ποτέ με ελληνικά γράμματα.
Στο παράθυρο που θα ανοίξει το ονομαζόμενο Upload window όπως δείχνει η επόμενη εικόνα, επιλέξτε το Browse button για να βρεθεί μια νέα εικόνα από τον υπολογιστή σας.
Βρείτε την εικόνα στον υπολογιστή σας επιλέξτε την και όπως φαίνεται στην επόμενη εικόνα θα εμφανιστεί το όνομα του μέσα στο Upload window, επιλέξτε το Upload button.
Αμέσως μετά η φωτογραφία θα εμφανιστεί μέσα στον Media Manger, και θα δείτε μια μικρή προεπισκόπιση της εικόνας στην περιοχή των σχολίων (Details). Η εικόνα δεν είναι ακόμη έτοιμη να εισαχθεί μέσα στο άρθρο. Πρέπει να κάνετε κλικ στο αρχείο της εικόνας (βήμα 1 στην επόμενη εικόνα), έτσι ώστε η περιοχή με τις Ιδιότητες (properties) στο Διαχειριστή της εικόνας(image manager) να συμπληρωθεί με τις λεπτομέρειες της εικόνας σας. Μόλις η περιοχή Properties έχει τη διεύθυνση URL και το εναλλακτικό κείμενο (Alternate Text) για την εικόνα και η εικόνα θα εμφανιστεί στην περιοχή προεπισκόπησης(Preview) (βήμα 2), αμέσως μετά μπορείτε να κάνετε κλικ στο κουμπί Εισαγωγή (Insert) στο κάτω μέρος του Διαχειριστή εικόνας (image manager) για να εισαγάγετε την εικόνα μέσα στο άρθρο (βήμα 3).
Αμέσως μετά η εικόνα θα εμφανιστεί μέσα στην περιοχή του κειμένου που μας προσφέρει ο jce editor δηλαδή μέσα στο άρθρο σας όπως φαίνεται και στην επόμενη εικόνα.
Επιπλέον λειτουργίες του Image Manager
Μόλις μια εικόνα και κείμενο εισάγεται στο άρθρο σας, μπορείτε να εξερευνήσετε και κάποια άλλα χαρακτηριστικά του JCE.
- Επεξεργασία των διαστάσεων μιας εικόνας
Παρά το γεγονός ότι είναι η καλύτερη πρακτική για να επεξεργαστείτε τις διαστάσεις της εικόνας πριν μπει αυτή μέσα στο άρθρο, αλλά μπορείτε να επεξεργαστείτε τις διαστάσεις χρησιμοποιώντας τον JCE κειμενογράφο. Πρώτα, επιλέξτε την την εικόνα (βημα 1) που θέλετε να εργαστείτε και για να ενεργοποιήσετε τον Διαχειριστή εικόνας (βήμα 2) πατήστε το γνωστό εικονίδιο οπως δείχνει η επόμενη εικόνα.
Ακόμα κι αν μπορείτε να επεξεργαστείτε τις διαστάσεις μιας εικόνας όπως εδώ, δεν πρέπει να χρησιμοποιήσετε αυτό για την επεξεργασία μεγάλων διαστάσεων μιας εικόνας. Ο λόγος είναι, ότι η Joomla δεν είναι ένα λογισμικό επεξεργασίας εικόνας. Ακόμα και μετά την επεξεργασία της εικόνας σας σε διαστάσεις για να χωρέσει μέσα στην περιοχή που μας δίνει ο κειμενογράφος αυτό δεν αλλάζει το μέγεθος της πραγματικής αποθηκευμένης εικόνας επάνω στον server. Για παράδειγμα: αν ανεβάσω μια 1000 x 1000 pixels εικόνα, και η περιοχή του κειμενογράφου είναι μόνο 200 x 200 pixels. Μπορεί να επεξεργαστείτε αυτό το μέγεθος για να φανεί το σωστό μέγεθος στην ενότητα μου δηλαδή μέσα στο άρθρο σας, αλλά όταν η σελίδα φορτωθεί, θα εξακολουθεί να φορτώνει μία 1000 x 1000 pixels εικόνα, επειδή αυτό είναι το αρχικό μέγεθος της εικόνας μέσα στο αρχείο. Αυτό θα μπορούσε να δημιουργήσει κάποια περιττή βραδύτητα στην σελίδα σας όταν φορτώνεται σε αργούς υπολογιστές ή άλλες μικρο συσκευές. Είναι καλό να επεξεργαστείτε τις βέλτιστες πρακτικές των εικόνων σας σε διαστάσεις πριν από την αποστολή τους στην Joomla ιστοσελίδα σας και κατεπέκταση ανεβάσετε πάνω στον server.
Χρησιμοποιώντας τα εργαλεία Διαστάσεις (Dimensions βήμα 1), μπορείτε να επεξεργαστείτε τις διαστάσεις της εικόνας σας. Μπορείτε να επιλέξετε να μπορεί το κείμενο να τυλίξει την εικόνα προς τα αριστερά, δεξιά, επάνω, μέση ή στο κάτω μέρος. Μόλις κάνετε την επιλογή σας, το παράθυρο προεπισκόπησης(Preview) (βήμα 2) θα σας δώσει μια ματιά στις αλλαγές σας. Για να είστε βέβαιος ότι θα περάσουν οι νέες ρυθμίσεις να κάνετε κλικ στο κουμπί Ενημέρωση για να αποθηκεύσετε τη δουλειά σας (βήμα 3).
Αμέσως μετά θα πρέπει να επιστρέψετε στην περιοχή εξόδου του άρθρου με το κείμενο για να δείτε την ενημερωμένη εικόνα και κείμενο.
Αναδίπλωση κειμένου γύρω από μια εικόνα (Wrapping text around an image)
Πρώτα, επιλέξτε την την εικόνα (βήμα 1) που θέλετε να εργαστείτε και μετά να ενεργοποιείστε τον Διαχειριστή εικόνας (βήμα 2) όπως δείχνει η επόμενη εικόνα.
Χρησιμοποιώντας τα εργαλεία ευθυγράμμισης όπως φαίνεται στην επόμενη εικόνα, μπορείτε να τυλίξετε το κείμενο γύρω από μια εικόνα. Μπορείτε να επιλέξετε να έχει το κείμενο τυλίξει την εικόνα προς τα αριστερά, δεξιά, επάνω, μέση ή στο κάτω μέρος. Μόλις κάνετε την επιλογή σας, το παράθυρο προεπισκόπησης(Preview) θα σας δώσει μια ματιά στις αλλαγές σας. Για να είστε βέβαιος ότι ενεργοποιήθηκαν να κάνετε επιλογή το κουμπί Ενημέρωση(Update) για να αποθηκεύσετε τη δουλειά σας(βήμα 3).
Αμέσως μετά επιστρέφετε στην περιοχή του κειμενογράφου μέσα στο άρθρο σας για να δείτε τις αλλαγές σας σε κείμενο και εικόνα.
- Προσθήκη padding γύρω από μια εικόνα
Πρώτα, επιλέξτε την την εικόνα που θέλετε να εργαστείτε(βήμα 1) και μετά να ενεργοποιείτε τον Διαχειριστή εικόνας(βήμα 2).
Χρησιμοποιώντας τα εργαλεία περιθώριο (Margin) όπως δείχνει η επόμενη εικόνα, μπορείτε να καθορίσετε την απόσταση (σε εικονοστοιχεία) του περιθωρίου που θέλετε να προσθέσετε γύρω από την εικόνα σας. Αυτό θα προσφέρει ένα μικρό κενό μεταξύ εικόνας και κειμένου που έχετε τυλιγμένο. Μπορείτε να επιλέξετε να κρατήσει ίσες τιμές γύρω από όλες τις πλευρές της εικόνας ή μπορείτε να επιλέξετε διαφορετικές αποστάσεις γύρω από κάθε πλευρά της εικόνας. Μετά κάνετε επιλογή στο κουμπί Ενημέρωση για να αποθηκεύσετε τη δουλειά σας(βήμα 3).
Αμέσως μετά επιστρέφετε στην περιοχή του κειμενογράφου για να δείτε τις αλλαγές σας σε κείμενο και εικόνα μέσα στο άρθρο σας.
- Δημιουργώντας ένα περίγραμμα γύρω από μια εικόνα
Πρώτα, επιλέξτε την την εικόνα που θέλετε να εργαστείτε(βήμα 1) και μετά να ενεργοποιήστε τον Διαχειριστή εικόνας(βήμα 2).
Χρησιμοποιώντας τα εργαλεία των συνόρων (Border), μπορείτε να προσθέσετε ένα περίγραμμα γύρω από την εικόνα. Μπορείτε να κάνετε τις επιλογές πλάτος, το στυλ και το χρώμα. Η περιοχή προεπισκόπησης θα σας επιτρέψει να κάνετε προεπισκόπηση των συνόρων σας. Tέλος να κάνετε επιλογή στο κουμπί Ενημέρωση για να αποθηκεύσετε τη δουλειά σας
Αμέσως μετά επιστρέφετε στην περιοχή του κειμενογράφου για να δείτε τις αλλαγές σας σε κείμενο και εικόνα. Βέβαια και μία τελική αποθήκευση στο άρθρο.
