Inhoud
- Het probleem met WordPress en 'vloeiende afbeeldingen'
- De niet-jQuery-oplossing
- De code
- Een bekentenis
- Waarschuwingen
- Kennis nodig: Basis PHP en CSS
- Vereist: WordPress-installatie, teksteditor naar keuze
- Project tijd: 10 minuten
Als je je abonneert op de gedrukte versie van .net magazine (zo niet, waarom niet !?), dan heb je gezien dat het nummer van deze maand een uitstekend artikel bevat over "Responsive Design met WordPress".
In het artikel schetst auteur Jesse Friedman een heleboel echt nuttige technieken om het meeste uit de inherente WordPress-functionaliteit te halen en deze te overwinnen om een echt effectieve responsieve website te maken. Als je erover denkt om een responsieve site met WordPress te maken, moet je zeker een exemplaar van zijn artikel aanschaffen. Het is een must om te lezen.
Nadat ik onlangs mijn persoonlijke blog op WordPress had herbouwd met een responsieve, mobiele benadering, was ik bekend met enkele van de technieken die in het artikel worden behandeld. Het enige item dat me echter echt opviel, was Jesse's benadering om vloeiende beelden mogelijk te maken via jQuery.
Het probleem met WordPress en 'vloeiende afbeeldingen'
Zoals u vast wel weet, vereisen ‘vloeiende beelden’ - die gebruikmaken van max-breedte: 100% - dat beelden geen vaste breedte of hoogte hebben, zodat ze kunnen worden geschaald naar de grootte van hun container. Helaas berekent WordPress automatisch de afmetingen van afbeeldingen die zijn gegenereerd vanuit de mediabibliotheek en voegt de bijbehorende breedte- en hoogtekenmerken toe aan alle img> -tags.
Dit is geweldig voor de weergavesnelheid van pagina's, maar het gooit een enorm roet in het eten als het gaat om het maken van responsieve lay-outs, aangezien de afmetingen van afbeeldingen niet langer beperkt zijn tot de grootte van hun container.
Dat is een probleem.
De niet-jQuery-oplossing
In zijn artikel stelt Jesse voor om jQuery te gebruiken om de breedte- en hoogte-attributen van alle img> -tags op de pagina te verwijderen zodra deze is geladen. Dit werkt zeker, maar bij het bouwen van mijn site vond ik het niet prettig om hiervoor op JavaScript te vertrouwen, vooral als er veel afbeeldingen op de betreffende pagina stonden.
Dit is waar WordPress-filters te hulp kwamen.
De WordPress codex definieert een filter als:
"... hooks die WordPress lanceert om verschillende soorten tekst te wijzigen voordat deze aan de database wordt toegevoegd of naar het browserscherm wordt verzonden."
Het blijkt dat dit precies is wat we nodig hebben. Door een filter in te stellen dat op alle afbeeldingen wordt uitgevoerd als de laatste actie voordat ze op de pagina worden weergegeven, kunnen we PHP gebruiken om de attributen breedte en hoogte te verwijderen, waardoor de noodzaak van (potentieel) dure DOM-manipulatie via JavaScript wordt omzeild.
De code
- /**
- * RESPONSIEVE BEELDFUNCTIES
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- functie remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (width
In de bovenstaande code voegen we twee filters toe met de functie add_filter. Het eerste argument is het filter dat we willen aansluiten en het tweede specificeert de functie die we willen uitvoeren wanneer het filter wordt aangeroepen.
In onze code haken we in twee obscure functies:
- post_thumbnail_html - afbeeldingen opgehaald met de post_thumbnail ()
- image_send_to_editor - afbeeldingen toegevoegd aan de editor
Vervolgens gebruiken we een reguliere expressie om zowel de breedte- als de hoogte-attributen uit de afbeeldingstags te verwijderen. Wanneer onze afbeeldingen nu naar de browser worden gestuurd, kunnen ze volledig ‘vloeiend’ zijn, precies zoals de heer Marcotte ons vertelde dat ze zouden moeten.
Een bekentenis
Ik moet bekennen dat ik het idee heb gehad om add_filter om attributen te verwijderen die ik voor het leven van mij niet de juiste WordPress-filters kon vinden om aan te koppelen.
Na veel zoeken kwam ik eindelijk deze uiterst nuttige post op Wordpress Stack Exchange van Nathaniel Taintor tegen die de informatie bood over de twee filters die ik nodig had.
Waarschuwingen
Voor zover ik weet, is het enige grote nadeel van deze benadering dat het niet de breedte- en hoogtekenmerken van alle afbeeldingen op uw site verwijdert. Ik vond dit een probleem, met name met de Gravatar-afbeeldingen die WordPress in opmerkingen gebruikt.
Als iemand een oplossing voor dit probleem heeft, laat dan een reactie achter, zodat we er allemaal van kunnen profiteren.
Ik hoop dat dit nuttig is geweest en een alternatief heeft gedemonstreerd voor het vertrouwen op JavaScript om ‘vloeiende beelden’ op WordPress-websites te implementeren.
Woorden: David Smith
Dave Smith is front-end designer gevestigd in de buurt van de prachtige stad Bath, VK. Als hij niet aan nieuwe en opwindende webprojecten werkt, kan hij trompet spelen in alles, van bigband-jazzgroepen tot symfonieorkesten. Je kunt Dave op Twitter inhalen als @get_dave.
