Crear un hosting de imágenes con WordPress y Gravity Forms

Dificultad del post: facilmediadificil
[Total: 2   Promedio: 5/5]
image hosting wordpress

Estaba yo pensando en cómo crear una herramienta autoalojada por mí, dónde guardar imágenes y poder enlazarlas en las comunicaciones con mis clientes, con mis suscriptores y con mis lectores y… se me vino a la cabeza crear un invento.

ATENCIÓN: ESTO ES UN EXPERIMENTO. LO DIGO POR LAS POSIBLES CRITICAS DE QUE EXISTEN FORMAS MEJOR DE HACERLO.

Estuve buscando distintas opciones en formato «script PHP» para crear un image hosting o hosting de imágenes personal, pero nada me convencía. Se me ocurrió crear algo con WordPress y, como el post sobre cómo crear una membresía en WordPress gustó bastante, pues me dije: ¿Por qué no creo un image hosting con WordPress y hago una guía sobre cómo hacerlo?

image hosting wordpress

Y aquí estoy, con un post bastante rebuscado sobre cómo crear un hosting para imágenes con WordPress: algo simple, pero al mismo tiempo que sirva como herramienta pública o privada.

A lo largo de este artículo no vas a ver solo cómo crear un hosting para imágenes con WordPress, sino que vas a ver distintas formas de añadir nuevas funcionalidades a tu hosting de imágenes.

Te estarás preguntando por qué no uso un servicio “externo” de los muchos que existen para subir imágenes. Evidentemente, la razón es: privacidad. Los datos (imágenes) que yo suelo compartir en emails con mis clientes no son «secretos», pero evidentemente no me gusta tener que subirlos a servicios de imágenes públicos.

Por otro lado, tampoco quería subir las imágenes por FTP a ningún lado. Sé perfectamente que existen muchas alternativas más simples, pero… ¡YO QUERÍA HACERLO CON WORDPRESS!

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Paso 1 – Preparar el entorno para la ocasión

Evidentemente, debemos instalar un WordPress y lo voy a hacer en un hosting compartido de Raiola Networks. Concretamente, en un plan Pro SSD con LiteSpeed y cPanel.

¿Es suficiente con este hosting? Pues depende de lo que quieras hacer, pero para mí porque además voy a servir los archivos directamente desde CloudFlare pasando el hostname a través del CDN.

En caso de que quieras guardar los archivos en otro sitio también puedes hacerlo con un hosting simple, aunque siempre depende de la cantidad de tráfico que vayas a tener. Si la herramienta es solo para ti, te sirve con un hosting básico y solo va a contar el almacenamiento que te haga falta.

Por otro lado, al tratarse de un WordPress, en backend siempre puedes optimizar las imágenes automáticamente al subirlas como lo harías con una imagen subida a un sitio web normal con WordPress.

No voy a entrar en cómo instalar WordPress porque, si vas a seguir este manual, evidentemente ya deberías saber hacerlo. De todos modos, te dejo este post por si acaso: https://alvarofontela.com/como-instalar-wordpress/

Si necesitas saber cómo configurar WordPress, también tengo un post sobre eso: https://alvarofontela.com/configurar-wordpress-despues-instalar/

Con esto ya tendremos el entorno listo, pero todavía vamos a hacer algunos cambios más. Son opcionales, pero yo te los recomiendo.

 

Configurar la carpeta de subidas de WordPress

De forma predeterminada, cuando subimos archivos a la galería multimedia de WordPress estos se meten dentro de la carpeta UPLOADS, en WP-CONTENT.

Como queremos hacer algo que no enseñe que es WordPress a todo el mundo, vamos a cambiar esto con un parámetro en el wp-config.php.

El código que debes insertar es este:

Así los archivos que subas a la galería multimedia no se guardarán en WP-CONTENT > UPLOADS, Por lo tanto, las rutas a las imágenes subidas cambiarán.

  • Antes: https://misitioweb.com/wp-content/uploads/imagen.png
  • Después: https://misitioweb.com/archivo/imagen.png

