Médias

Le Domaine médiatique connecte un widget personnalisé à la bibliothèque multimédia WordPress Déposez le champ, et toute personne qui modifie le widget dans Elementor obtient le sélecteur d'image familier : cliquez, choisissez ou téléchargez, c'est fait à l'intérieur des modules complémentaires principaux Constructeur de widgets« C'est le champ derrière les images de héros, les avatars, les logos et tous les autres emplacements d'image unique dont un widget a besoin ».

Comme chaque champ Widget Builder, Media prend en charge Conditions pour la visibilité du panneau Son jeton passe par le Moteur de modèles de syntaxe Twig« , qui imprime automatiquement l'URL du fichier, donc » <img src="{{ photo }}"> juste des œuvres Les deux guides couvrent les détails.

Contrairement à un champ texte, la valeur du champ Média n'est pas une chaîne C'est un tableau portant celui du fichier url, id, alt(en anglais), et plus encore, et votre modèle atteint chaque pièce avec la notation par points Il y a un raccourci convivial : imprimer le champ vous donne directement l'URL. Et une habitude qui vaut la peine d'être construite dès le premier jour, en gardant le balisage avec un {% if %} donc un champ vide ne laisse aucune image brisée derrière lui.

Ce que fait le domaine Médias #

• Ouvre la médiathèque WordPress depuis le panneau Élémenteur, téléchargez ou choisissez à partir de fichiers existants.
• Stocke la sélection sous forme de tableau avec url, id, et alt parmi ses clés.
• Imprime l'URL sur un jeton direct: {{ hero_image }} sort l'URL du fichier sous forme de raccourci.
• Expose chaque propriété par notation par points: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• Peut filtrer la bibliothèque par type de média(image, vidéo ou audio), et prend en charge les valeurs dynamiques.

Si vous débutez dans la création de widgets, commencez par le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de héros de restaurant avec un seul champ Media nommé hero_image ça remplit la bannière.

Comment ajouter un champ Médias #

Dans l'éditeur Widget Builder, trouvez le Médias champ dans le panneau de gauche, regroupé avec les autres champs multimédias.

Faites-le glisser dans une section sous le Contenu onglet ; une image est un contenu, même lorsqu'elle finit comme un fond CSS Une fois qu'elle atterrit, les options du champ s'ouvrent sur la gauche.

Options du champ multimédia expliquées #

• Étiquette: le texte affiché au-dessus du sélecteur dans Elementor, par exemple “Hero Image”.
• Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement, par exemple hero_image.
• Par défaut: un fichier de départ sous forme de paire d'URL et d'ID, de sorte que le widget tombe sur la page déjà terminée.
• Type de média : filtre ce que la bibliothèque offre, image, vidéo ou audio, empêchant les éditeurs de câbler un mp3 dans une balise img.
• Dynamique : permet à la valeur de provenir d'une source dynamique plutôt que d'un choix fixe.
• Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus Conditions d'affichage du champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Connectez le champ Médias à votre modèle #

La valeur est un tableau, et les règles du modèle en découlent Le jeton direct est un raccourci pour le besoin le plus courant :

<img src="{{ hero_image }}">

L'impression d'une valeur de tableau génère directement son url key, donc cela rend l'URL du fichier. Le formulaire explicite fait de même et se lit plus clairement à côté de ses frères et sœurs :

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->

Maintenant, l'habitude qui sépare les widgets bien rangés des widgets à icônes brisées : la garde vide Un champ Média sans rien de choisi rend les attributs vides, et <img src=""> s'affiche comme une image cassée Enroulez le balisage :

{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}

Le champ fonctionne dans l'onglet CSS aussi Un emplacement d'arrière-plan est une ligne :

.hero-banner {
  background-image: url('{{ hero_image }}');
}

Attention au texte alternatif qui passe intact. {{ hero_image.alt }} imprime tout ce que la médiathèque détient, et les bibliothèques sont pleines d'images avec des champs alt vides Le gardien garde l'attribut présent mais il ne peut pas inventer le texte Les widgets construits pour les clients méritent une note disant aux éditeurs de remplir le texte alt dans la bibliothèque.

Utilisez le contrôle Média dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le champ Médias se rend comme la boîte de sélection d'image standard d'Elementor sous votre étiquette.

Cliquez sur la boîte et la médiathèque WordPress s'ouvre, filtrée sur le type de média que vous avez défini Choisissez ou téléchargez un fichier, confirmez et l'aperçu se met à jour au moment où la sélection atterrit.

Échanger l'image plus tard est le même clic La supprimer vide la valeur, ce qui est exactement le cas de votre {% if %} couvertures de garde.

Cas d'utilisation courants #

• Images de héros et de bannières(en anglais), comme balise img ou arrière-plan CSS.
• Avatars et tirs à la tête dans les widgets de témoignage et d'équipe.
• Logos dans les widgets d'en-tête, de pied de page et de bande client.
• Vignettes de carte où chaque instance de widget comporte une image.
• Fond de section décorative passer à travers background-image dans l'onglet CSS.

Conseils pour travailler avec le domaine Médias #

• Toujours garder avec {% if hero_image.url %}. Un champ non défini restitue autrement un src vide et une icône d'image brisée.
• Imprimer l'alt. alt="{{ hero_image.alt }}" ne coûte rien et transporte le texte alternatif de la bibliothèque dans votre balisage.
• Utilisez le jeton direct pour les arrière-plans CSS. url('{{ hero_image }}') maintient l'onglet CSS lisible.
• Définir une image par défaut. Un widget qui tombe sur la page avec une vraie photo se vend tout seul ; un espace réservé gris ne le fait pas.
• Filtre avec Type de média. Si le slot est une image, dites-le, et la bibliothèque ne proposera pas de vidéos.
• N'oubliez pas que le raccourci est uniquement url. Toute propriété autre que l'URL nécessite une notation par points ; il n'y a pas de raccourci pour id ou alt.

Foire aux questions #

Envelopper #

Le champ Widget Builder Media est le cheval de bataille à image unique Un sélecteur de bibliothèque dans le panneau, un raccourci URL dans le modèle, notation par points pour id et alt& un {% if %} garde debout entre votre widget et une icône d'image cassée Lorsqu'une image devient plusieurs, montez jusqu'à Champ de galerie et sa boucle. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.