Hoy traigo un tutorial que llevo tiempo queriendo escribir. Como configurar una imagen por defecto para los artículos en Monochrome Pro.
En muchas ocasiones se usan imágenes por defecto para no romper el diseño de una web. Es lo que en inglés llaman a fallback image.
Lo he buscado en varios sitios y se puede traducir por imagen por defecto o imagen alternativa. Dado el resultado del tutorial, podríamos decir que es más una imagen por defecto.
Imagen por defecto en Monochrome Pro
En Monochrome Pro, los artículos muestran la imagen destacada como fondo de ancho completo, en la cabecera del propio artículo.
Esto ocurre si se cumplen dos condiciones. Si el layout es de ancho completo (full-width), es decir, que no tiene barra lateral y si la imagen destacada está configurada en el propio artículo. En caso contrario se vería así.
Pues bien, la idea es escoger una imagen por defecto para eliminar la segunda condición. En otras palabras. Siempre que tenga layout de ancho completo, se mostrará la imagen destacada configurada o la que escojamos para mostrar por defecto.
La imagen
Para la imagen por defecto, necesitarás una imagen grande y con buena resolución. Yo me he descargado un paisaje de Pexels. Puedes escoger la que quieras.
Lo importante es el nombre de la imagen. Deberá llamarse fallback.jpg y deberás incluirla en la carpeta /images de Monochrome Pro.
Pasemos al código.
Cambiando condicionales
Para conseguir esta imagen por defecto, vamos a editar un sólo archivo de Monochrome Pro. Este archivo es el single.php. Está en la carpeta raíz del theme.
La primera edición es sencilla. Buscaremos estas lineas de código:
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Y las dejaremos como estas:
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
De esta manera, hemos cambiado el condicional para que se aplique los estilos de imagen destacada (featured-image), siempre que el layout sea full-width.
La función para la imagen por defecto
Hecho le primer cambio, ahora crearemos la función que llamará a la imagen por defecto en caso de que la destacada no esté configurada en el artículo.
Añadiremos este snippet en el mismo archivo single.php. Al final, justo por encima de la línea de código que dice genesis();.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusiones
Una función basada en la original y que nos resuelve el problema de que no se configure la imagen por defecto en los artículos.
Monochrome Pro da mucho juego a la hora de hacer modificaciones sobre la base del theme, pero sin duda esta es una de las que más ganas tenía de publicar.
Ya sabes, para cualquier duda con el código, podéis preguntar abajo en los comentarios. Gracias y feliz día!