{"id":230290,"date":"2022-12-02T18:25:00","date_gmt":"2022-12-02T15:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230290"},"modified":"2022-11-09T20:58:11","modified_gmt":"2022-11-09T17:58:11","slug":"cambiar-el-tamano-de-las-imagenes-mediante-programacion-en-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/cambiar-el-tamano-de-las-imagenes-mediante-programacion-en-wordpress\/","title":{"rendered":"Cambiar el tama\u00f1o de las im\u00e1genes mediante programaci\u00f3n en WordPress"},"content":{"rendered":"\n

Si alguna vez ha tenido que trabajar con el cambio de tama\u00f1o de las im\u00e1genes mediante programaci\u00f3n en WordPress, es posible que haya encontrado la funci\u00f3n image_resize<\/a><\/strong>.<\/p>\n

Adem\u00e1s, es posible que sepa que ha quedado obsoleto (dado que esto aparece en la parte superior de la pantalla):<\/p>\n

\n

Esta funci\u00f3n ha quedado obsoleta. Utilice wp_get_image_editor()<\/a><\/strong> en su lugar.<\/p>\n<\/blockquote>\n

Y con su desaprobaci\u00f3n, como ocurre con todos aquellos que hacen un buen trabajo desaprobando la funcionalidad, no deja de tener su reemplazo.<\/p>\n

En este caso, estamos hablando del WP Image Editor. Esta es una clase en WordPress que podemos usar para realizar las mismas operaciones para cambiar el tama\u00f1o de las im\u00e1genes mediante programaci\u00f3n que alguna vez pudimos con la funci\u00f3n original.<\/p>\n

Para ser claros, esta publicaci\u00f3n en particular no es un tutorial completo sobre c\u00f3mo usar el archivo WP_Image_Editor<\/code><\/a><\/strong>.<\/p>\n<\/p>\n

En cambio, es una gu\u00eda simple sobre c\u00f3mo usarlo para cambiar el tama\u00f1o de las im\u00e1genes en lugar de una funci\u00f3n obsoleta junto con algunas explicaciones sobre c\u00f3mo manejar los casos en los que puede haber errores.<\/p>\n

Encontrar la imagen a usar<\/h3>\n

Dependiendo de lo que est\u00e9 haciendo, es posible que pueda recuperar el nombre de archivo de la imagen desde el mismo WordPress; sin embargo, para este ejemplo, simplemente codificar\u00e9 la ruta a un archivo.<\/p>\n

Esta es la forma m\u00e1s f\u00e1cil de explicar c\u00f3mo usar la clase en lugar de salirse por la tangente de c\u00f3mo recuperar una imagen mediante programaci\u00f3n, obtener su ruta, enviarla a la clase del editor, etc.<\/p>\n

As\u00ed que supongamos que la ruta dada a la imagen es algo como esto:<\/a><\/strong><\/p>\n

<?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
Usando eso, lo almacenaremos en una variable que podemos pasar a otra funci\u00f3n en caso de que queramos operar en el archivo original varias veces.<\/p>\n
Obtener una instancia del editor de im\u00e1genes<\/h3>\n
A continuaci\u00f3n, debe obtener una instancia de la clase de editor de im\u00e1genes para poder operar en la imagen ubicada en la ruta anterior. En su forma m\u00e1s b\u00e1sica, no es m\u00e1s que pasar un nombre de archivo a una funci\u00f3n y luego una serie de argumentos.<\/p>\n
En esta publicaci\u00f3n, no me preocupa la variedad de argumentos, solo obtener una instancia del editor que pueda usar para cambiar el tama\u00f1o de una imagen.<\/p>\n
Para tomar una instancia de dicho editor, simplemente haga esto:<\/a><\/strong><\/p>\n
<?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
Esto devolver\u00e1 una instancia del editor de una instancia de **[WP_Error](https:\/\/developer.wordpress.org\/reference\/classes\/wp_error\/)**<\/code>(junto con un mensaje de error y otra informaci\u00f3n que puede usar para determinar el problema). Siempre es bueno verificar si el valor devuelto es un error y detener cualquier operaci\u00f3n futura.<\/a><\/strong><\/p>\n
<?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
Sin embargo, suponiendo que no haya ning\u00fan error, puede comenzar a trabajar para cambiar el tama\u00f1o de la imagen.<\/p>\n
Cambiar el tama\u00f1o de la imagen<\/h3>\n
Afortunadamente, esto es algo que es f\u00e1cil de hacer. Necesitas tres datos:<\/p>\n
    \n
  1. ancho,<\/li>\n
  2. altura,<\/li>\n
  3. y si desea o no recortar la imagen.<\/li>\n<\/ol>\n
    En mi experiencia, recortar la imagen casi siempre es mejor que no hacerlo porque evita cualquier estiramiento o distorsi\u00f3n extra\u00f1os en proporciones de aspecto extra\u00f1as.<\/p>\n
    Al cambiar el tama\u00f1o de la imagen, siempre me gusta obtener el tama\u00f1o actual de la imagen y luego usar un multiplicador para crear las nuevas dimensiones por las que quiero cambiar el tama\u00f1o de la imagen.<\/p>\n
    Por ejemplo, digamos que tengo una imagen y quiero cambiar el tama\u00f1o del ancho en un 40 % y el alto en un 30 %. Para hacer esto, necesito:<\/p>\n
      \n
    1. obtener el tama\u00f1o de la imagen actual,<\/li>\n
    2. use el nuevo ancho y alto para cambiar el tama\u00f1o de la imagen.<\/li>\n<\/ol>\n
      Program\u00e1ticamente, as\u00ed es como lo har\u00edas:<\/a><\/strong><\/p>\n
      <?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->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->resize($newWidth, $newHeight, true);<\/code><\/pre>\n
      Bastante f\u00e1cil de seguir, \u00bfno?<\/p>\n
      Guardar la imagen<\/h3>\n
      Finalmente, todo lo que queda es guardar la imagen. En este caso, la imagen se escribir\u00e1<\/a><\/strong> en el directorio de cargas (y generalmente el a\u00f1o y el mes que proporciona WordPress).<\/p>\n
      <?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->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->resize($newWidth, $newHeight, true);\n\n\/\/ If there's no problem, save it; otherwise, print the problem.\nif (!is_wp_error($result)) {\n  $editor->save($editor->generate_filename());\n} else {\n   \/\/ Handle the problem however you deem necessary.\n}<\/code><\/pre>\n
      Luego puede ver la versi\u00f3n final redimensionada (y nombrada apropiadamente) seg\u00fan su salida.<\/p>\n
      Fuente de grabaci\u00f3n:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Esta publicaci\u00f3n proporciona una gu\u00eda breve y sencilla sobre c\u00f3mo usar WP Image Editor para cambiar el tama\u00f1o de las im\u00e1genes mediante programaci\u00f3n.<\/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":[716,840,861],"tags":[1172],"class_list":["post-230290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=230290"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/163264"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}