Comment créer des bibliothèques d’images dynamiques et des curseurs dans WordPress en utilisant des blocs de contenu

Vous recherchez un traitement d’image plus flexible dans le nouvel éditeur de blocs de WordPress? Dans cet article, nous vous montrerons comment créer vos propres curseurs et bibliothèques d’images statiques ou dynamiques dans l’éditeur de blocs en utilisant des blocs d’outils. Si vous n’êtes pas familier avec le contenu, il s’agit d’un ensemble d’outils qui vous aident à gérer le contenu personnalisé et les sites WordPress dynamiques. Il vous aide à ajouter et à visualiser des types de messages personnalisés, des champs personnalisés, etc. Avec Toolkit Blocks, vous pouvez faire tout cela en utilisant l’éditeur natif Block de WordPress.
Les lecteurs de WP Mayor bénéficient d’une réduction exclusive de 20% sur l’achat d’un ensemble d’outils. Ensuite, nous nous concentrerons sur une partie spécifique du bloc d’outils: l’image. Continuez à lire et Découvrez comment il fonctionne et comment il vous aide à créer de meilleurs sites WordPress. Comment les blocs d’outils aident – ils à traiter les images WordPress? Les blocs d’outils vous aident à visualiser le contenu de votre site WordPress sans Code en utilisant l’éditeur de blocs WordPress natif. Nous avons déjà écrit ici sur les blocs d’outils. Vous pourriez dire: \
Le bloc d’outils diffère en ce sens qu’il vous aide également à visualiser le contenu personnalisé, comme les champs personnalisés et la taxonomie ajoutés à l’aide d’un ensemble d’outils. Vous pouvez même utiliser l’éditeur de bloc pour concevoir des modèles pour n’importe quel type de post personnalisé que vous créez. Cependant, je me suis un peu éloigné de la tradition parce que cet article est sur l’image. Avec Toolkit Block v.1.3, vous pouvez accéder à deux blocs centrés sur l’image: la bibliothèque: créer une bibliothèque de grille, de maçonnerie ou de collage. Curseur d’image: crée un curseur et un carrousel avec différentes mises en page, titres, etc. Les deux blocs vous permettent de créer des bibliothèques ou des curseurs à partir d’un ensemble d’images fixes, ainsi que de nombreux op
Contrôle le style et la disposition de la Bibliothèque \/ curseur.
Cependant, ces blocs deviennent plus utiles et, contrairement à d’autres bibliothèques et plug – ins de blocs de défilement, vous pouvez également insérer dynamiquement des images dans les bibliothèques et les curseurs de n’importe où sur le site. Vous pouvez télécharger des images en utilisant les champs personnalisés ajoutés avec le contenu et les insérer automatiquement dans la bibliothèque. Vous pouvez même créer des modèles pour les types de messages personnalisés que vous ajoutez, puis remplir automatiquement la Bibliothèque comme ceci. Par exemple, sur un site immobilier, vous pouvez créer un type de message personnalisé \
C’est bien, n’est – ce pas? Dans la section suivante, je vais vous montrer comment cela fonctionne. Comment utiliser des blocs d’image de contenu statique maintenant, je vais vous montrer étape par étape comment utiliser la nouvelle bibliothèque de contenu et les blocs de défilement. Pour chaque bloc, je vais d’abord vous montrer comment l’utiliser avec un ensemble d’images fixes. Cela vous donnera une bonne idée de la fonctionnalité de chaque bloc. Donc, dans la section suivante, je vais vous montrer comment remplir dynamiquement les bibliothèques et les curseurs. Lorsque vous saisissez un nouveau bloc de bibliothèque, vous pouvez choisir parmi trois mises en page différentes:
Montage des murs de grille Une fois la mise en page sélectionnée, vous pourrez ajouter des images pour: télécharger de nouvelles images sélectionnez des images existantes dans la médiathèque remplissez dynamiquement ces images à partir des champs personnalisés ajoutés à ce message (ou à tout autre message). Je vais enregistrer le contenu dynamique pour la section suivante, donc nous n’avons qu’à Télécharger quelques nouvelles images: Tu as une galerie. Tu peux, quin.
Utilisez la configuration de la barre latérale du bloc à droite: le style de la disposition, comme le nombre de colonnes à utiliser dans une grille ou une bibliothèque de maçonnerie. Titre de chaque image. Indique s’il faut ouvrir l’image dans la boîte lumineuse. La disposition de la grille et de la maçonnerie est évidente, mais la disposition du collage contient des fonctionnalités précises qui vous permettent de choisir parmi une disposition prédéfinie du collage ou de concevoir vous – même:
Si vous Concevez Votre propre mise en page, vous pouvez utiliser le système GRID pour configurer la taille et l’emplacement de chaque élément de la bibliothèque, ce qui est très intéressant: Logiciel: le curseur d’image sniplast fonctionne comme un bloc de galerie. Lorsque vous créez un nouveau curseur d’image, vous pouvez choisir parmi les trois mêmes sources: charger la source dynamique de la médiathèque, puis utiliser l’option à côté: changer le nombre de colonnes. Les colonnes seront des curseurs traditionnels, et vous pouvez créer un Carrousel en ajoutant plus de colonnes. Sélectionnez un style de défilement différent. Style de contrôle. Maintenant que vous avez appris les bases pour nous donner un aperçu de l’utilisation plus avancée de ces deux widgets, je vais vous montrer comment remplir dynamiquement les bibliothèques et les curseurs.
Comment utiliser des blocs d’images de contenu dynamique bien que les nouveaux blocs d’outils soient utiles pour les images statiques, il existe de nombreux blocs qui peuvent vous aider à créer des bibliothèques et des images statiques. Ce qui rend les blocs d’images du nouvel ensemble d’outils vraiment puissants (et uniques) est le contenu dynamique. Vous pouvez remplir dynamiquement le contenu d’une bibliothèque ou d’un curseur avec des images dans un champ d’image personnalisé que vous ajoutez en utilisant le contenu. Vous pouvez également utiliser le champ image dupliquée qui vous permet d’ajouter toutes les images n
Exclure des champs personnalisés.
Alors… Comment fonctionne – t – il dans la pratique? Pour rendre cet exemple plus concret, j’a i créé un type de poste personnalisé, House, en utilisant un ensemble d’outils. J’ai donc ajouté un champ d’images en double dans lequel vous pouvez télécharger des photos de l’intérieur de la maison. Voici un exemple de duplication normale des champs d’image lors de la création d’une nouvelle page d’accueil: Logiciel: sniplast je vais maintenant vous montrer comment insérer dynamiquement ces images dans une galerie ou un curseur. Lorsque vous ajoutez un bloc de galerie, vous pouvez toujours sélectionner une mise en page et utiliser tous les autres paramètres que j’ai affichés précédemment.
Ce n’est que maintenant que vous verrez la demande d’ajout d’une image que la source dynamique sera sélectionnée: Vous pourrez ensuite sélectionner les champs personnalisés de l’image dupliquée comme source: Lorsque vous sélectionnez cette source, vous verrez un aperçu de la bibliothèque en utilisant les images de champ personnalisées que je vous ai montrées précédemment: Si vous ajoutez ou supprimez des images de ce champ personnalisé, ces modifications s’appliquent automatiquement à votre bibliothèque. Curseur d’image vous pouvez utiliser la même méthode avec le curseur d’image. Lorsque vous ajoutez un nouveau curseur d’image, vous pouvez sélectionner une source dynamique pour l’image, puis sélectionner un champ d’image dupliqué, comme je l’ai montré dans le bloc galerie:
Nous avons travaillé avec l’équipe derrière toolset, un générateur de pages qui vous permet de créer des sites WordPress sans codage et vous offre une réduction exclusive de 20%. 20% de réduction vous pouvez également utiliser du contenu dynamique dans d’autres messages \/ pages en plus d’insérer dynamiquement des images pour les messages en cours de traitement, vous pouvez également remplir dynamiquement des galeries ou des curseurs à d’autres endroits du site. Par exemple, supposons que t
Recréer la galerie et le curseur n’importe où sur le site WordPress, y compris les modèles créés avec le contenu. Si vous souhaitez voir des exemples de ce qu’un ensemble d’outils peut faire et comprendre comment il fonctionne, consultez la documentation de l’ensemble d’outils et le site Web de référence. Si vous voulez essayer le contenu vous – même, cliquez sur le lien ci – dessous pour commencer. Obtenir un ensemble d’outils