Código para crear un portfolio de trabajos sencillo y responsive

Este post es bastante específico, pues solo te va a interesar en el caso de que tengas la necesidad de crear tu propio portfolio.

Poco a poco se van acumulando los trabajos y siempre vienen bien que, si tu actividad profesional lo permite y viene a cuento, los clientes potenciales puedan ver el resultado de otros trabajos ya realizados.

Los testimonios están muy bien, pero hay personas que prefieren ver una muestra ya terminada de lo que les estás vendiendo.

Hace unos meses me planteé incluir el mio propio.

Lo cierto es que estuve mirando un montón de plugins, tanto gratuitos como de pago, y no me convencían mucho.

Al fina opté por picar código yo mismo y hacerlo sencillo y a mi gusto 🙂

Te explico cómo.

Cómo crear un portfolio de trabajos

Antes de entrar en materia, quiero explicarte que hay muchas formas de plantear la visualización de un portfolio.

Por ejemplo al hacer click en cada miniatura:

• Que se abra una única imagen más grande por cada trabajo.
• Que se abra un slider en un popup y pasen varias imágenes.
• Que se abra una página dentro de tu web con muchos detalles de cada trabajo.
• Que simplemente se abra la web de destino de ese trabajo (mi caso)

Sí, yo escogí esta última opción para no complicarme la vida.

Pensé que si usaba un plugin, sería oootro más para la lista y a comer recursos.

Y crear una página específica para cada curro me parecía un poco coñazo, la verdad. ¿Para qué, si puedo hacer que el usuario vaya directamente a ver toda la web de mi cliente?

Total, que mi idea fue poner tres columnas de miniaturas e ir añadiendo trabajos, simplemente con el enlace para que se abra la web en una pestaña nueva del navegador.

Paso 1: trabajo previo con las imágenes

Aquí tenemos currito de Photoshop.

Tampoco hace falta hacer maravillas, simplemente yo lo que hice fue hacer pantallazos de cada web que quería incluir y darle un mismo tamaño.

Luego sí es cierto que les metí una bandita por encima a todas con lo de «VISITAR WEB», eso ya queda a gustos y manejo que tengas de tu programa de edición de imágenes, Photoshop o el que sea.

Eso sí, el tamaño te recomiendo que sea 300x194px.

¿Por qué? Porque si el ancho no supera los 300px, no necesitas hacer nada especial con las imágenes para que se adapten bien a los móviles en posición vertical, que sería la visualización en dispositivo más pequeña.

Lo que haremos (ahora lo verás) es meter por CSS que se vayan colocando debajo, de tal forma que en el móvil vertical tendremos una sola columna, pero no se tendrán que hacer más pequeñas las imágenes.

También es recomendable poner a todas las imágenes un borde finito, del mismo grosor y color a todas. Esto lo puedes hacer en Photoshop o directamente por CSS, como quieras.

Paso 2: crear una clase CSS para aplicar a cada trabajo

Simplemente vamos a «Apariencia/Editor», y dentro de nuestro style.css añadimos la clase «portfolio» con las siguientes carcaterísticas:

.portfolio {
margin: 10px 50px 20px 0px;
display: inline-block;
}
.portfolio a:hover {
opacity: 0.6;
}

Estamos haciendo algo muy sencillo: primero decimos que a lo que aplique esta clase, tendrá unos márgenes determinados respecto de los elementos que lo rodeen.

Dicho más sencillo: le estoy indicando cúanto espacio debe dejar entre las miniaturas, tanto a los lados como arriba y abajo en las filas.

Ese atributo «margin» lo puedes modificar a tu gusto, sabiendo que el orden de los valores es: «arriba, derecha, abajo e izquierda».

Después tenemos el truquillo para hacer que se adapte según el ancho del dispositivo, el «display: inline-block;»

Para mi gusto esto es más sencillo que hacer uso de las clases para columna de Genesis, porque el inline-block lo que hace es «meto las imágenes que quepan a lo ancho, y las que no las voy poniendo debajo.»

Pues justo lo que quiero 🙂

Por último, a esta clase portfolio le aplicamos un estado «:hover» para decirle que cuando estemos con el cursor encima, tenga una opacidad del 60%.

Al ser el fondo blanco, el efecto es que la imagen se aclare un poquito, sin más.

Paso 3: crear la página y meter los trabajos

Tan complicado como crear una página nueva y ponerle un nombre.

Dependiendo del theme que uses (con Genesis es muy sencillo) te será más o menos dificil el indicar que dicha página sea de «ancho total», pues aqui un sidebar no va a hacer otra cosa que molestarnos.

Si lo piensas, casi todos los themes de Genesis tienen alrededor de 1.000px de ancho total, por ello pongo 3 miniaturas de 300px más los márgenes, eso es jugar un poco con el tamaño de cada theme y los márgenes para que encajen bien.

Una vez que hemos hecho esto, metemos nuestras imágenes pero vamos a meterlas por código dentro de un DIV para poder aplicar bien la clase CSS.

Por ejemplo:

<div class="portfolio">
<h4 style="text-align: center;"><a href="http://blog.perfumesparis.com/" target="_blank">Blog de Perfumes París</a></h4>
<a href="http://blog.perfumesparis.com/" target="_blank"><img class="alignnone wp-image-6962 size-full" src="https://www.haciaelautoempleo.com/wp-content/uploads/2014/08/blog-perfumes-paris.jpg" alt="blog-perfumes-paris" width="300" height="194" /></a>
</div>

Puedes meter primero la imagen normal, y al insertarla le pones su atributo «alt», le dices que alineación «ninguna» y le puedes poner del tirón la URL de destino. Eso sí, luego tendrás que volver a entrar en las opciones de edición de dicha imagen para activar que el enlace se abra en una pestaña nueva (recomendado)

Después te vas a la pestaña de texto, y manipulas para que tu código quede como este, obviamente con tu imagen.

Yo he metido un titulo en H4 centrado, para el nombre del trabajo o la web. Esto ya como quieras.

La cuestión es que cuando tengas uno a tu gusto, copies y pegues desde la pestaña de «Texto» ese mismo código tantas veces como trabajos vayas a meter, y luego ya solo tienes que ir a la de «Visual» y puedes borrar la imagen y darle a «Añadir objeto» para que te meta otra imagen distinta en su lugar.

Puedes ver el resultado en mi portfolio de trabajos web.

¿Y si lo vemos con un video?

Y tú, ¿tienes un porfolio en tu web o blog?

¿Qué método o plugin has utilizado? Nos vemos en los comentarios.