Modificar imágenes - Crop con TinyMCE

El editor de imágenes TinyMCE permite algunas modificaciones interesantes.

Veremos que pulsando el botón derecho del ratón cuando nos encontramos encima de una imágenes nos aparece un menú de iconos que nos permitirá hacer algunas modificaciones útiles.

manipular imagenes TinyMCE

  • Rotar imágenes
  • Redimensionar imágenes
  • Recortar imágenes
  • Renombrar imágenes
  • Duplicar imágenes
  • Eliminar imágenes

La mayoría de estas acciones no hace falta comentarlas ya que quedan bastante claras. Sin embargo vale la pena explicar la acción "Crop" algo menos conocida entre los menos iniciados.

"Crop": recortar imágenes paso a paso

A los menos familiarizados con los editores de imágenes la palabra "crop" y el icono que la precede les dirá poca cosa. Sin embargo entre los diseñadores gráficos es un término tan usado que ya se ha españolizado y en este oficio ya es más habitual oir " cropar" una imagen que "recortar" una imagen.

Vamos a explicar pues como llevar a cabo paso a paso un "crop" o recorte con el TinyMCE.

Esta operación nos sera útil para recortar la parte de una imagen que nos interese.

Para entendernos vamos a poner un ejemplo práctico.

Imagen para recortar

En la imagen anterior vemos una flor con un cielo nublado detrás. Quizá necesitemos recortar el detalle de la flor y prescindir del resto de la imagen.

Situándonos en la imagen, desde el navegador y pulsando el icono de recortar o "crop", como hemos visto en ola primera imagen de esta página, nos aparecerá una ventana donde podremos seleccionar con el ratón la parte que nos interese de la imagen. Pulsaremos el botón derecho del ratón en un punto de la imagen y manteníendolo pulsado arrastraremos el cursor hasta otro punto de la imagen:

Imagen con el área seleccionada

Una vez seleccionada el área elegida guardaremos la imagen pulsando Save (guardar) o Save As (guardar como). La imagen quedará guardada en la misma carpeta del servidor desde donde hemos iniciado la acción.

El resultado será una nueva imagen de tamaño y proporciones distintas donde tendremos la parte de la imagen que nos interesa.

Detalle de la flor

Posibles problemas

Cuando guardamos la imagen nos aparece la posibilidad de guardarla con el mismo nombre o cambiar el nombre. Si decidimos guardar la imagen con el mismo nombre es importante no dejarse la terminación del formato de foto. Si en lugar de guardar la imagen con el nombre "detalle-de-flor.jpg" la guardamos simplemente con el nombre "detalle-de-flor" olvidando el ".jpg", que indica el formato de imagen, la acción de recorte no se llevará a cabo con éxito.

Recordemos que una foto puede tener distintos formatos que quedan definidos por la extensión, a parte del ".jpg" que hemos comentado los más habituales son: ".gif" y ".png". 

Extensión