Si necesitas saber más sobre cómo editar el wp-config.php de WordPress, tengo un post sobre eso también: https://alvarofontela.com/configurar-wp-config-php-wordpress/

Esto también podemos hacerlo de otra forma, ya que existen plugins como WP Original Media Path que podemos encontrar en el repositorio oficial de WordPress y que nos permiten cambiar dónde se guardan los archivos de una forma más gráfica. Aquí tienes un vídeo sobre ese plugin en concreto y cómo se realiza la configuración:

Debes tener mucho cuidado con los permisos de la carpeta donde vas a guardar ahora los archivos. Lo ideal es que crees la carpeta por FTP y no con otros métodos.

Esto es imprescindible hacerlo al principio, ya que esta es otra de esas opciones de WordPress que no son retroactivas y podemos liarla “parda” si la aplicamos cuando ya tenemos todo funcionando normalmente.

 

Paso 2 – Gravity Forms y Elementor Pro

Sí, volvemos a las andadas como en el caso de la plataforma de miembros o área privada creada con WordPress que publiqué hace unas semanas.

En este caso, vamos a volver a trabajar con Gravity Forms, que gestionará la subida y la “publicación” de la imagen. También vamos a usar Elementor Pro para recuperar datos.

Estos son los dos componentes que vas a necesitar para esto:

Esto se hace en dos fases: por un lado la subida y, por el otro, la recuperación de datos para usar.

Te lo pongo siguiendo el ejemplo de lo que he creado yo. Esta es la parte de subida:

image hosting

Y esta es la parte de mostrar datos:

imagehostingwordpress3

Como ves, es una interfaz muy simple porque yo esta herramienta la creo para uso personal, como he dicho al principio del post.

A continuación, vamos a contestar algunas preguntas que creo que pueden ser interesantes. Además, voy a introducirlas con un title, porque creo que puede ser útil enlazar esta sección las 50 veces que me pregunten en los comentarios.

 

Preguntas y respuestas sobre los componentes elegidos

  • ¿Se puede hacer lo mismo fácilmente con PHP y sin usar WordPress?
    Claro que sí, joder, pero como he repetido varias veces en este caso la gracia para mí es hacerlo con WordPress y de forma que cualquiera pueda repetirlo.
  • ¿Existen alternativas a Gravity Forms y Elementor Pro?
    Sí, claro. Posiblemente con Contact Form 7 y algún plugin más podamos hacer algo similar, pero yo lo he hecho con Gravity Forms porque es en lo que estoy especializado y con lo que trabajo todos los días.
  • ¿Se puede prescindir de Elementor Pro?
    Claro que sí, pero entonces tampoco uses Elementor normal, ya que para hacer lo que hice yo vas a tener que usar los campos dinámicos y estos solo los tiene la versión Pro.
  • ¿Se puede hacer con un theme normal y sin Gravity Forms?
    Sí, evidentemente, pero tienes que buscar la forma de plasmar las variables. Si haces esto como herramienta interna, quizás quieras pasar de todo el manual y subir directamente las imágenes por FTP y enlazarlas. Como dije al principio, esto es un experimento.
Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Paso 3 – Gravity Forms para la subida de imágenes

Bueno, vamos con la práctica…

Empezamos instalando y activando Gravity Forms en nuestro sitio web, lo activamos con la licencia y lo dejamos listo para funcionar.

La razón por la que vamos a necesitar Gravity Forms ELITE, y no una versión más barata, es porque vamos a necesitar la extensión Advanced Post Creation que solo está disponible en la versión ELITE.

Nos vamos a nuestro Gravity Forms (“Formularios”) dentro del dashboard de WordPress y después a “Extensiones”:

gravity wordpress

Ahí encontraremos la extensión “Advanced Post Creation Add-on” arriba de todo. Si no te aparece es que no tienes la versión Elite de Gravity Forms. Instalamos y activamos la extensión y, hecho esto, vamos a empezar.

Creamos un formulario nuevo desde la sección “Formularios” de Gravity Forms, de forma normal:

gravity wordpress

