{"id":410,"date":"2021-07-16T14:44:13","date_gmt":"2021-07-16T14:44:13","guid":{"rendered":"https:\/\/inserm.xyz\/kb\/?p=410"},"modified":"2022-09-22T13:31:41","modified_gmt":"2022-09-22T13:31:41","slug":"astuces-pour-les-images","status":"publish","type":"post","link":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/?p=410","title":{"rendered":"Astuces pour les images"},"content":{"rendered":"\n<nav aria-label=\"Table des mati\u00e8res\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/contenu\/astuces-pour-les-images\/#ajouter-une-bordure-a-une-image\">Ajouter une bordure \u00e0 une image<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/contenu\/astuces-pour-les-images\/#charger-une-grande-image\">Charger une grande image<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/contenu\/astuces-pour-les-images\/#afficher-une-image-en-taille-reelle\">Afficher une image en taille r\u00e9elle<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/contenu\/astuces-pour-les-images\/#remplir-les-metadonnees\">Remplir les m\u00e9tadonn\u00e9es<\/a><\/li><\/ol><\/nav>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ajouter-une-bordure-a-une-image\">Ajouter une bordure \u00e0 une image<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On peut ajouter une bordure aux images \u00e0 fond blanc, pour \u00e9viter un effet blanc sur blanc et de perdre la d\u00e9limitation entre l&rsquo;image et le fond. Pour \u00e7a :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ouvrir l&rsquo;\u00e9diteur et s\u00e9lectionner un bloc Image<\/li>\n\n\n\n<li>Dans les r\u00e9glages du bloc, faire <code>Avanc\u00e9<\/code><\/li>\n\n\n\n<li>Dans <code>Classe CSS additionnelle<\/code> ajouter <code>border<\/code><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">La classe <code>border <\/code>ajoute une bordure grise de quelques pixels. S&rsquo;il y a d\u00e9j\u00e0 d&rsquo;autres classe dans <code>Classe CSS additionnelle<\/code>, laisser une espace entre les diff\u00e9rences classes pour les s\u00e9parer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"charger-une-grande-image\">Charger une grande image<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les images sont recoup\u00e9es automatiquement (voir <a href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/traitement-des-images\/#imsanity\">Traitement des images<\/a>). Pour ajouter une image plus grande que pr\u00e9vu, il faut :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>D\u00e9sactiver le plugin Imsanity (dans les Extensions)<\/li>\n\n\n\n<li>Importer l&rsquo;image dans la m\u00e9diath\u00e8que<\/li>\n\n\n\n<li>R\u00e9activer Imsanity<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"afficher-une-image-en-taille-reelle\">Afficher une image en taille r\u00e9elle<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quand on affiche une image, elle peut <a href=\"https:\/\/redmine.inserm.cloud-ed.fr\/issues\/178\" data-type=\"URL\" data-id=\"https:\/\/redmine.inserm.cloud-ed.fr\/issues\/178\">ne pas s&rsquo;afficher dans la qualit\u00e9 ou la taille voulue<\/a>, surtout pour les grandes images. Pour afficher la bonne taille d&rsquo;image :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Aller dans les r\u00e9glages du bloc Image<\/li>\n\n\n\n<li>Choisir \u00ab\u00a0Taille de l&rsquo;image\u00a0\u00bb<\/li>\n\n\n\n<li>S\u00e9lectionner \u00ab\u00a0Taille r\u00e9elle\u00a0\u00bb<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/wp-content\/uploads\/2022\/08\/screenshot-www.inserm.fr-2022.08.05-15_23_16-1024x498.png\" alt=\"Backoffice de WordPress montrant une image et les param\u00e8tres du bloc Image. La zone &quot;Taille de l'image&quot; est encadr\u00e9e.\" class=\"wp-image-685\" srcset=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/wp-content\/uploads\/2022\/08\/screenshot-www.inserm.fr-2022.08.05-15_23_16-1024x498.png 1024w, https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/wp-content\/uploads\/2022\/08\/screenshot-www.inserm.fr-2022.08.05-15_23_16-300x146.png 300w, https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/wp-content\/uploads\/2022\/08\/screenshot-www.inserm.fr-2022.08.05-15_23_16-768x373.png 768w, https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/wp-content\/uploads\/2022\/08\/screenshot-www.inserm.fr-2022.08.05-15_23_16.png 1329w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"remplir-les-metadonnees\">Remplir les m\u00e9tadonn\u00e9es<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voir <a href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/contenu\/meta-donnees-des-images\/\" data-type=\"post\" data-id=\"386\">l&rsquo;article d\u00e9di\u00e9<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ajouter une bordure \u00e0 une image On peut ajouter une bordure aux images \u00e0 fond blanc, pour \u00e9viter un effet blanc sur blanc et de perdre la d\u00e9limitation entre l&rsquo;image et le fond. Pour \u00e7a : La classe border ajoute une bordure grise de quelques pixels. S&rsquo;il y a d\u00e9j\u00e0 d&rsquo;autres classe dans Classe CSS [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","_crdt_document":"","footnotes":""},"categories":[35],"tags":[30,39],"class_list":["post-410","post","type-post","status-publish","format-standard","hentry","category-contenu","tag-image","tag-tutoriel"],"_links":{"self":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts\/410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=410"}],"version-history":[{"count":5,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts\/410\/revisions"}],"predecessor-version":[{"id":771,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts\/410\/revisions\/771"}],"wp:attachment":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}