{"id":230687,"date":"2022-12-02T18:16:00","date_gmt":"2022-12-02T15:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230687"},"modified":"2022-11-09T23:32:42","modified_gmt":"2022-11-09T20:32:42","slug":"redimensionando-imagens-programaticamente-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/redimensionando-imagens-programaticamente-no-wordpress\/","title":{"rendered":"Redimensionando imagens programaticamente no WordPress"},"content":{"rendered":"\n<p>Se voc\u00ea j\u00e1 teve que trabalhar com redimensionamento de imagens programaticamente no WordPress, pode ter se deparado com a fun\u00e7\u00e3o <strong><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/image_resize\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">image_resize<\/a><\/strong>.<\/p>\n<p>Al\u00e9m disso, voc\u00ea pode saber que foi descontinuado (j\u00e1 que isso aparece na parte superior da tela):<\/p>\n<blockquote>\n<p>Esta fun\u00e7\u00e3o foi preterida. Use <strong><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_image_editor\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_get_image_editor()<\/a><\/strong> em vez disso.<\/p>\n<\/blockquote>\n<p>E com sua deprecia\u00e7\u00e3o, como acontece com todos aqueles que fazem um bom trabalho depreciando a funcionalidade, n\u00e3o \u00e9 sem sua substitui\u00e7\u00e3o.<\/p>\n<p>Neste caso, estamos falando do WP Image Editor. Esta \u00e9 uma classe no WordPress que podemos usar para realizar as mesmas opera\u00e7\u00f5es para redimensionar imagens programaticamente que antes com a fun\u00e7\u00e3o original.<\/p>\n<p>Para ser claro, este post em particular n\u00e3o \u00e9 um tutorial completo sobre como usar o <strong><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_image_editor\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>WP_Image_Editor<\/code><\/a><\/strong>.<\/p>\n<\/p>\n<p>Em vez disso, \u00e9 um guia simples de como us\u00e1-lo para redimensionar imagens no lugar de uma fun\u00e7\u00e3o obsoleta, juntamente com algumas explica\u00e7\u00f5es ao longo do caminho sobre como lidar com casos em que pode haver erros.<\/p>\n<h3>Encontrando a imagem a ser usada<\/h3>\n<p>Dependendo do que estiver fazendo, voc\u00ea poder\u00e1 recuperar o nome do arquivo da imagem do pr\u00f3prio WordPress; no entanto, para este exemplo, vou simplesmente codificar o caminho para um arquivo.<\/p>\n<p>Essa \u00e9 a maneira mais f\u00e1cil de explicar como usar a classe versus sair pela tangente de como recuperar uma imagem programaticamente, obter seu caminho, envi\u00e1-la para a classe do editor e assim por diante.<\/p>\n<p>Ent\u00e3o, vamos supor que o caminho fornecido para a imagem seja <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/96fa8bb3af0ee6fd821b3899e82d5fdb#file-00-filename-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">algo assim:<\/a><\/strong><\/p>\n<pre><code>&lt;?php\n\n$filename = '\/Users\/tommcfarlin\/Projects\/acme\/wp-content\/uploads\/2018\/06\/original-image.jpg';\nif (!file_exists($filename)) {\n  return;\n}<\/code><\/pre>\n<p>Usando isso, vamos armazen\u00e1-lo em uma vari\u00e1vel que podemos passar para outra fun\u00e7\u00e3o caso queiramos operar v\u00e1rias vezes no arquivo original.<\/p>\n<h3>Obtendo uma inst\u00e2ncia do editor de imagens<\/h3>\n<p>Em seguida, voc\u00ea deve obter uma inst\u00e2ncia da classe do editor de imagens para poder operar na imagem localizada no caminho acima. Em sua forma mais b\u00e1sica, nada mais \u00e9 do que passar um nome de arquivo para uma fun\u00e7\u00e3o e depois um array de argumentos.<\/p>\n<p>Neste post, n\u00e3o estou preocupado com a matriz de argumentos \u2013 apenas em obter uma inst\u00e2ncia do editor com a qual posso usar para redimensionar uma imagem.<\/p>\n<p>Para pegar uma inst\u00e2ncia do referido editor, <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/96fa8bb3af0ee6fd821b3899e82d5fdb#file-01-get-editor-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">basta fazer isso:<\/a><\/strong><\/p>\n<pre><code>&lt;?php\n\n\/\/ Grab the editor for the filename of the image. \n$filename = '\/Users\/tommcfarlin\/Projects\/acme\/wp-content\/uploads\/2018\/06\/original-image.jpg';\nif (!file_exists($filename)) {\n  return;\n}\n\n$editor = wp_get_image_editor( $filename, array() );<\/code><\/pre>\n<p>Isso retornar\u00e1 uma inst\u00e2ncia do editor de uma inst\u00e2ncia de <code>**[WP_Error](https:\/\/developer.wordpress.org\/reference\/classes\/wp_error\/)**<\/code>(junto com uma mensagem de erro e outras informa\u00e7\u00f5es que voc\u00ea pode usar para determinar o problema). \u00c9 sempre bom verificar se o valor retornado \u00e9 um erro e <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/96fa8bb3af0ee6fd821b3899e82d5fdb#file-02-check-for-errors-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">interromper qualquer opera\u00e7\u00e3o futura.<\/a><\/strong><\/p>\n<pre><code>&lt;?php\n\n\/\/ Grab the editor for the file and the size of the original image.\n$filename = '\/Users\/tommcfarlin\/Projects\/acme\/wp-content\/uploads\/2018\/06\/original-image.jpg';\nif (!file_exists($filename)) {\n  return;\n}\n\n$editor = wp_get_image_editor( $filename, array() );\nif (is_wp_error($editor)) {\n   \/\/ handle the problem however you deem necessary.\n}<\/code><\/pre>\n<p>Supondo que n\u00e3o haja nenhum erro, por\u00e9m, voc\u00ea pode come\u00e7ar a trabalhar para redimensionar a imagem.<\/p>\n<h3>Redimensionando a imagem<\/h3>\n<p>Felizmente, isso \u00e9 algo f\u00e1cil de fazer. Voc\u00ea precisa de tr\u00eas informa\u00e7\u00f5es:<\/p>\n<ol>\n<li>largura,<\/li>\n<li>altura,<\/li>\n<li>e se voc\u00ea deseja ou n\u00e3o cortar a imagem.<\/li>\n<\/ol>\n<p>Na minha experi\u00eancia, cortar a imagem \u00e9 quase sempre melhor do que n\u00e3o, porque evita qualquer alongamento estranho ou distor\u00e7\u00e3o em propor\u00e7\u00f5es estranhas.<\/p>\n<p>Ao redimensionar a imagem, sempre gosto de obter o tamanho atual da imagem e depois usar um multiplicador para criar as novas dimens\u00f5es pelas quais quero redimensionar a imagem.<\/p>\n<p>Por exemplo, digamos que eu tenha uma imagem e queira redimensionar a largura em 40% e a altura em 30%. Para fazer isso, eu preciso:<\/p>\n<ol>\n<li>obter o tamanho da imagem atual,<\/li>\n<li>use a nova largura e altura para redimensionar a imagem.<\/li>\n<\/ol>\n<p>Programaticamente, <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/96fa8bb3af0ee6fd821b3899e82d5fdb#file-03-sizing-the-image-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e9 assim que voc\u00ea faria:<\/a><\/strong><\/p>\n<pre><code>&lt;?php\n\n\/\/ Grab the editor for the file and the size of the original image.\n$filename = '\/Users\/tommcfarlin\/Projects\/acme\/wp-content\/uploads\/2018\/06\/original-image.jpg';\nif (!file_exists($filename)) {\n  return;\n}\n\n$editor = wp_get_image_editor( $filename, array() );\nif (is_wp_error($editor)) {\n   \/\/ Handle the problem however you deem necessary.\n}\n\n\/\/ Get the dimensions for the size of the current image.\n$dimensions = $editor-&gt;get_size();\n$width = $dimensions['width'];\n$height = $dimensions['height'];\n\n\/\/ Calculate the new dimensions for the image.\n$newWidth = 0.4 * $width;\n$newHeight = 0.3 * $height;\n\n\/\/ Resize the image.\n$result = $editor-&gt;resize($newWidth, $newHeight, true);<\/code><\/pre>\n<p>F\u00e1cil o suficiente de seguir, n\u00e3o \u00e9?<\/p>\n<h3>Salvando a imagem<\/h3>\n<p>Finalmente, tudo o que resta \u00e9 salvar a imagem. Nesse caso, a imagem <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/96fa8bb3af0ee6fd821b3899e82d5fdb#file-04-saving-the-image-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ser\u00e1 gravada<\/a><\/strong> no diret\u00f3rio de uploads (e geralmente o ano e o m\u00eas que o WordPress fornece).<\/p>\n<pre><code>&lt;?php\n\n\/\/ Grab the editor for the file and the size of the original image.\n$filename = '\/Users\/tommcfarlin\/Projects\/acme\/wp-content\/uploads\/2018\/06\/original-image.jpg';\nif (!file_exists($filename)) {\n  return;\n}\n\n$editor = wp_get_image_editor( $filename, array() );\nif (is_wp_error($editor)) {\n   \/\/ handle the problem however you deem necessary.\n}\n\n\/\/ Get the dimensions for the size of the current image.\n$dimensions = $editor-&gt;get_size();\n$width = $dimensions['width'];\n$height = $dimensions['height'];\n\n\/\/ Calculate the new dimensions for the image.\n$newWidth = 0.4 * $width;\n$newHeight = 0.3 * $height;\n\n\/\/ Resize the image.\n$result = $editor-&gt;resize($newWidth, $newHeight, true);\n\n\/\/ If there's no problem, save it; otherwise, print the problem.\nif (!is_wp_error($result)) {\n  $editor-&gt;save($editor-&gt;generate_filename());\n} else {\n   \/\/ Handle the problem however you deem necessary.\n}<\/code><\/pre>\n<p>Voc\u00ea pode ent\u00e3o ver a vers\u00e3o final redimensionada (e nomeada apropriadamente) com base em sua sa\u00edda.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este post fornece um guia curto e simples sobre como usar o WP Image Editor para redimensionar imagens programaticamente.<\/p>\n","protected":false},"author":1,"featured_media":163264,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[722,846,867],"tags":[1170],"class_list":["post-230687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230687"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/163264"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}