Joomla Tutorials

 Στο τελευταίο άρθρο της σειράς( Cassiopeia, το ισχυρό ενσωματωμένο πρότυπο του Joomla: Πως να χρησιμοποιήσετε κλάσεις CSS για την κατηγορία ιστολογίου ) αναφερθήκαμε στις κλάσεις css για την κατηγορία ιστολογίου. Σε αυτό, θέλουμε να εξερευνήσουμε τις δυνατότητες διαμόρφωσης και τοποθέτησης εικόνων μέσα σε ένα άρθρο.

Επιλογές άρθρων
Στο Joomla 4 υπάρχει η δυνατότητα να εισάγεις css κλάσεις για τις εικόνες. Στην ενότητα Περιεχόμενο -> Επιλογές -> Επεξεργασία διάταξης μπορείτε να βρείτε τα πεδία Κλάση Εισαγωγικής Εικόνας και Κλάση Εικόνας Πλήρους Κειμένου. Οι κλάσεις που εισάγετε εδώ χρησιμοποιούνται συνολικά σε όλα τα άρθρα.

Το πεδίο Κλάση Εισαγωγικής Εικόνας είναι σχετικό μόνο για ένα ιστολόγιο κατηγορίας και δεν αποτελεί μέρος αυτού του άρθρου. Θα επικεντρωθούμε στο πεδίο Κλάση Εικόνας Πλήρους Κειμένου. Σε μια τυπική εγκατάσταση Joomla το πεδίο συμπληρώνεται με την κλάση <<left>>. Οι κλάσεις κληρονομιάς <<left>> και <<right>> μόνο μετακινούν μια εικόνα προς την αντίστοιχη κατεύθυνση στο πρότυπο Cassiopeia.

Χρήση κλάσεων
Αφού το πρότυπο Cassiopeia είναι βασισμένο στο Bootstrap, μπορούμε να χρησιμοποιήσουμε τις κλάσεις "float-start" για την τοποθέτηση ολόκληρης της εικόνας στα αριστερά(στα δεξιά για τις γλώσσες που γράφονται από δεξιά προς τα αριστερά) μιας ενότητας κειμένου, "float-end” για την τοποθέτηση ολόκληρης της εικόνας στα δεξιά(στα αριστερά για τις γλώσσες που γράφονται από δεξιά προς τα αριστερά) και "float-none" για καμία μετακίνηση της εικόνας. https://getbootstrap.com/docs/5.3/utilities/float

Για να δοκιμάσουμε τις κλάσεις θα δημιουργήσουμε ένα άρθρο και θα προσθέσουμε μία εικόνα πλήρους κείμενου στην καρτέλα <<Εικόνες και Σύνδεσμοι>> :

Εδώ χρησιμοποιούμε την ευρείας εμβέλειας κλάση "float-start" την οποία τοποθετήσαμε στην ενότητα Περιεχόμενο -> Επιλογές -> Επεξεργασία διάταξης -> Κλάση Εικόνας Πλήρους Κειμένου, αλλά μπορείτε να εισάγετε μια κλάση σε κάθε άρθρο ξεχωριστά. Αυτό είναι το αποτέλεσμα στο μπροστινό τμήμα(frontend):

Για να πετύχετε μια καλαίσθητη εμφάνιση σε εικόνα που έχει τοποθετηθεί με “float”, είναι σημαντικό να γνωρίζετε τις διαστάσεις της εικόνας, επειδή χρειάζεστε χώρο και για το κείμενο. Αν το μέγεθος της εικόνας είναι πολύ μεγάλο, δεν θα υπάρχει ελεύθερος χώρος για το κείμενο. Αν χρησιμοποιήσουμε "float-start" ή ”float-end" η εικόνα θα μετακινηθεί (ή τουλάχιστον θα προσπαθήσει) ανεξαρτήτως του πλάτους του παραθύρου προβολής σας, με απογοητευτικά αποτελέσματα. Παρακάτω φαίνεται πως δείχνει μια εικόνα 767px, αφού έχει χρησιμοποιηθεί το “float”, στο παράθυρο προβολής:

Για να ξεπεράσουμε αυτό το πρόβλημα μπορούμε να χρησιμοποιήσουμε κλάσεις που προσαρμόζονται σε διαφορετικά μεγέθη οθονών: https://getbootstrap.com/docs/5.3/utilities/float/#responsive

Με τη χρήση “float-md-start” η εικόνα θα μετακινηθεί μόνο σε παράθυρα προβολής μεγαλύτερα από 767px. Στα μικρότερα, το κείμενο θα εμφανίζεται κάτω από την εικόνα:

Το μοναδικό πρόβλημα με τις κλάσεις που προσαρμόζονται σε διαφορετικά μεγέθη οθονών είναι ότι δεν περιλαμβάνουν περιθώρια (margin) στο κείμενο, αλλά μπορείτε να προσθέσετε μια κλάση για το περιθώριο επίσης. Για παράδειγμα, "me-md-2": margin end (στη δεξιά πλευρά της εικόνας, για μεσαία και μεγαλύτερα παράθυρα προβολής και μέγεθος 2, δηλαδή 0,5rem).

Περισσότερα στο Bootstrap: https://getbootstrap.com/docs/5.3/utilities/spacing/

Φυσικά, είναι εφικτό να τροποποιήσετε τη θέση της εικόνας με τη δική σας κλάση css. Θέλετε την εικόνα στο κέντρο; Εισάγετε “image-center” ως κλάση στο πεδίο και προσθέστε το ακόλουθο απόσπασμα κώδικα css στο αρχείο user.css:

