Περιεχόμενο
- Το πρόβλημα με το WordPress και τις "ρευστές εικόνες"
- Η λύση non-jQuery
- Ο κώδικας
- Μια εξομολόγηση
- Προειδοποιήσεις
- Απαιτείται γνώση: Βασικά PHP και CSS
- Απαιτεί: Εγκατάσταση WordPress, επιλογή κειμένου
- Ώρα έργου: 10 λεπτά
Εάν εγγραφείτε στην έντυπη έκδοση του περιοδικού .net (αν όχι, γιατί όχι !?), θα έχετε δει ότι το τεύχος αυτού του μήνα περιλαμβάνει ένα εξαιρετικό άρθρο σχετικά με το "Responsive Design with WordPress".
Στο άρθρο, ο συγγραφέας Jesse Friedman σκιαγραφεί μια σειρά από πολύ χρήσιμες τεχνικές για να αξιοποιήσετε στο έπακρο και να ξεπεράσετε την εγγενή λειτουργικότητα του WordPress, προκειμένου να δημιουργήσετε έναν πραγματικά αποτελεσματικό ιστότοπο που να ανταποκρίνεται. Εάν σκέφτεστε να δημιουργήσετε έναν ιστότοπο που να ανταποκρίνεται με το WordPress, θα πρέπει σίγουρα να πάρετε ένα αντίγραφο του άρθρου του. Είναι ένα must-read.
Έχοντας πρόσφατα ξαναχτίσει το προσωπικό μου blog στο WordPress χρησιμοποιώντας μια απόκριση, πρώτη για κινητά προσέγγιση, ήμουν εξοικειωμένος με μερικές από τις τεχνικές που καλύπτονται στο άρθρο. Ωστόσο, το μόνο στοιχείο που ξεχώρισα για μένα ήταν η προσέγγιση του Jesse για την ενεργοποίηση ρευστών εικόνων μέσω του jQuery.
Το πρόβλημα με το WordPress και τις "ρευστές εικόνες"
Όπως είμαι βέβαιος ότι γνωρίζετε όλες τις "ρευστές εικόνες" - οι οποίες χρησιμοποιούν μέγιστο πλάτος: 100% - απαιτούν οι εικόνες να μην έχουν σταθερό πλάτος ή ύψος, ώστε να μπορούν να κλιμακωθούν στο μέγεθος του δοχείου τους. Δυστυχώς, το WordPress υπολογίζει αυτόματα τις διαστάσεις των εικόνων που δημιουργούνται από τη βιβλιοθήκη πολυμέσων και προσθέτει τα αντίστοιχα χαρακτηριστικά πλάτους και ύψους σε οποιεσδήποτε ετικέτες> img>.
Αυτό είναι ιδανικό για ταχύτητα απόδοσης σελίδας, αλλά ρίχνει ένα ογκώδης κλειδί στα έργα όταν πρόκειται για τη δημιουργία αποκριτικών διατάξεων καθώς οι διαστάσεις της εικόνας δεν περιορίζονται πλέον στο μέγεθος του κοντέινερ τους.
Αυτό είναι πρόβλημα.
Η λύση non-jQuery
Στο άρθρο του ο Jesse προτείνει τη χρήση του jQuery για την κατάργηση των χαρακτηριστικών πλάτους και ύψους από όλες τις ετικέτες img> στη σελίδα μόλις φορτωθεί. Αυτό σίγουρα λειτουργεί, αλλά κατά τη δημιουργία του ιστότοπού μου δεν μου άρεσε η ιδέα να βασίζομαι στο JavaScript για να το επιτύχω αυτό, ειδικά αν υπήρχαν πολλές εικόνες στην εν λόγω σελίδα.
Εδώ έφτασαν τα φίλτρα WordPress.
Ο WordPress codex ορίζει ένα φίλτρο ως:
"... αγκαλιάζει το WordPress που ξεκινά για να τροποποιήσει κείμενο διαφόρων τύπων πριν το προσθέσει στη βάση δεδομένων ή να το στείλει στην οθόνη του προγράμματος περιήγησης."
Όπως αποδεικνύεται αυτό είναι ακριβώς αυτό που χρειαζόμαστε. Ρυθμίζοντας ένα φίλτρο για προβολή σε όλες τις εικόνες ως την τελική ενέργεια προτού αποτυπωθούν στη σελίδα, μπορούμε να χρησιμοποιήσουμε την PHP για να αφαιρέσουμε τα χαρακτηριστικά πλάτους και ύψους παρακάμπτοντας έτσι την ανάγκη για (δυνητικά) ακριβό χειρισμό DOM μέσω JavaScript.
Ο κώδικας
- /**
- * ΛΕΙΤΟΥΡΓΙΕΣ ΕΥΘΥΝΗΣ ΕΙΚΟΝΑΣ
- */
- add_filter («post_thumbnail_html», «remove_thumbnail_dimensions», 10);
- add_filter («image_send_to_editor», «remove_thumbnail_dimensions», 10);
- συνάρτηση remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (πλάτος)
Στον παραπάνω κώδικα προσθέτουμε δύο φίλτρα χρησιμοποιώντας τη συνάρτηση add_filter. Το πρώτο όρισμα είναι το φίλτρο στο οποίο θέλουμε να συνδέσουμε και το δεύτερο καθορίζει τη λειτουργία που θέλουμε να εκτελέσουμε όταν καλείται το φίλτρο.
Στον κώδικα μας συνδέουμε δύο ασαφείς λειτουργίες:
- post_thumbnail_html - οι εικόνες ανακτήθηκαν με το post_thumbnail ()
- image_send_to_editor - εικόνες που προστέθηκαν στο πρόγραμμα επεξεργασίας
Στη συνέχεια, χρησιμοποιούμε μια κανονική έκφραση για να αφαιρέσουμε τα χαρακτηριστικά πλάτους και ύψους από τις ετικέτες εικόνας. Τώρα, όταν οι εικόνες μας αποστέλλονται στο πρόγραμμα περιήγησης, μπορούν να είναι πλήρως «ρευστές», όπως μας είπε ο κ. Marcotte.
Μια εξομολόγηση
Πρέπει να ομολογήσω ότι είχα την ιδέα να χρησιμοποιήσω add_filter για να αφαιρέσω χαρακτηριστικά που δεν μπορούσα για τη ζωή μου να εντοπίσω τα σωστά φίλτρα WordPress για να συνδεθώ.
Μετά από πολλές έρευνες, συνάντησα τελικά αυτήν την εξαιρετικά χρήσιμη ανάρτηση στο Wordpress Stack Exchange από τον Nathaniel Taintor, η οποία παρείχε τις πληροφορίες σχετικά με τα δύο φίλτρα που χρειαζόμουν.
Προειδοποιήσεις
Από όσο γνωρίζω, το μόνο σημαντικό μειονέκτημα αυτής της προσέγγισης είναι ότι δεν αφαιρεί τα χαρακτηριστικά πλάτους και ύψους από όλες τις εικόνες στον ιστότοπό σας. Βρήκα ότι αυτό ήταν ένα ζήτημα, ειδικά με τις εικόνες Gravatar που χρησιμοποιεί το WordPress στα σχόλια.
Εάν κάποιος έχει μια λύση σε αυτό το ζήτημα παρακαλώ αφήστε ένα σχόλιο, ώστε να μπορούμε όλοι να επωφεληθούμε.
Ελπίζω ότι αυτό ήταν χρήσιμο και έδειξε μια εναλλακτική λύση για να βασιστείτε στο JavaScript για την εφαρμογή «ρευστών εικόνων» σε ιστότοπους του WordPress.
Λέξεις: Ντέιβιντ Σμιθ
Ο Dave Smith είναι σχεδιαστής front end με έδρα κοντά στην όμορφη πόλη του Bath, Ηνωμένο Βασίλειο. Όταν δεν εργάζεται σε νέα και συναρπαστικά έργα Ιστού, μπορεί να βρεθεί να παίζει τρομπέτα σε όλα, από γκρουπ τζαζ Big Band έως Συμφωνικές ορχήστρες. Μπορείτε να επικοινωνήσετε με τον Dave στο Twitter ως @get_dave.
