Contenido
- El problema con WordPress y las "imágenes fluidas"
- La solución que no es jQuery
- El código
- Una confesión
- Advertencias
- Conocimiento necesario: PHP y CSS básicos
- Requiere: Instalación de WordPress, editor de texto de elección
- Tiempo de proyecto: 10 minutos
Si se suscribe a la versión impresa de la revista .net (si no es así, ¿por qué no?), Habrá visto que la edición de este mes incluye un excelente artículo sobre "Diseño receptivo con WordPress".
En el artículo, el autor Jesse Friedman describe una gran cantidad de técnicas realmente útiles para aprovechar al máximo y superar la funcionalidad inherente de WordPress a fin de producir un sitio web receptivo verdaderamente efectivo. Si está pensando en producir un sitio receptivo con WordPress, definitivamente debería obtener una copia de su artículo. Es una lectura obligada.
Habiendo reconstruido recientemente mi blog personal en WordPress utilizando un enfoque receptivo, móvil primero, estaba familiarizado con algunas de las técnicas cubiertas en el artículo. Sin embargo, el único elemento que realmente me llamó la atención fue el enfoque de Jesse para habilitar imágenes fluidas a través de jQuery.
El problema con WordPress y las "imágenes fluidas"
Como estoy seguro de que todos saben, las 'imágenes fluidas', que utilizan el ancho máximo: 100%, requieren que las imágenes no tengan un ancho o alto fijo para que puedan escalar al tamaño de su contenedor. Desafortunadamente, WordPress calcula automáticamente las dimensiones de las imágenes generadas a partir de la biblioteca de medios y agrega los atributos de ancho y alto correspondientes a cualquier etiqueta img>.
Esto es excelente para la velocidad de representación de la página, pero arroja un masivo spanner en las obras cuando se trata de crear diseños receptivos, ya que las dimensiones de la imagen ya no están limitadas al tamaño de su contenedor.
Eso es un problema.
La solución que no es jQuery
En su artículo, Jesse ’sugiere usar jQuery para eliminar los atributos de ancho y alto de todas las etiquetas img> en la página una vez que se haya cargado. Esto ciertamente funciona, pero cuando construí mi sitio no me gustó la idea de confiar en JavaScript para lograrlo, especialmente si había muchas imágenes en la página en cuestión.
Aquí es donde los filtros de WordPress vinieron al rescate.
El códice de WordPress define un filtro como:
"... ganchos que WordPress lanza para modificar texto de varios tipos antes de agregarlo a la base de datos o enviarlo a la pantalla del navegador".
Resulta que esto es exactamente lo que necesitamos. Al configurar un filtro para que se ejecute en todas las imágenes como acción final antes de que se representen en la página, podemos usar PHP para eliminar los atributos de ancho y alto, evitando así la necesidad de una manipulación DOM (potencialmente) costosa a través de JavaScript.
El código
- /**
- * FUNCIONES DE IMAGEN RESPONSIVAS
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- función remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (ancho
En el código anterior, agregamos dos filtros mediante la función add_filter. El primer argumento es el filtro al que queremos conectarnos y el segundo especifica la función que queremos ejecutar cuando se llama al filtro.
En nuestro código nos conectamos con dos funciones oscuras:
- post_thumbnail_html - imágenes recuperadas con el post_thumbnail ()
- image_send_to_editor - imágenes agregadas al editor
Luego usamos una expresión regular para eliminar los atributos de ancho y alto de las etiquetas de imagen. Ahora, cuando nuestras imágenes se envían al navegador, pueden ser completamente "fluidas", tal como el Sr. Marcotte nos dijo que deberían hacerlo.
Una confesión
Debo confesar haber tenido la idea de usar Añadir filtro para eliminar atributos que no pude por mi vida localizar los filtros correctos de WordPress para conectarme.
Después de muchas búsquedas, finalmente encontré esta publicación extremadamente útil en Wordpress Stack Exchange de Nathaniel Taintor que proporcionó la información sobre los dos filtros que necesitaba.
Advertencias
Hasta donde yo sé, el único inconveniente importante de este enfoque es que no elimina los atributos de ancho y alto de todas las imágenes de su sitio. Encontré que esto era un problema, específicamente con las imágenes de Gravatar que WordPress usa en los comentarios.
Si alguien tiene una solución a este problema, deje un comentario para que todos podamos beneficiarnos.
Espero que esto haya sido útil y haya demostrado una alternativa a confiar en JavaScript para implementar "imágenes fluidas" en los sitios web de WordPress.
Palabras: David Smith
Dave Smith es diseñador de front-end con sede cerca de la hermosa ciudad de Bath, Reino Unido. Cuando no está trabajando en proyectos web nuevos y emocionantes, se le puede encontrar tocando la trompeta en todo, desde grupos de jazz de Big Band hasta orquestas sinfónicas. Puedes ponerte al día con Dave en Twitter como @get_dave.