.image-center {
  text-align: center;
}

Μπορείτε να διαβάσετε περισσότερα για το αρχείο user.css σε προηγούμενο άρθρο της ίδιας σειράς:
https://magazine.joomla.org/all-issues/december-2023/cassiopeia-joomla-powerful-built-in-template-the-basics 

Διαμόρφωση εικόνων μέσα σε ένα άρθρο
Κάποιες φορές θα έχουμε περισσότερες από μια εικόνες σε ένα άρθρο. Μπορούμε να χρησιμοποιήσουμε το πεδίο της εικόνας πλήρους κειμένου για την πρώτη εικόνα και να προσθέσουμε και άλλες ενδιάμεσα από τις παραγράφους του κειμένου. Ακόμη, μπορείτε να χρησιμοποιήσετε κλάσεις css.

Για να εισάγετε μια εικόνα στο κείμενο πατήστε το πτυσσόμενο μενού και επιλέξτε Πολυμέσα, πλοηγηθείτε στο σωστό φάκελο και επιλέξτε μια εικόνα. Θα ανοίξει ένα νέο παράθυρο με πολλαπλά πεδία:

* Περιγραφή εικόνας (Alt Text) - σημαντικο για την προσβασιμότητα και το SEO. Στην περίπτωση που η εικόνα σας είναι απλώς διακοσμητική μπορείτε να επιλέξετε το κουτί “Καμία περιγραφή”, το Joomla θα προσθέσει ένα κενό χαρακτήρα στην εικόνα. (alt-attribute (alt = “”))
* Η εικόνα θα φορτωθεί με αργούς ρυμθούς
* Κλάση εικόνας: η css κλάση θα συμπληρωθεί στο ίδιο το στοιχείο εικόνας
* Κλάση Figure: η κλάση css θα προστεθεί στο στοιχείο figure που περιέχει την εικόνα. Ένα στοιχείο figure θα δημιουργηθεί μόνο αν υπάρχει λεζάντα
* Λεζάντα: μια ορατή λεζάντα (αποτελεί ενίσχυση και όχι αντικατάσταση της περιγραφής της εικόνας)

  Η εικόνα τοποθετήθηκε σε ένα πλαίσιο κειμένου και εμφανίστηκε στην αριστερή πλευρά του άρθρου ("float-md-end"):

Εκπληκτικά παραδείγματα

Ας δοκιμάσουμε διαφορετικούς τρόπους διαμόρφωσης. Το Bootstrap διαθέτει την κλάση “img-thumbnail” για τις εικόνες: 

Η κλάση προσθέτει θολό περίγραμμα γύρω από την εικόνα.

Τι γίνεται με μια εικόνα στο κέντρο που έχει στρογγυλοποιημένες γωνιές; Παιχνιδάκι! Απλώς προσθέστε τις κλάσεις “rounded-5 mx-auto d-block”:

Περισσότερα για στρογγυλοποιημένες γωνιές: https://getbootstrap.com/docs/5.3/utilities/borders/#radius

Στο επόμενο παράδειγμα θα ενσωματώσω κίτρινο περίγραμμα σε μια εικόνα που βρίσκεται στο κέντρο του παραθύρου: “border border-5 border-warning-subtle mx-auto d-block”:

Περισσότερα για περιγράμματα: https://getbootstrap.com/docs/5.3/utilities/borders/#border

Με τη χρήση του Bootstrap δεν χρειάζεται να γράψεις ούτε μια γραμμή css μόνος σου.

Θέλεις κάτι ακόμα πιο εκπληκτικό; Βρήκα αυτή τη γεννήτρια περιγράμματος https://css-generators.com/custom-borders/ και χρησιμοποίησα τον ακόλουθο κώδικα για την εικόνα μου:

.box {
    --mask:
        linear-gradient(#000 0 0) 50%/calc(100% - 55.5px) calc(100% - 55.5px) no-repeat,
        radial-gradient(farthest-side,#000 98%,#0000) 0 0/60px 60px round;
    -webkit-mask: var(--mask);
            mask: var(--mask);
}

 ‘Ενα τελευταίο παράδειγμα διαμόρφωσης εικόνων με την ιδιότητα mask-image. Χρησιμοποιώντας μια γεννήτρια SVG δημιούργησα μια φόρμα blob (https://app.haikei.app/ ) και το αποθήκευσα στο                "media/templates/site/cassiopeia/images".
Με τον παρακάτω css κωδικα χρησιμοποιω το SVG ως μάσκα για την εικόνα μου:

.fancy-border2 {
    -webkit-mask-image: url(../images/blob-haikei.svg);
    mask-image: url(../images/blob-haikei.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

Περισσότερα για την ιδιότητα mask-image: https://www.w3schools.com/css//css3_masking.asp

Με τη css έχετε πολλές πιθανότητες να διαμορφώσετε τις εικόνες σου στο Joomla. Ελέγξτε το Bootstrap documentation, εξοικειωθείτε με τις διαθέσιμες κλάσεις στην css και χρησιμοποιηστε τις! Αν βρείτε στο Διαδίκτυο κάτι που να σας εμπνέει, ελέγξτε τον κώδικα, δημιουργήστε μια κλάση css στο αρχείο σας user.css και φτιάξτε καταπληκτικές εικόνες!

Σάββα Σταυρούλα

Φοιτήτρια Ψηφιακών Συστημάτων. Έκανα την πρακτική μου στη δημιουργία ιστοσελίδων. Είμαι ενθουσιασμένη με το Joomla και με αυτόν τον τρόπο επιθυμώ να δείξω και σε άλλους τη χρησιμότητά του!