{"id":24852,"date":"2019-02-01T09:59:42","date_gmt":"2019-02-01T09:59:42","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=24017\/"},"modified":"2021-01-12T15:17:01","modified_gmt":"2019-02-01T09:59:42","slug":"comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/","title":{"rendered":"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image?"},"content":{"rendered":"<h2>Objectifs du blog<\/h2>\n<p>Apr\u00e8s avoir lu ce blog, nous pourrons cr\u00e9er plusieurs miniatures lors du t\u00e9l\u00e9chargement d\u2019une image. Dans ce blog, nous pouvons apprendre \u00e0 redimensionner la taille de l&#39;image \u00e0 l&#39;aide de code.<\/p>\n<h2>Connaissons les vignettes<\/h2>\n<p>Les miniatures sont les versions r\u00e9duites d&#39;images ou de vid\u00e9os. Les miniatures sont cr\u00e9\u00e9es \u00e0 partir de l&#39;image d&#39;origine en r\u00e9duisant leurs dimensions et leur taille. En cr\u00e9ant des vignettes, nous pouvons repr\u00e9senter une image de grande taille par une image de petite taille. Les sites Web tels que les magasins de commerce \u00e9lectronique en ligne utilisent des images miniatures au lieu d\u2019images volumineuses pour r\u00e9duire le temps de chargement de leur page Web, ce qui acc\u00e9l\u00e8re \u00e9galement le fonctionnement du site. Pour comprendre techniquement le fonctionnement des vignettes, nous allons cr\u00e9er un programme simple. Le besoin a \u00e9t\u00e9 partag\u00e9 ci-dessous:<\/p>\n<h2>Exigence<\/h2>\n<p>Comprenons d&#39;abord l&#39;exigence. Supposons qu&#39;un site Web nomm\u00e9 Knowband vend les modules de la plate-forme de commerce \u00e9lectronique tels que Magento, Prestashop, Opencart, etc. Il affiche de nombreuses images sur la page de liste des modules de Knowband. Les images d&#39;origine sont de grande taille, ce qui augmente directement le temps de chargement de la page de liste. Par cons\u00e9quent, pour r\u00e9duire le temps de chargement de la page, le site Knowband utilise des images miniatures sur la page de liste. Dans ce blog, nous pouvons apprendre \u00e0 cr\u00e9er plusieurs vignettes d\u2019une image. Prenons un exemple dans lequel nous allons cr\u00e9er trois vignettes comme indiqu\u00e9 dans l&#39;image ci-dessous:<\/p>\n<p><a href=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-24005 size-full\" src=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png\" alt=\"vignettes\" width=\"1217\" height=\"562\" srcset=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png 1217w, https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2-300x139.png 300w, https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2-768x355.png 768w, https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2-1024x473.png 1024w\" sizes=\"auto, (max-width: 1217px) 100vw, 1217px\" \/><\/a><\/p>\n<h2>Fonction pour cr\u00e9er la miniature<\/h2>\n<p>Comprenons la fonctionnalit\u00e9 principale ou le code qui est en r\u00e9alit\u00e9 responsable de la cr\u00e9ation des vignettes. Une fonction est donn\u00e9e ci-dessous qui est responsable de la cr\u00e9ation de la vignette. Laissons comprendre la fonction comment cela a r\u00e9ellement fonctionn\u00e9.<\/p>\n<h3>La fonction ci-dessous a des param\u00e8tres 4<\/h3>\n<p>Le code de cr\u00e9ation de plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image est donn\u00e9 ci-dessous:<\/p>\n<ul>\n<li><strong>$ chemin_source:<\/strong> Ceci contient le chemin de l&#39;image originale.<\/li>\n<li><strong>$ target_path:<\/strong> Celui-ci contient le chemin de la vignette qui sera cr\u00e9\u00e9e.<\/li>\n<li><strong>$ type_fichier:<\/strong> Ceci contient l&#39;extension de l&#39;image, par exemple, jpg, png, etc.<\/li>\n<li><strong>$ thumb_width:<\/strong> C&#39;est la largeur de la vignette requise.<\/li>\n<li><strong>$ thumb_height:<\/strong> C&#39;est la hauteur de la vignette requise.<\/li>\n<\/ul>\n<p>Cette fonction r\u00e9cup\u00e8re simplement l&#39;image du fichier source et, apr\u00e8s avoir valid\u00e9 l&#39;image, cr\u00e9e la vignette de largeur et hauteur donn\u00e9es. Donc, pour cr\u00e9er les vignettes avec le nombre &#39;n&#39;, nous devons appeler cette fonction &#39;n&#39; nombre de fois avec la largeur et la hauteur requises pour la vignette. Cette fonction retournera TRUE si la vignette cr\u00e9\u00e9e avec succ\u00e8s sinon elle retournera FALSE.<\/p>\n<pre class=\"brush: actionscript3; gutter: true\">function create_thumbnail ($ chemin_source, $ chemin_cible, $ type_fichier, $ pouce_width, $ pouce_height) {\/\/ V\u00e9rification du type de fichier. if ($ file_type == &#39;jpeg&#39; || $ file_type == &#39;jpg&#39;) {$ source = imagecreatefromjpeg ($ source_path); } else if ($ file_type == &#39;png&#39;) {$ source = imagecreatefrompng ($ chemin_source); } else if ($ file_type == &#39;gif&#39;) {$ source = imagecreatefromgif ($ chemin_source); } \/\/ r\u00e9cup\u00e8re la largeur de l&#39;image d&#39;origine $ width = imagesx ($ source); \/\/ r\u00e9cup\u00e8re la hauteur de l&#39;image d&#39;origine $ height = imagesy ($ source); \/\/ Cr\u00e9e une image en noir de la taille de l&#39;image miniature $ thumb_image = imagecreatetruecolor ($ thumb_width, $ thumb_height); \/\/ Il copie et redimensionne une partie d&#39;une image d&#39;origine et r\u00e9-\u00e9chantillonn\u00e9 dans une image miniature pour cr\u00e9er une image de taille r\u00e9duite de l&#39;image d&#39;origine imagecopyresampled ($ thumb_image, $ source, 0, 0, 0, $ thumb_width, $ thumb_height, $ width , $ hauteur); \/\/ cr\u00e9e un fichier JPEG \u00e0 partir de l&#39;image donn\u00e9e et l&#39;enregistre dans le dossier cibl\u00e9. if (imagejpeg ($ thumb_image, $ target_path, 0)) {\/\/ d\u00e9truit les images pour lib\u00e9rer la m\u00e9moire qui leur est associ\u00e9e. imagedestroy ($ thumb_image); imagedestroy ($ source); renvoyer VRAI; } else {return FALSE; }}<\/pre>\n<p><a href=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/thumbnail.zip\" target=\"_blank\">Cliquez ici pour t\u00e9l\u00e9charger le projet complet<\/a>.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Apr\u00e8s avoir lu ce document, vous pouvez essayer le m\u00eame code sur votre syst\u00e8me. Apr\u00e8s avoir fait la m\u00eame chose, vous pouvez facilement savoir comment fonctionnent les vignettes.<script data-cfasync=\"false\" src=\"https:\/\/tdns2.gtranslate.net\/tdn-bin\/queue.js\"><\/script><!-- Yandex.Metrika counter for GTranslate --><script data-cfasync=\"false\">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36618640 = new Ya.Metrika({ id:36618640, clickmap:true, trackLinks:true, accurateTrackBounce:true, ut:\"noindex\" }); } catch(e) { } }); var n = d.getElementsByTagName(\"script\")[0], s = d.createElement(\"script\"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = \"text\/javascript\"; s.async = true; s.src = \"https:\/\/mc.yandex.ru\/metrika\/watch.js\"; if (w.opera == \"[object Opera]\") { d.addEventListener(\"DOMContentLoaded\", f, false); } else { f(); } })(document, window, \"yandex_metrika_callbacks\"); <\/script> <noscript><\/p>\n<div><img decoding=\"async\" src=\"https:\/\/mc.yandex.ru\/watch\/36618640?ut=noindex\" style=\"position:absolute; left:-9999px;\" alt=\"\" \/><\/div>\n<p><\/noscript><br \/>\n<!-- delivered by GTranslate v4.8.7 in 4ms visit https:\/\/gtranslate.io --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Objectifs du blog Apr\u00e8s avoir lu ce blog, nous pourrons cr\u00e9er plusieurs miniatures lors du t\u00e9l\u00e9chargement d\u2019une image. Dans ce blog, nous pouvons apprendre \u00e0 redimensionner la taille de l&#39;image \u00e0 l&#39;aide de code. Connaissons les vignettes Les miniatures sont les versions r\u00e9duites d&#39;images ou de vid\u00e9os. Les miniatures sont cr\u00e9\u00e9es \u00e0 partir de l&#39;image [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[1120],"tags":[8890,8892,8891,8706],"class_list":["post-24852","post","type-post","status-publish","format-standard","hentry","category-conseils-fr","tag-crer-une-miniature","tag-image-miniature","tag-plusieurs-vignettes","tag-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#039;une image? - Knowband Blog | Ecommerce Modules<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr\u00e9er-plusieurs-vignettes-lors-du-t\u00e9l\u00e9chargement-dune-image\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#039;une image? - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"Objectifs du blog Apr\u00e8s avoir lu ce blog, nous pourrons cr\u00e9er plusieurs miniatures lors du t\u00e9l\u00e9chargement d\u2019une image. Dans ce blog, nous pouvons apprendre \u00e0 redimensionner la taille de l&#039;image \u00e0 l&#039;aide de code. Connaissons les vignettes Les miniatures sont les versions r\u00e9duites d&#039;images ou de vid\u00e9os. Les miniatures sont cr\u00e9\u00e9es \u00e0 partir de l&#039;image [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr\u00e9er-plusieurs-vignettes-lors-du-t\u00e9l\u00e9chargement-dune-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Knowband\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-01T09:59:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1217\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shivam Verma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:site\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shivam Verma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/\"},\"author\":{\"name\":\"Shivam Verma\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/e053c57d62fceb4295302b9293e371f6\"},\"headline\":\"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image?\",\"datePublished\":\"2019-02-01T09:59:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/\"},\"wordCount\":538,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/Picture2-2.png\",\"keywords\":[\"cr\u00e9er une miniature\",\"image miniature\",\"plusieurs vignettes\",\"thumbnail\"],\"articleSection\":[\"conseils\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/\",\"name\":\"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image? - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/Picture2-2.png\",\"datePublished\":\"2019-02-01T09:59:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/Picture2-2.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/Picture2-2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/conseils-fr\\\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento One Click Commander &#8211; Manuel de l&#8217;utilisateur\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/manuel-utilisateur\\\/magento-one-click-commander-manuel-de-lutilisateur\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"description\":\"Magento, Prestashop, Opencart, Shopify\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"width\":153,\"height\":61,\"caption\":\"Knowband Blog | Ecommerce Modules\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Knowband\",\"https:\\\/\\\/x.com\\\/KnowbandPlugin\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/e053c57d62fceb4295302b9293e371f6\",\"name\":\"Shivam Verma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Image_for_blogShivam-150x150.jpg\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Image_for_blogShivam-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Image_for_blogShivam-150x150.jpg\",\"caption\":\"Shivam Verma\"},\"description\":\"Shivam Verma is an experienced software engineer in PHP development and Database design. His area of interest is website development. He likes to be aware of his surroundings and to learn new things by observing others. He believes that by doing this we can learn new things and can also enhance our knowledge everyday. He has started writing technical blogs with a view to help others in studying and learning new things in an easy way.\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/author\\\/sverma\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image? - Knowband Blog | Ecommerce Modules","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr\u00e9er-plusieurs-vignettes-lors-du-t\u00e9l\u00e9chargement-dune-image\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image? - Knowband Blog | Ecommerce Modules","og_description":"Objectifs du blog Apr\u00e8s avoir lu ce blog, nous pourrons cr\u00e9er plusieurs miniatures lors du t\u00e9l\u00e9chargement d\u2019une image. Dans ce blog, nous pouvons apprendre \u00e0 redimensionner la taille de l&#39;image \u00e0 l&#39;aide de code. Connaissons les vignettes Les miniatures sont les versions r\u00e9duites d&#39;images ou de vid\u00e9os. Les miniatures sont cr\u00e9\u00e9es \u00e0 partir de l&#39;image [&hellip;]","og_url":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr\u00e9er-plusieurs-vignettes-lors-du-t\u00e9l\u00e9chargement-dune-image\/","og_site_name":"Knowband Blog | Ecommerce Modules","article_publisher":"https:\/\/www.facebook.com\/Knowband","article_published_time":"2019-02-01T09:59:42+00:00","og_image":[{"width":1217,"height":562,"url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png","type":"image\/png"}],"author":"Shivam Verma","twitter_card":"summary_large_image","twitter_creator":"@KnowbandPlugin","twitter_site":"@KnowbandPlugin","twitter_misc":{"Written by":"Shivam Verma","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/"},"author":{"name":"Shivam Verma","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/e053c57d62fceb4295302b9293e371f6"},"headline":"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image?","datePublished":"2019-02-01T09:59:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/"},"wordCount":538,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png","keywords":["cr\u00e9er une miniature","image miniature","plusieurs vignettes","thumbnail"],"articleSection":["conseils"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/","url":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/","name":"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image? - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png","datePublished":"2019-02-01T09:59:42+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#primaryimage","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/01\/Picture2-2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.knowband.com\/blog\/fr\/conseils-fr\/comment-cr%c3%a9er-plusieurs-vignettes-lors-du-t%c3%a9l%c3%a9chargement-dune-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Magento One Click Commander &#8211; Manuel de l&#8217;utilisateur","item":"https:\/\/www.knowband.com\/blog\/fr\/manuel-utilisateur\/magento-one-click-commander-manuel-de-lutilisateur\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er plusieurs vignettes lors du t\u00e9l\u00e9chargement d&#39;une image?"}]},{"@type":"WebSite","@id":"https:\/\/www.knowband.com\/blog\/fr\/#website","url":"https:\/\/www.knowband.com\/blog\/fr\/","name":"Knowband Blog | Ecommerce Modules","description":"Magento, Prestashop, Opencart, Shopify","publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.knowband.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization","name":"Knowband Blog | Ecommerce Modules","url":"https:\/\/www.knowband.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","width":153,"height":61,"caption":"Knowband Blog | Ecommerce Modules"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Knowband","https:\/\/x.com\/KnowbandPlugin"]},{"@type":"Person","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/e053c57d62fceb4295302b9293e371f6","name":"Shivam Verma","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Image_for_blogShivam-150x150.jpg","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Image_for_blogShivam-150x150.jpg","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2019\/02\/Image_for_blogShivam-150x150.jpg","caption":"Shivam Verma"},"description":"Shivam Verma is an experienced software engineer in PHP development and Database design. His area of interest is website development. He likes to be aware of his surroundings and to learn new things by observing others. He believes that by doing this we can learn new things and can also enhance our knowledge everyday. He has started writing technical blogs with a view to help others in studying and learning new things in an easy way.","url":"https:\/\/www.knowband.com\/blog\/fr\/author\/sverma\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/24852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=24852"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/24852\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=24852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=24852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=24852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}