{"id":2017,"date":"2011-08-20T23:25:04","date_gmt":"2011-08-20T22:25:04","guid":{"rendered":"http:\/\/flaven.fr\/?p=2017"},"modified":"2013-09-24T06:06:38","modified_gmt":"2013-09-24T04:06:38","slug":"wordpress-fonction-images-theme-activer-et-utiliser-les-proprietes-de-la-vignette-par-defaut-sous-wordpress-la-fonction-the_post_thumbnail","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/08\/wordpress-fonction-images-theme-activer-et-utiliser-les-proprietes-de-la-vignette-par-defaut-sous-wordpress-la-fonction-the_post_thumbnail\/","title":{"rendered":"WordPress, fonction, images, theme &#8211; Activer et utiliser les propri\u00e9t\u00e9s de la vignette par d\u00e9faut sous WordPress, la fonction the_post_thumbnail"},"content":{"rendered":"<p><!--  WordPress, fonction, images, theme - Activer et utiliser les propri\u00e9t\u00e9s de la vignette par d\u00e9faut sous WordPress, la fonction the_post_thumbnail --><br \/>\n<!--  WordPress, Widget, Th\u00e8me, PHP, MySQL, fonction, images, propri\u00e9t\u00e9s, vignette, the_post_thumbnail, post, thumbnail --><\/p>\n<p>Il n&#8217;existe pas de crime plus grave que l&#8217;anamorphose aux yeux exigeants d&#8217;un photographe et on peut le comprendre au regard du risque de prendre une balle en Syrie ou de s&#8217;infliger le supplice de faire une photo de star au milieu d&#8217;une foule d\u00e9chain\u00e9e&#8230; Risque mortel dans les deux cas. Si tant est que vous utilisez WordPress comme outil de gestion pour un site internet, il vous faudra donc vous assurer que les photos, images et autres \u00e9l\u00e9ments visuels soient \u00e0 la bonne taille.<!--more--><\/p>\n<p><b>Notre image de d\u00e9part est un portrait de Sean Connery, dont la taille d&#8217;origine est 1091&#215;734. Notre objectif est de mettre cette image dans un rapport de proportionnalit\u00e9 de 320&#215;240.<\/b><\/p>\n<p><i>Ce test a \u00e9t\u00e9 men\u00e9 sur la version de WordPress <b>Version 3.2.1<\/b> en Fran\u00e7ais et sur le th\u00e8me natif nomm\u00e9 <code>wp-content\/themes\/twentyeleven<\/code>.<\/i><\/p>\n<h4>En mode minimaliste ou la &#8220;Crop Mode&#8221;<\/h4>\n<p>Il faut r\u00e9gler la taille de l&#8217;image en redimensionnant l&#8217;image proportionnellement (ce qui concr\u00e8tement signifie de ne pas la la d\u00e9former ou l&#8217;anamorphoser)&#8230;<\/p>\n<h4>L&#8217;activation dans le fichier <code>functions.php<\/code><\/h4>\n<p>De quoi activer les diff\u00e9rents formats dans votre th\u00e8me.<\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n\r\n\t\/* NEW IMAGE SIZE *\/\r\n\r\n\tif ( function_exists( 'add_image_size' ) ) { \r\n\r\n\t\tadd_image_size( 'homepage-slideshow-full', 641, 9999 ); \/* 641 pixels wide (and unlimited height) *\/\r\n\t\tadd_image_size( 'homepage-slideshow-thumb', 131, 98 ); \/\/(cropped)\r\n\t\tadd_image_size( 'on-air-programming-promo-thumb', 194, 145 ); \/\/(cropped)\r\n\t\tadd_image_size( 'mini-slider-thumb', 335, 250 ); \/\/(cropped)\r\n\t}\r\n\t\/* \/\/ NEW IMAGE SIZE *\/\r\n<\/pre>\n<p><strong>Les explications de WP<\/strong><\/p>\n<pre lang=\"php\" escaped=\"true\">\r\nadd_image_size( 'homepage-thumb', 220, 180 ); \/\/ 220 pixels wide by 180 pixels tall, soft proportional crop mode\r\n<\/pre>\n<h4>Un peu de code dans la page du th\u00e8me.<\/h4>\n<p>Le fichier <code>content-page.php<\/code> du th\u00e8me  d\u00fbment modifi\u00e9 dans <code>wp-content\/themes\/twentyeleven<\/code>.<\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n<h1 class=\"entry-title\"><\/h1>\r\n\r\n\t<!-- .entry-header -->\r\n<div class=\"entry-content\">\r\n\r\n\t\t&lt;?php \r\n\r\n\t\t\/*\r\n\t\tadd_image_size( 'homepage-slideshow-full', 641, 9999 ); \/\/641 pixels wide (and unlimited height)\r\n\t\tadd_image_size( 'homepage-slideshow-thumb', 131, 98, true ); \/\/(cropped)\r\n\t\tadd_image_size( 'on-air-programming-promo-thumb', 194, 145, true ); \/\/(cropped)\r\n\t\tadd_image_size( 'mini-slider-thumb', 335, 250, true ); \/\/(cropped)\r\n\t\t*\/\r\n\t\t?&gt;\r\n<h2>add_image_size( homepage-slideshow-full', 641, 9999 ); \/\/641 pixels wide (and unlimited height)<\/h2>\r\n<h2>add_image_size( homepage-slideshow-thumb', 131, 98, true ); \/\/(cropped)<\/h2>\r\n<h2>add_image_size( on-air-programming-promo-thumb', 194, 145, true ); \/\/(cropped)<\/h2>\r\n<h2>add_image_size( mini-slider-thumb', 335, 250, true ); \/\/(cropped)<\/h2>\r\n\r\n\t\t&lt;?php the_content(); ?&gt;\r\n\t\t&lt;?php wp_link_pages( array( 'before' =&gt; '\r\n<div class=\"page-link\"><span>' . __( 'Pages:', 'twentyeleven' ) . '<\/span>', 'after' =&gt; '<\/div>\r\n\r\n' ) ); ?&gt;\r\n\t<\/div>\r\n\r\n<!-- .entry-content -->\r\n\r\n\t\t&lt;?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class=\"edit-link\">', '<\/span>' ); ?&gt;\r\n\t<!-- .entry-meta -->\r\n&lt;!-- #post- --&gt;\r\n<\/pre>\n<p><H4>Le rendu dans le th\u00e8me<\/H4><\/p>\n<p>De quoi afficher les diff\u00e9rents formats dans votre th\u00e8me.<\/p>\n<pre lang=\"php\" escaped=\"true\">\r\n\t&lt;div class=\"entry-content\"&gt;\r\n\r\n\t\t&lt;?php \r\n\r\n\t\t\/*\r\n\t\tadd_image_size( 'homepage-slideshow-full', 641, 9999 ); \/\/641 pixels wide (and unlimited height)\r\n\t\tadd_image_size( 'homepage-slideshow-thumb', 131, 98, true ); \/\/(cropped)\r\n\t\tadd_image_size( 'on-air-programming-promo-thumb', 194, 145, true ); \/\/(cropped)\r\n\t\tadd_image_size( 'mini-slider-thumb', 335, 250, true ); \/\/(cropped)\r\n\t\t*\/\r\n\t\t?&gt;\r\n\r\n\t\t&lt;h2&gt;add_image_size( homepage-slideshow-full&#x27;, 641, 9999 ); \/\/641 pixels wide (and unlimited height)&lt;\/h2&gt;\r\n\t\t&lt;?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-slideshow-full' ); } ?&gt;\r\n\t\t&lt;h2&gt;add_image_size( homepage-slideshow-thumb&#x27;, 131, 98, true ); \/\/(cropped)&lt;\/h2&gt;\r\n\t\t&lt;?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-slideshow-thumb' ); } ?&gt;\r\n\t\t&lt;h2&gt;add_image_size( on-air-programming-promo-thumb&#x27;, 194, 145, true ); \/\/(cropped)&lt;\/h2&gt;\r\n\t\t&lt;?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'on-air-programming-promo-thumb' ); } ?&gt;\r\n\t\t&lt;h2&gt;add_image_size( mini-slider-thumb&#x27;, 335, 250, true ); \/\/(cropped)&lt;\/h2&gt;\r\n\t\t&lt;?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'mini-slider-thumb' ); } ?&gt;\r\n\r\n\t\t&lt;?php the_content(); ?&gt;\r\n\t\t&lt;?php wp_link_pages( array( 'before' =&gt; '&lt;div class=\"page-link\"&gt;&lt;span&gt;' . __( 'Pages:', 'twentyeleven' ) . '&lt;\/span&gt;', 'after' =&gt; '&lt;\/div&gt;' ) ); ?&gt;\r\n\t&lt;\/div&gt;&lt;!-- .entry-content --&gt;\r\n<\/pre>\n<pre lang=\"php\">\r\nif ( function_exists( 'add_theme_support' ) ) {\r\n\r\n\t\/\/ Enable post thumbnails usage\r\n\tadd_theme_support( 'post-thumbnails' );\r\n\r\n\t\/\/ Sets the dimensions of the post thumbnails (crops the image)\r\n    set_post_thumbnail_size( 150, 150, true );\r\n}\r\n<\/pre>\n<p>Il vous suffit d&#8217;appeler cette fonction dans votre th\u00e8me pour pouvoir faire appel au format d&#8217;image dont vous aurez besoin.<\/p>\n<pre lang=\"php\">\r\n\r\n\tif ( function_exists( 'add_image_size' ) ) {\r\n\t\tadd_image_size( 'category-thumb', 300, 9999 ); \/\/300 pixels wide (and unlimited height)\r\n\t\tadd_image_size( 'homepage-thumb', 220, 180, true ); \/\/(cropped)\r\n\t}\r\n<\/pre>\n<p><b>Envoyer l&#8217;image<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/08\/wp_manage_thumbnail_1.jpg\" alt=\"Wordpress, fonction, images, theme - Activer et utiliser les propri\u00e9t\u00e9s de la vignette par d\u00e9faut sous WordPress, la fonction the_post_thumbnail\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>S\u00e9lectionner cette image comme vignette par d\u00e9faut<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/08\/wp_manage_thumbnail_2.jpg\" alt=\"Wordpress, fonction, images, theme - Activer et utiliser les propri\u00e9t\u00e9s de la vignette par d\u00e9faut sous WordPress, la fonction the_post_thumbnail\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le rendu de cette vignette par d\u00e9faut dans le th\u00e8me.<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/08\/wp_manage_thumbnail_3.jpg\" alt=\"Wordpress, fonction, images, theme - Activer et utiliser les propri\u00e9t\u00e9s de la vignette par d\u00e9faut sous WordPress, la fonction the_post_thumbnail\" width=\"500\" height=\"265\" \/><\/p>\n<h4>Vid\u00e9o<\/h4>\n<p>How to Add Post Thumbnails in WordPress<br \/>\n<a href=\"http:\/\/www.youtube.com\/watch?v=fUfgmRCPI0E\" target=\"_blank\">http:\/\/www.youtube.com\/watch?v=fUfgmRCPI0E<\/a><\/li>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Post Thumbnails\n<p>\t\t<a href=\"http:\/\/codex.wordpress.org\/Post_Thumbnails\" target=\"_blank\">http:\/\/codex.wordpress.org\/Post_Thumbnails<\/a><\/li>\n<li>Function Reference\/add theme support\n<p>\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/add_theme_support\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/add_theme_support<\/a><\/li>\n<li>Function Reference\/the post thumbnail\n<p>\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/the_post_thumbnail\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/the_post_thumbnail<\/a><\/li>\n<li>Function Reference\/set post thumbnail size\n<p>\t\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/set_post_thumbnail_size\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/set_post_thumbnail_size<\/a><\/li>\n<li>Function Reference\/get the post thumbnail\n<p>\t\t\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/get_the_post_thumbnail\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/get_the_post_thumbnail<\/a><\/li>\n<li>Function Reference\/add image size\n<p>\t\t\t\t<a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/add_image_size\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/add_image_size<\/a><\/li>\n<li>New in WordPress 2.9: Post Thumbnail Images\n<p>\t\t\t\t<a href=\"http:\/\/markjaquith.wordpress.com\/2009\/12\/23\/new-in-wordpress-2-9-post-thumbnail-images\/\" target=\"_blank\">http:\/\/markjaquith.wordpress.com\/2009\/12\/23\/new-in-wordpress-2-9-post-thumbnail-images\/<\/a><\/li>\n<li>How to enable post thumbnails on WordPress\n<p>\t\t\t\t\t\t<a href=\"http:\/\/www.antonkoekemoer.com\/wordpress\/how-to-enable-post-thumbnails-on-wordpress\/\" target=\"_blank\">http:\/\/www.antonkoekemoer.com\/wordpress\/how-to-enable-post-thumbnails-on-wordpress\/<\/a><\/li>\n<li>Everything you need to know about WordPress 2.9\u2032s post image feature\n<p>\t\t\t\t\t\t\t\t<a href=\"http:\/\/justintadlock.com\/archives\/2009\/11\/16\/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature\" target=\"_blank\">http:\/\/justintadlock.com\/archives\/2009\/11\/16\/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il n&#8217;existe pas de crime plus grave que l&#8217;anamorphose aux yeux exigeants d&#8217;un photographe et on peut le comprendre au regard du risque de prendre&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2011\/08\/wordpress-fonction-images-theme-activer-et-utiliser-les-proprietes-de-la-vignette-par-defaut-sous-wordpress-la-fonction-the_post_thumbnail\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">WordPress, fonction, images, theme &#8211; Activer et utiliser les propri\u00e9t\u00e9s de la vignette par d\u00e9faut sous WordPress, la fonction the_post_thumbnail<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9415,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Activer la fonction the_post_thumbnail sous WordPress pour g\u00e9rer les images de vignette. Utilisez des outils sp\u00e9cifiques pour obtenir des r\u00e9sultats optimaux.","bf_ai_og_title":"Activer la vignette WordPress","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3454,3444,3447,3448,3449,3451,3435,3452],"tags":[403,153,2211,20,405,406,126,407,408,409,189,2223],"class_list":["post-2017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-journalism-writing","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-fonction","tag-images","tag-mysql","tag-php","tag-post","tag-proprietes","tag-theme","tag-the_post_thumbnail","tag-thumbnail","tag-vignette","tag-widget","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-wx","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/08\/wp_logo_generic2_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=2017"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2017\/revisions"}],"predecessor-version":[{"id":9416,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/2017\/revisions\/9416"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9415"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=2017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=2017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=2017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}