Το αίτημα ερχόταν πάντα με την ίδια μορφή. Ένας πελάτης έβλεπε έναν ιστότοπο με ένα βίντεο σε loop πίσω από τον τίτλο και ήθελε το ίδιο. Κάθε φορά, η λύση ήταν να ανοίξω το θέμα εκείνου του έργου, να προσθέσω το markup, το CSS του overlay, να στήσω το lazy loading και να θυμηθώ να απενεργοποιήσω το βίντεο στα κινητά. Και μετά το ίδιο ξανά στον επόμενο ιστότοπο, λίγο διαφορετικά, γιατί δεν υπήρχαν δύο θέματα με το ίδιο markup στο hero.
Αυτό είναι χρέος συντήρησης μεταμφιεσμένο σε λειτουργία. Διορθώνεις ένα bug στη φόρτωση και πρέπει να θυμάσαι κάθε θέμα στο οποίο το έχεις βάλει.
Η απόφαση
Ό,τι θέλω σε περισσότερους από έναν ιστότοπους πρέπει να είναι plugin, όχι επέμβαση στο θέμα. Γι’ αυτό το NB Hero Video είναι φτιαγμένο ώστε να εγκαθίσταται οπουδήποτε, σε οποιοδήποτε θέμα, είτε το έχω γράψει εγώ είτε όχι, και να αφήνει το θέμα εντελώς ανέγγιχτο.
Στόχευση με selector, όχι με template
Η βασική σχεδιαστική επιλογή είναι ότι το plugin δεν χρειάζεται να γνωρίζει τίποτα για το θέμα. Μια σελίδα ρυθμίσεων περιέχει επαναλαμβανόμενες γραμμές, και κάθε γραμμή αποτελείται από τρία στοιχεία: έναν CSS selector για την ενότητα που θέλετε, το βίντεο και τη μορφή του overlay. Το plugin βρίσκει την ενότητα στο front end και τοποθετεί το βίντεο από πίσω.
Αυτό σημαίνει ότι λειτουργεί σε ένα hero, σε ένα call to action στη μέση της σελίδας, σε μια ζώνη του footer ή σε μια ενότητα ενός έτοιμου θέματος. Τίποτα δεν είναι hard-coded σε ένα layout, οπότε το ίδιο plugin τρέχει σε κάθε ιστότοπο που συντηρώ και διορθώνεται σε ένα σημείο.
Το κομμάτι που εξοικονομεί τον περισσότερο χρόνο
Για να γράψεις σωστό CSS selector για το θέμα κάποιου άλλου πρέπει να ανοίξεις τα dev tools και να μαντέψεις ονόματα κλάσεων. Γι’ αυτό το plugin έχει έναν picker στο admin: φορτώνετε οποιαδήποτε σελίδα με ενεργό τον picker, κάνετε κλικ στην ενότητα που θέλετε, και εκείνος καταγράφει τον selector για εσάς.
Είναι μια μικρή λειτουργία, και αφαίρεσε το μόνο πραγματικά ενοχλητικό βήμα σε όλη τη ρύθμιση.
Τρεις τρόποι χρήσης
- Γραμμές ρυθμίσεων, για τη συνηθισμένη περίπτωση όπου θέλετε φόντο σε μια υπάρχουσα ενότητα χωρίς να επεξεργαστείτε τίποτα.
- Ένα shortcode, για να προσθέσετε ένα block βίντεο απευθείας στο περιεχόμενο της σελίδας.
- Μια συνάρτηση PHP, για κλήση μέσα από ένα template, όταν χτίζω ο ίδιος το θέμα και το θέλω σε συγκεκριμένο σημείο.
Έλεγχος overlay, ακόμη και χωρίς overlay
Ένα βίντεο πίσω από κείμενο χρειάζεται overlay, αλλιώς το κείμενο δεν διαβάζεται. Όμως δεν είναι κάθε χρήση κείμενο πάνω σε βίντεο, γι’ αυτό τα επίπεδα overlay περιλαμβάνουν και το «κανένα», και το γέμισμα μπορεί να είναι διαβάθμιση ή ομοιόμορφη απόχρωση, ανάλογα με το αν η ενότητα χρειάζεται ένα απαλό σβήσιμο ή μια ενιαία απόχρωση.
Υπάρχει επίσης προαιρετικό κουμπί αναπαραγωγής και παύσης, απενεργοποιημένο από προεπιλογή, γιατί ένα χειριστήριο πάνω σε ένα διακοσμητικό φόντο είναι περιττός θόρυβος. Όταν ενεργοποιηθεί και συνδυαστεί με κανένα overlay, το ίδιο component παύει να είναι φόντο και γίνεται ένας αθόρυβος video player, κάτι που δεν ήταν στο αρχικό brief, αλλά είναι το πιο χρήσιμο μισό από όσα κατασκευάστηκαν.
Αποτέλεσμα
Ένας κώδικας αντί για δώδεκα αντίγραφα. Οι νέοι ιστότοποι αποκτούν video backgrounds χωρίς καμία δουλειά στο θέμα, οι υπάρχοντες βελτιώνονται με μια ενημέρωση του plugin, και τα έτοιμα θέματα αποκτούν τη λειτουργία χωρίς να χρειαστεί fork.
