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

Actualizado el 24/07/2018 | Publicado el 26/06/2018 | 3 comentarios

¿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 además está en la parte superior del artículo, justo debajo de su título.

 

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

Descubra Divi ahora!

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

 

1 - Requisitos para añadir múltiples 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á :

plugin Multiple Featured Images

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 tiene que añadir tantas imágenes y puede detenerse en dos o tres imágenes en 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 en el 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.

integration multiple images theme enfant

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'),

Además, si sólo quieres añadir una imagen a la página principal (además de la que ya está ahí), entonces tu 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 realice los cambios en función del número de imágenes de la portada que quiera 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ás 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.

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

ajout image à la une en haut de l'article

Añadir una imagen de portada en la parte superior del artículo

 

ajout image à la une en bas de l'article

Añadir una imagen de portada en la parte inferior del artículo

 

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

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

No olvide modificarlo según el número de imágenes 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 lograr este resultado, no sólo tendrá que añadir el código en el lugar correcto, sino también cambiar una opción en Divi.

option image à la une

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

featured image widget dans la sidebar

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...

Comment ajouter plusieurs images à la une

Cómo añadir varias imágenes de portada: aquí, cuatro imágenes de portada diferentes

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 portada que se ha añadido en la parte superior del artículo utilizando el plugin y los distintos trozos de código (en el single.php y en el functions.php).
  3. la tercera es una imagen de portada que se ha añadido en la parte inferior del artículo utilizando el plugin y los distintos trozos de código (en el single.php y en el functions.php).
  4. la cuarta es una imagen de la página principal que se añadió utilizando un widget en la barra lateral (y el código insertado en el functions.php).

Comment ajouter plusieurs images à la une dans Divi

 

Comment ajouter plusieurs images à la une dans Divi

1.235 palabras

5

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

3 Commentaires

  1. Jan

    Bonjour,

    J’ai une petite question.

    J’ai bien réussi a tout mettre en place comme expliqué dans le tuto
    (qui d’ailleurs au passage je le souligne, est très bien expliqué et agréable a lire)

    Cependant cela ne fonctionne plus quand mon post est crée par le thème Builder.

    faut-il mettre le code ailleurs que dans single PHP pour que cela fonctionne ?

    En gros je voudrais que les image 2 – 3 – 4 soit mise a la suite de mon image en avant 1 dans le post direct.

    mais ma page post est crée avec le thème buidler comme vous l’avez expliqué dans un de vos articles. (ce qui me va très bien) mais pour le coup ne fonctionne pas.

    Pourriez vous m’aider s’il vous plait, enfin m’expliquer comment faire surtout.

  2. Jan

    Bonjour Lycia,

    Je vous ai écrit un message hier soir ici, je bloc complétement sur les images a la une

    quand je l’utilise avec la page single.php tout fonctionne sans aucun souci

    mais j’ai besoin de pouvoir utiliser cette solution en utilisant le thème Builder !

    en faite je eux réussir a avoir deux colonne

    1 colonne de gauche = les images à la une que l’on peu agrandir en cliquant dessus un peu comme si c’était une galerie

    2 colonne de droite = le texte de mon article

    j’ai créée avec theme builder ma page ou j’ai

    en haut le titre avec image en fond = ok

    en dessous deux colonne

    colonne 1 (gauche) j’ai mis titre du post sans afficher le titre et les méta (j’affiche uniquement l’image a la une)
    et je voudrais appeler en dessous les images a la une 2,3,4

    colonne 2 (droite) j’ai mis publier un contenu pour afficher le contenu texte de mon article.

    quel idée ou solution auriez vous pour que je puisse utiliser cette méthode ?

    ps: pour info j’ai enregistrer mon nom et email en dessous de commentaires pour être enregistrer mais je doit retaper mon nom et email a chaque commentaire.

  3. Lycia Diaz

    Salut Jan… Écoute, ici sur Astuces Divi, j’utilise 2 images à la une et aussi le Thème Builder. Donc les deux sont compatibles, plus ou moins, je pense. Si tu regardes mes articles, il y a une image « en anglais » à la fin de la barre latérale, et bien j’ai utilisé ce tuto ici présent… Mais j’ai fait cela dans une sidebar que j’appelle dans mon modèle d’article. Peut-être que tu devrais faire de même. Ensuite, il te suffit d’ajouter un module « barre latérale » où tu veux dans ton modèle et ton image devrait s’afficher. Voilà, je pense que l’astuce est là. Tiens-moi au courant.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto