Portfolio sin márgenes en Genesis Sample 2.6.0

Hace bien poco publiqué un artículo sobre como crear un portfolio con flexbox en Genesis Sample. Pues bien, basándome en ese mismo tutorial, he creado un portfolio con un estilo que siempre me ha enamorado. Un portfolio a pantalla completa. Sin espacios, ni márgenes entre fotos, ni con ningún borde. Con el título oculto que sólo se desvela al hacer un mouse hover (pasar el cursor por encima). Por supuesto, ese efecto lo eliminamos en las pantallas pequeñas, que suelen ser las táctiles. Y como tales, no usamos ratón. 

Como una imagen vale más que mil palabras, ahí os dejo unas capturas de Genesis Sample con el portfolio ya implementado para que veáis a lo que me refiero. 

Como he dicho antes, en tablets la información (el título en este caso) que en pantallas de escritorio se ve haciendo un hover, lo he hecho fijo en la base de las imágenes. Y se vería así. 

Y claro está, de igual manera se verá en móviles. 

No descarto crear un tema de Genesis basado en este diseño de portfolio. Así que agradecería que si estás interesad@ me lo hicieses saber. O bien en los comentarios o bien por el formulario de contacto.

Creando el template del portfolio

Sigamos. Como en el otro tutorial, hará falta que tengas instalado un plugin de Portfolio. Si no lo tienes echa un vistazo a Portfolio Post Type.

Como en el anterior artículo el primer paso será crear el archivo archive-portfolio.php. En él pondremos todo este código para crear la base de nuestro portfolio.

Creada esa base, faltan algunas cosas para mejorar aún más nuestro portfolio. Lo que en el anterior tutorial hacíamos en el archivo functions.php, esta vez para tenerlo todo más ordenado lo separaremos en un archivo aparte sólo para las funciones del portfolio. Para eso crearemos custom-portfolio.php que lo emplazaremos en la carpeta /lib del tema Genesis Sample y pondremos este código en él.

¿Con este archivo que conseguimos? Lo primero damos soporte al portfolio para su página de archivos. Añadimos los tamaños de imagen necesarios para maquetar y crear la rejilla del portfolio. 

También creamos una función para que se muestren dentro de los artículos de portfolio las taxonomías. En este caso, categorías y etiquetas propias del portfolio. Y por último, una función para usar el template que hemos creado en el paso anterior, con las etiquetas y categorías. De ese modo se mostrará la rejilla sin márgenes, tanto si visualizamos el propio portfolio como si entramos en el listado de una etiqueta o categoría.

Nota de diseño: Dado que hemos fijado un tamaño de 720×720 píxeles para las fotos de la rejilla en el portfolio, ese deberá ser también el tamaño mínimo de imagen a la hora de subir las nuestras propias. Podemos aumentarlo o disminuirlo, pero deberemos pensar en que eso marcará nuestro tamaño mínimo de imagen a la hora de cargarlas en nuestro WordPress. 

Eso si, importante! Como esta vez hemos colocado las funciones del portfolio en una archivo aparte, habrá que llamar ese archivo para que WordPress sepa donde buscarlo. Esto es fácil y lo hacemos ingresando la siguiente línea de código en el archivo functions.php.

Y por supuesto el CSS. Es lo que más ha variado con respecto al otro artículo. Lo ideal es colocarlo al final del archivo style.css. También de esa manera, de un vistazo en cualquier momento veremos lo que hemos incluido y lo que hemos cambiado.  Para hacerlo adaptativo y fluido he tenido que añadir dos media queries más. Una de un mínimo de 740px y otra de 1200px.

El resultado me encanta. Y lo que he mencionado antes. No descarto el desarrollar un tema a partir de este modelo de portfolio. Con algunas variantes y con un estilo propio, eso si. Pero manteniendo esta idea de portfolio sin márgenes.

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo en los comentarios.