Como insertar una imagen hero mediante CSS en Genesis Sample

Nota: ver cómo está hecho en decubriendo línkedin para la imagen de cabecera del blog. Esto nos permite diferenciar claramente la imagen que se muestra en escritorio de la que se muestra en móvil. Esto lo podremos hacer mediante las media queries.

Lo primero que debemos hacer es crear el archivo home.php en el directorio de nuestro theme genesis sample y añadir el siguiente contenido:

<?php
/**
 * WordPress Sin Fronteras.
 *
 * 
 * @package Genesis\Templates
 * @author  Duando
 * @license GPL-2.0+
 * @link    https://duando.net
 */
/*Inserta la imagen de cabecera para el blog*/

add_action('genesis_after_header','du_imagen_hero');
function du_imagen_hero() {
		echo '<div class="imagen-hero-blog"></div>';
}
// Initialize Genesis.

genesis();

Con este código lo que habremos conseguido es insertar un contenedor «div» en la parte superior del renderizado de la home, que como sabemos es la página en la que se muestra la colección de resúmenes de post o, dicho de otra manera, el loop con las entradas de WordPress.

A continuación, debemos añadir el código que se muestra a continuación en el archivo style.css de nuestr child theme.

/*CABECERA BLOG ESCRITORIO*/
.imagen-hero-blog {
	background-image: url("/wp-content/uploads/2020/05/cabecerea-blog.png");
	background-color:transparent;
	max-width: 2200px;
	height: 400px;
	background-size: cover;
}


@media (max-width: 600px) {
	/*CABECERA BLOG EN MÓVIL*/
.imagen-hero-blog {
	background-image: url("/wp-content/uploads/2020/05/cabecerea-blog.png");
	background-color:transparent; 
	height: 400px;
	background-size: cover;
}
}

Como puedes observar es aquí donde se insertarían las imágenes, tanto para escritorio como para dispositivo móvil.

Ir arriba