¿Cómo puedo añadir múltiples imágenes a la página principal en Divi?

¿Alguna vez has querido añadir varias imágenes a la portada para ilustrar un mismo artículo? No me refiero a las imágenes que se insertan en el cuerpo del artículo, sino a la imagen destacada, la que ilustra tu artículo en la página del blog y que también se encuentra en la parte superior del artículo, justo debajo de su título.

 

Eso es bueno, en este artículo, veremos cómo añadir diferentes imágenes de portada dentro del mismo artículo con la ayuda de un plugin y unas pocas líneas de código...

¡Descubra Divi ahora!

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los patrocinados en rosa.

 

1 - Requisitos para añadir varias imágenes a la página principal

Aunque vamos a utilizar una extensión para añadir múltiples imágenes de la página principal a nuestros puestos de Divi, todavía tendremos que añadir unas pocas líneas de código aquí y allá ... Para completar este tutorial, usted necesitará :

• de crear un tema hijo para Divi
• un editor de código como Bracket o SublimText
• instalar y activar la extensión Múltiples imágenes destacadas
• algo de concentración y paciencia 😉

En el siguiente ejemplo, voy a añadir 3 imágenes de portada además de la imagen básica de portada. Por supuesto, no es necesario añadir tantas y puede detenerse en dos o tres imágenes de la página principal. En este caso, te encargarás de modificar ligeramente el código para que no haya errores...

 

2 - El código a añadir al archivo functions.php

Una vez que hayas instalado y activado la extensión de Imágenes Destacadas Múltiples, tendrás que añadir unas líneas de código al archivo functions.php de tu tema hijo Divi.

Este código se añade al código ya presente en este archivo functions.php, aquí está la versión de texto:

add_filter( 'kdmfi_featured_images', function( $featured_images ) {

// Add featured-image-2 to page and post
$args_1 = array(
'id' => 'featured-image-2',
'desc' => 'Cette image apparaitra en haut, sous le titre de votre article',
'label_name' => 'Image en haut des articles',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

// Add featured-image-3 to pages and posts
$args_2 = array(
'id' => 'featured-image-3',
'desc' => 'Cette image apparaitra à la fin de vos articles',
'label_name' => 'Image en bas des articles',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

// Add featured-image-4 to page and post
$args_3 = array(
'id' => 'featured-image-4',
'desc' => 'Cette image apparaitra dans un widget à placer dans la sidebar',
'label_name' => 'Image Pinterest Widget Sidebar',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

// Add the featured images to the array, so that you are not overwriting images that maybe are created in other filter calls
$featured_images[] = $args_1;
$featured_images[] = $args_2;
$featured_images[] = $args_3;

// Important! Return all featured images
return $featured_images;
});

Este código está diseñado para añadir múltiples imágenes de portada a tus páginas y entradas. Si quieres añadir estas imágenes múltiples sólo a tus posts, entonces puedes cambiar la línea post_type => array ( 'page', 'post'), por post_type => array( 'post'),

Del mismo modo, si sólo quiere añadir una imagen a la página principal (además de la que ya está allí), entonces su código debería ser así:

add_filter( 'kdmfi_featured_images', function( $featured_images ) {

$args = array(
'id' => 'featured-image-2',
'desc' => 'Your description here.',
'label_name' => 'Featured Image 2',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

$featured_images[] = $args;

return $featured_images;
});

Fíjese bien en las diferencias entre estos dos trozos de código y haga los cambios en función del número de imágenes de portada que desee insertar.

Para más información, puede ver las instrucciones en la página de extensión.

 

3 - El código a añadir en el archivo single.php

En este punto, deberían haber aparecido nuevas inserciones de imágenes en la portada de sus artículos. Si intenta añadir imágenes, éstas aparecerán en el back office pero no en el front office. Esto es normal, aún queda un pequeño paso por hacer...

Tienes que duplicar el archivo single.php del tema Divi (el tema padre) y añadir esta copia al directorio de tu tema hijo.

Al mismo tiempo, tendrá que editar este archivo single.php para añadir algunas líneas de código. Estas líneas harán que sus nuevas imágenes aparezcan en la página principal. Esto significa que es usted quien decide dónde añadir estos trozos de código.

En mi prueba, añadí dos imágenes de portada dentro de mi single. php en lugares como la parte superior de mi artículo y la parte inferior de mi artículo:

 

 

Este es el código que hay que añadir:

kdmfi_the_featured_image( 'featured-image-2', 'full' );

No olvides modificarlo según el número de imágenes que vayas a añadir (featured-image-2, featured-image-3, featured-image-4 etc...).

 

4 - Cambiar una opción de Divi

En mi ejemplo, la imagen de la portada de mi artículo que aparece en el módulo del blog o incluso en la página de mis artículos es diferente de la que aparece en la parte superior del artículo.

Para conseguirlo, no sólo tendrás que añadir el código en el lugar adecuado, sino también cambiar una opción en Divi.

En la pestaña Divi > Opciones del tema > Diseño, tendrás que poner la opción " Poner miniaturas en las entradas" en "Desactivar". Esto evitará que tengas dos imágenes seguidas bajo el título de tu post.

 

5 - Uso del widget de imágenes destacadas múltiples

Este widget, implementado con el plugin Multiple Featured Images, le permitirá añadir fácilmente una imagen de la página principal a la barra lateral y/o al pie de página de su sitio.

Esta imagen se mostrará de forma diferente en función de tus publicaciones y de las imágenes que hayas asignado a esta ubicación. Esto es ideal para mostrar la imagen para Pinterest, por ejemplo, o un anuncio de banner.

 

6 - En conclusión...

En este ejemplo, puede ver que el artículo muestra cuatro imágenes de portada:

1. la primera es la imagen básicade la portada
2. la segunda es una imagen de la página principal que se ha añadido a la parte superior del artículo utilizando el plugin y las diversas piezas de código (en single.php y functions.php).
3. la tercera es una imagen de portada que se ha añadido al final del artículo utilizando el plugin y los distintos trozos de código (en single.php y en functions.php).
4. la cuarta es una imagen de la página principal que se ha añadido utilizando un widget en la barra lateral (y el código insertado en functions.php).