{"id":367101,"date":"2023-02-04T12:28:00","date_gmt":"2023-02-04T09:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367101"},"modified":"2023-03-31T19:17:21","modified_gmt":"2023-03-31T16:17:21","slug":"un-guide-du-bloc-dimages-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/un-guide-du-bloc-dimages-wordpress-gutenberg\/","title":{"rendered":"Un guide du bloc d&rsquo;images WordPress Gutenberg"},"content":{"rendered":"\n<p>L&rsquo;un des constructeurs de pages les plus populaires pour WordPress, Gutenberg est livr\u00e9 avec une biblioth\u00e8que d&rsquo;\u00e9l\u00e9ments pr\u00eats \u00e0 l&#8217;emploi, <a href=\"https:\/\/themewp.inform.click\/fr\/les-nouveaux-blocs-wordpress-gutenberg-expliques\/\" title=\"autrement connus sous le nom de blocs Gutenberg\">autrement connus sous le nom de blocs Gutenberg<\/a>. Les blocs permettent une exp\u00e9rience de cr\u00e9ation de page fluide, simplifi\u00e9e et facile car ils sont incroyablement intuitifs et pratiques. Dans ce guide, nous ferons un aper\u00e7u du bloc d&rsquo;images Gutenberg et de tout ce que vous pouvez faire avec.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/b3oXhjbhW6k\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Le bloc d&rsquo;image par d\u00e9faut et comment l&rsquo;ajouter<\/h2>\n<p>En un mot, Gutenberg Image Block vous permet d&rsquo; <strong>ajouter une image o\u00f9 vous voulez sur votre page ou votre publication<\/strong>. Si vous cliquez sur un bouton plus dans votre \u00e9diteur, un nouveau champ s&rsquo;ouvrira. Ici, vous pouvez acc\u00e9der \u00e0 l&rsquo;option Image. Comme vous pouvez le voir ci-dessous, dans cet \u00e9diteur, vous disposez d&rsquo;options distinctes pour ajouter \u00e9galement le bloc d&rsquo;image Gutenberg et le <a href=\"https:\/\/themewp.inform.click\/fr\/introduction-aux-fonctionnalites-du-bloc-de-la-galerie-gutenberg\/\" title=\"bloc de galerie Gutenberg\">bloc de galerie Gutenberg<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" alt=\"Un guide du bloc d&#039;images WordPress Gutenberg\"><\/a><\/p>\n<p>Dans Gutenberg, il existe trois mani\u00e8res diff\u00e9rentes d&rsquo;ajouter des images. Vous pouvez <strong>t\u00e9l\u00e9charger une image depuis votre ordinateur, choisir une image d\u00e9j\u00e0 existante dans votre m\u00e9diath\u00e8que ou l&rsquo;ins\u00e9rer \u00e0 partir d&rsquo;une URL<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" alt=\"Un guide du bloc d&#039;images WordPress Gutenberg\"><\/a><\/p>\n<p>\u00c0 premi\u00e8re vue, le bloc d&rsquo;image contient les m\u00eames options que le bouton Ajouter un m\u00e9dia de l&rsquo;\u00e9diteur classique. Cependant, en y regardant de plus pr\u00e8s, il est \u00e9vident que ce n&rsquo;est que partiellement vrai. Il existe de nouvelles options utiles fournies avec Gutenberg qui faciliteront davantage votre exp\u00e9rience d&rsquo;\u00e9dition d&rsquo;images.<\/p>\n<p>Le premier est un ajout de petits points bleus sur votre image. Gr\u00e2ce \u00e0 ces points, vous pouvez <strong>\u00e9tirer l&rsquo;image et augmenter et diminuer sa taille comme vous le souhaitez<\/strong>. Une autre nouvelle option est la possibilit\u00e9 d&rsquo;\u00e9crire une l\u00e9gende au bas de l&rsquo;image.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" alt=\"Un guide du bloc d&#039;images WordPress Gutenberg\"><\/a><\/p>\n<p>Vous pouvez trouver tous les param\u00e8tres de base juste au-dessus du bloc Image. D&rsquo;autre part, des param\u00e8tres d&rsquo;image plus avanc\u00e9s se trouvent dans l&rsquo;onglet Bloc. Ceux-ci incluent le texte alternatif, la taille de l&rsquo;image, les param\u00e8tres de lien et les options avanc\u00e9es.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" alt=\"Un guide du bloc d&#039;images WordPress Gutenberg\"><\/a><\/p>\n<ul>\n<li><strong>Texte alternatif<\/strong> \u2013 ici, vous pouvez ajouter une courte description de votre image. Cependant, vous pouvez laisser ce champ vide si votre image n&rsquo;est pas un \u00e9l\u00e9ment central de votre contenu.<\/li>\n<li><strong>Taille de l&rsquo;image<\/strong> &#8211; il existe des possibilit\u00e9s de changer la taille de votre image aux tailles par d\u00e9faut, telles que Miniature, Moyenne, Grande et Pleine taille. Une autre alternative consiste \u00e0 ajouter les dimensions exactes de l&rsquo;image en pixels ou \u00e0 d\u00e9terminer la taille souhait\u00e9e en pourcentage par rapport \u00e0 la taille d&rsquo;origine. Si vous faites des erreurs, vous pouvez toujours cliquer sur le bouton R\u00e9initialiser.<\/li>\n<li><strong>Param\u00e8tres de lien<\/strong> &#8211; ici, vous avez quatre options diff\u00e9rentes: Aucun, Page de pi\u00e8ce jointe, Fichier multim\u00e9dia et URL personnalis\u00e9e. L&rsquo;option Aucune vous permet d&rsquo;afficher l&rsquo;image sans lien, tandis que la page de pi\u00e8ce jointe renvoie \u00e0 une page sp\u00e9cifique de votre site qui a pour but de fournir des informations sur l&rsquo;image en question. Quant au fichier multim\u00e9dia, il ouvre l&rsquo;image par lui-m\u00eame. La derni\u00e8re option vous permet d&rsquo;ajouter une URL personnalis\u00e9e pour votre image.<\/li>\n<li><strong>Avanc\u00e9<\/strong> \u2013 dans ce champ, vous pouvez ajouter une classe CSS suppl\u00e9mentaire et \u00e9crire vos propres styles personnalis\u00e9s.<\/li>\n<\/ul>\n<p>Les options suppl\u00e9mentaires de la barre d&rsquo;image incluent l&rsquo;alignement de l&rsquo;image (aligner \u00e0 gauche, \u00e0 droite ou au centre) et changer le type de bloc. Le choix de cette option vous donne la possibilit\u00e9 de <strong>transformer votre bloc en un autre bloc compatible d&rsquo;un simple clic de souris<\/strong>. Par exemple, vous pouvez changer votre type de bloc en galerie, m\u00e9dia et texte, couverture et fichier.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" alt=\"Un guide du bloc d&#039;images WordPress Gutenberg\"><\/a><\/p>\n<p>Si vous souhaitez modifier votre image de la m\u00eame mani\u00e8re que dans l&rsquo;\u00e9diteur WordPress classique, vous pouvez facilement le faire en cliquant sur l&rsquo;ic\u00f4ne en forme de crayon pour ouvrir l&rsquo;image dans la m\u00e9diath\u00e8que WordPress.<\/p>\n<p>Maintenant, c&rsquo;est tout ce qu&rsquo;il y a \u00e0 propos du bloc d&rsquo;image par d\u00e9faut, mais vous devez savoir qu&rsquo;il existe \u00e9galement des options plus avanc\u00e9es.<\/p>\n<h2>Ajout d&rsquo;images \u00e0 l&rsquo;aide de blocs Qi pour Gutenberg<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Blocks for Gutenberg<\/a> est une riche collection de blocs Gutenberg personnalis\u00e9s qui vous permettent de faire bien plus (et d&rsquo;obtenir de meilleurs r\u00e9sultats esth\u00e9tiques) que vous ne le feriez normalement avec des blocs par d\u00e9faut. La <strong>collection peut \u00eatre t\u00e9l\u00e9charg\u00e9e gratuitement \u00e0 partir du r\u00e9f\u00e9rentiel WordPress officiel, vous offrant un magnifique ensemble de 48 blocs pour tout, des \u00e9l\u00e9ments cr\u00e9atifs et de vitrine aux affaires et au r\u00e9f\u00e9rencement<\/strong>. Pour ceux qui veulent des options encore meilleures et des fonctionnalit\u00e9s plus avanc\u00e9es, il existe \u00e9galement le <strong>package Qi Blocks Premium avec 33 blocs suppl\u00e9mentaires<\/strong>.<\/p>\n<p>Cette fois-ci, le bloc qui nous int\u00e9resse ici est le <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/single-image\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloc Single Image<\/a>. Vous penseriez que l&rsquo;ajout d&rsquo;images aux pages et aux publications est la chose la plus simple qui soit, mais le bloc d&rsquo;image unique pour Gutenberg vous permet non seulement de le faire avec la plus grande facilit\u00e9, n&rsquo;importe o\u00f9 sur votre site, mais il est \u00e9galement <strong>livr\u00e9 avec un \u00e9ventail d&rsquo;exclusivit\u00e9s<\/strong>. <strong>_<\/strong> Par exemple, vous pouvez choisir diverses actions d&rsquo;image, ajuster la largeur, la hauteur, les bordures, l&rsquo;alignement, d\u00e9finir le comportement de survol, activer la lightbox, et bien plus encore.<\/p>\n<p>Un autre bloc \u00e9tonnant qui m\u00e9rite notre attention ici est <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/parallax-image-showcase\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parallax Image Showcase<\/a>, qui vous permet de cr\u00e9er des sections d&rsquo;images doubles avec des images qui se d\u00e9placent \u00e0 diff\u00e9rentes vitesses lors du d\u00e9filement, cr\u00e9ant une illusion passionnante de profondeur.<\/p>\n<p>Ensuite, il y a le <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloc Image Hotspots<\/a>, avec des ic\u00f4nes ou d&rsquo;autres symboles plac\u00e9s sur les images, r\u00e9v\u00e9lant des informations lorsque l&rsquo;utilisateur les survole.<\/p>\n<p>Enfin, le <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloc Image Slider<\/a> peut vous aider \u00e0 cr\u00e9er des curseurs impressionnants et attrayants avec vos images s\u00e9lectionn\u00e9es, ajoutant une touche de dynamisme \u00e0 vos pages. Avec ce bloc, vous n&rsquo;avez plus besoin de plugins de curseur compliqu\u00e9s et difficiles \u00e0 personnaliser. Vous obtenez tout ce dont vous avez besoin dans un bloc unique, intuitif et enti\u00e8rement personnalisable.<\/p>\n<p>Comme nous l&rsquo;avons vu, vous pouvez faire beaucoup avec le bloc Image, que vous utilisiez celui par d\u00e9faut fourni avec Gutenberg ou que vous optiez pour une solution tierce, comme dans le cas des blocs Qi pour Gutenberg. Les images sont tr\u00e8s importantes pour tout site Web, car elles peuvent souvent dire et faire bien plus que des mots. Gr\u00e2ce \u00e0 Gutenberg, les ajouter \u00e0 vos publications et pages n&rsquo;a jamais \u00e9t\u00e9 aussi simple.<\/p>\n<p>Nous esp\u00e9rons que vous avez trouv\u00e9 cet article utile. Si vous l&rsquo;avez aim\u00e9, n&rsquo;h\u00e9sitez pas \u00e0 consulter \u00e9galement certains de ces articles\u00a0!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce petit guide, nous ferons un aper\u00e7u de Gutenberg Image Block et vous montrerons tout ce que vous pouvez faire avec cette option utile.<\/p>\n","protected":false},"author":1,"featured_media":363766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-367101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=367101"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/367101\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=367101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=367101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=367101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}