Pero solo vamos a añadir un campo, como ves en la captura anterior: un campo de subida de archivo que puedes encontrarte en “Campos avanzados”:

gravity wordpress

El campo de subida de archivos de mi captura no tiene la misma apariencia que el tuyo, ¿verdad? Eso lo vamos a arreglar ahora.

Vamos a configurar el campo pulsando sobre él:

gravity wordpress

Copia exactamente esta configuración que he especificado para el campo de subida de archivos de Gravity Forms en la imagen anterior.

Por si quieres ocultar el nombre del campo, en “Apariencia” en las opciones del campo tendrás “Visibilidad etiqueta del campo”. Puedes ponerle “Oculto”:

gravity wordpress

En la parte de apariencia no nos vamos a meter más por ahora, ya que queda para después.

Guardamos el nuevo formulario y pulsamos en “Ajustes” en el creador de formularios:

gravity wordpress

Y esto nos llevará a una pantalla como esta, donde debemos pulsar en “Post Creation”:

gravity wordpress

La pantalla de “Post Creation” solo nos aparecerá en caso de que tengamos activa la extensión de Gravity Forms “Advanced Post Creation Add-on” que hemos mencionado antes.

Ahora, como es normal en otros procesos de Gravity Forms, vamos a crear un feed.

Realmente, lo que vamos a hacer es configurar Gravity Forms para que nos cree un nuevo post cada vez que le subamos una imagen y que incluya como featured image (o imagen destacada del post) la imagen que nosotros subamos. Esto tiene la ventaja de que la va a añadir a la galería multimedia de WordPress y vamos a poder “trabajar” en procesos de optimización y conversión de esas imágenes sin problema alguno.

Al crear un nuevo feed dentro de “Post Creation” podremos configurar todo lo necesario para que se cree el post con cada imagen subida.

Esta es la configuración que hice yo:

gravity wordpress

De la captura que estás viendo, la parte de “Post Settings” puedes dejarla exactamente como la he dejado yo. Sin embargo, en la parte de “Post Content” debemos personalizar algunas cosas más:

  • En “Title” lo dejamos así, para que pille como nombre el ID de entrada de formulario. De esta forma, nunca se repetirán.
  • El campo “Content” podemos dejarlo vacío.
  • En “Featured Image” y “Media Library” debemos seleccionar el campo de subida de archivos que hemos configurado en el formulario. Si no hacemos esto, no funcionará.

El resto lo dejamos exactamente igual, no es necesario personalizarlo salvo que quieras añadir alguna funcionalidad especifica.

Y ahora solo nos queda probar. Vamos al front-end e intentamos subir una imagen. Nos aparecerá algo así:

gravity wordpress

Pulsamos “Enviar” y, como no hemos configurado la segunda parte, no nos va a mostrar nada relevante. Sin embargo, internamente la imagen se debe subir.

Vamos a comprobar que así ha sido. Solo tenemos que ir a “Entradas” en el dashboard de WordPress y ver si se ha creado un nuevo post:

gravity wordpress

Y si editamos el post, el contenido debería estar vacío pero la imagen destacada debería estar configurada, de modo que está subida:

hosting de imagenes con wordpress

Con esto, ya estará la primera parte. El sistema para subir imágenes con Gravity Forms funciona perfectamente y, como he dicho antes, si queremos usar directamente el sistema como personal, en la galería multimedia tendremos los enlaces a las imágenes:

hosting de imagenes con wordpress

A partir de aquí podríamos añadir funciones muy fácilmente, pero eso lo comentaré al final del post.

 

Paso 4 – Elementor Pro para mostrar el contenido

Bueno, vamos con la segunda parte de este “image hosting” con WordPress. Vamos a crear la página que aparecerá al subir las imágenes y, para eso, debemos recuperar datos.

Aquí es donde entran en acción Elementor Pro y sus campos dinámicos, que nos permiten recuperar datos de variables.

Independientemente de la apariencia, lo que vamos a hacer con Elementor Pro es darle forma al single.php, es decir, al layout con el que se mostrarán los resultados.

Para hacer esto, vamos a “Plantillas” y después a “Theme Builder”:

hosting de imagenes con wordpress

Yo ya tengo creado en el ejemplo una cabecera y un footer, pero eso es irrelevante y es más que nada estético. Lo importante es que debemos pulsar en “Añadir nueva”, la opción que he marcado en rojo en la imagen anterior.

A continuación, rellenamos así el formulario para crear una nueva plantilla para las entradas:

hosting de imagenes con wordpress

Ahora vamos a darle forma, pero esto te lo voy a explicar en un vídeo, que me es mucho más fácil:

El resultado sería algo similar a lo siguiente:

hosting de imagenes con wordpress

La apariencia es algo muy personal y con Elementor tú decidirás hasta dónde quieres darle forma y cuántos datos quieres mostrar.

Yo, por ejemplo, he añadido la conversión a WebP como funcionalidad, más abajo te explico cómo hacerlo.

Con esto, tu sistema de hosting de imágenes con WordPress estará finalizado y a partir de aquí podrás empezar con la configuración de “extras”.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Paso 5 – Servir las imágenes desde un CDN

Una forma simple de mejorar la respuesta y no tener problemas por ancho de banda ante “hotlinking” es utilizar un CDN.

La forma más fácil de hacerlo en este sistema, sin tocar una línea de código, es implementar CloudFlare para todo el hostname.

cambiar wordpress de servidor

¿Quieres aprender a configurar CloudFlare? Tengo un post sobre eso: https://alvarofontela.com/cloudflare-cdn-optimizar-web-blog/

No voy a entrar a fondo en este tema, ya que CloudFlare es un tema muy “trillado” en este blog y tengo material suficiente como para aprender a implementar CloudFlare en cualquier sitio web.

 

Otras funcionalidades para implementar

Lo que has leído hasta el momento es la “base” y, a partir de aquí, podemos rizar tanto el rizo como queramos. Podemos añadir las funcionalidades que queramos y como queramos, siempre que técnicamente sea posible.

Debemos tener en cuenta que Gravity Forms es el sistema de formularios para WordPress más potente que existe y permite crear cualquier cosa si lo combinamos con otros plugins para WordPress. Además, para Gravity Forms existen cientos y cientos de plugins en CodeCanyon y en el repositorio oficial de WordPress.

A continuación, te dejo algunos ejemplos…

 

Conversión a WebP en el image hosting

Esta es la primera funcionalidad que he añadido, ya que actualmente puede ser útil convertir a WebP, el nuevo formato recomendado por Google.

Lo primero: para convertir a WebP dentro de WordPress podemos utilizar distintos plugins. Yo te recomiendo estos:

  • Imagify (el que yo te recomiendo y uso)
  • WebP Express
  • WebP Converter for Media

Como he dicho, yo suelo utilizar Imagify para todo, ya que es el que utilizo para la optimización de imágenes en todos mis proyectos y, claro, también lo uso para convertir a WebP e incluso para servir en WebP.

Usar Imagify es muy fácil. Simplemente, instalamos y activamos el plugin, configuramos la key y lo ponemos a funcionar.

hosting de imagenes con wordpress

Marcamos todo lo marcado en rojo en la imagen anterior.

Bajamos algo más por la configuración y activamos la opción para crear la versión WebP:

hosting de imagenes con wordpress

Hecho esto, tendremos la versión en WebP para que se cree cada vez que subamos una imagen.

Las imágenes se crearán con la extensión WebP sobre lo que se suba. Por esa razón, para el front-end simplemente debemos añadir la misma variable que en el caso de URL, pero al final que ponga .webp para que cambie la extensión.

hosting de imagenes con wordpress

Como ves, yo lo hice con Imagify porque es mi plugin favorito. Sin embargo, con WebP Express y WebP Converter for Media también se puede configurar para que los nombres queden de esta forma.

 

Envío por email la imagen subida

Esta es otra funcionalidad que podemos configurar con Gravity Forms, que para algo es un completo plugin de formularios de contacto.

Una de las ventajas de Gravity Forms es que podemos darles forma a todos los emails enviados y a dónde son enviados.

hosting de imagenes con wordpress

En el área de “Notificaciones”, dentro de los ajustes del formulario, podemos darle forma usando variables al email que le enviaremos al usuario al subir la imagen si añadimos el campo email:

hosting de imagenes con wordpress

Pero eso no es todo porque, si colocamos un checkbox con un condicional, podríamos establecer que el usuario marque si enviar el email o no:

hosting de imagenes con wordpress

Otra vez, el límite se encuentra en tu imaginación y en lo que te deja hacer Gravity Forms, que en este caso es ilimitado (para emails y envíos).

 

Protección anti-bots y spam

Como todos los formularios web, nuestro pequeño hosting de imágenes puede ser objetivo de spammers y bots automáticos. Por eso, es importante implementar alguna medida que nos permita bloquear automatismos.

De forma nativa, Gravity Forms trae protección por honeypot y podemos activarla desde los ajustes de formulario (para cada formulario específicamente):

hosting de imagenes con wordpress

Si queremos ir un poco más allá, podemos utilizar dos sistemas diferentes pero basados en lo mismo. Por un lado, podemos utilizar un catpcha normal y corriente de los proporcionados por Google Recaptcha V2:

hosting de imagenes con wordpress

Como ves en la imagen anterior, desde “Ajustes” podemos configurar Google Recatpcha V2 en Gravity Forms.

También podemos implementar Google Recaptcha V3 con el plugin Invisible reCatpcha addon for Gravity Forms: https://wordpress.org/plugins/gf-google-captcha/

La ventaja de Recatpcha V3 es que es completamente invisible para los usuarios y funciona en base a reputación del usuario, midiendo ciertos parámetros.

Evidentemente, tanto para implementar Google Recatpcha V2 como V3 tienes que tener una cuenta en Google Recatpcha: https://www.google.com/recaptcha/intro/v3.html

 

Estadísticas de imágenes subidas

¿Quieres tener estadísticas visibles en la página del formulario de subida? Pues es fácil, existen plugins que te permitirán realizar un conteo de subidas y mostrarlo al público con la personalización que tú quieras.

El plugin en cuestión es GravityWP – Count: https://es.wordpress.org/plugins/gravitywp-count/

 

Apariencia del campo UPLOAD en Gravity Forms

Como puedes ver en el título, esta sección está orientada a la personalización de la apariencia de la subida desde Gravity Forms.

La parte de Elementor Pro ya no la toco (porque ya lo mostré), al mostrar datos se trabaja sobre todo con la apariencia; sin embargo, en el caso de Gravity Forms hemos dado forma a la operativa de datos, pero no a la apariencia.

Gravity Forms nos deja hacer muy poca personalización para el campo de subida de archivos. Si queremos personalizar este formulario de subida que hemos creado podemos hacer dos cosas: instalar un plugin o personalizar con CSS.

Además, el formulario puede ponerse de dos formas.

Esta es la forma multi-subida, que podemos especificar con límite de 1 y así aprovechar el drag and drop:

hosting de imagenes con wordpress

Y este es el modo normal, para subir 1 archivo solo pero sin drag and drop:

hosting de imagenes con wordpress

Si queremos personalizar esto, como he dicho, podemos usar CSS. Si no sabemos, existen plugins como Gravity Forms File Upload Enhance UI que podemos encontrar en CodeCanyon.

hosting de imagenes con wordpress

Además, el campo tiene que ser “Obligatorio”, pero eso hace que nos aparezca el típico asterisco para marcar la obligatoriedad. Para evitarlo, podemos utilizar este código CSS en la página donde insertemos el formulario:

El campo predefinido de Gravity Forms para subidas tiene limitaciones. Por ejemplo, este mensaje de número máximo de archivos a subir alcanzado:

gravity forms

Por esta razón yo te recomiendo que, si vas a hacer público el sistema, lo personalices con algún plugin.

Fuera del formulario, si utilizamos Elementor Pro podremos darle la forma que queramos al layout de la aplicación.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

2 respuestas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share on twitter
Share on facebook
Share on linkedin
¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción