jekyll galería fotos

inicio / programacion / jekyll / {{page.title}}

{% include toc.html %}

Para mostrar galerías de fotos de forma sencilla.

  • galería de imágenes con jekyll

plantilla mínima

  • usando la plantilla mínima
  • para evitar que salga en el menú una page se quita en la page el title del front-matter
    • esta plantilla toma del directorio C:\tools\ruby23\lib\ruby\gems\2.3.0\gems\minima-2.1.1 los directorios _layouts, _includes, _sass y assets.
    • para clarificar los he copiado en el proyecto
  • modificando assets/main.css o mejor C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima-galeria\_sass\minima\_base.scss
/**
 * Images
 */
img {
  // max-width: 100%;
  vertical-align: middle;
}
  • usa sass para la generación de los css
  • una solución mejor es crear estilos.css ponerlo en _includes\head.html
  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
  <link rel="stylesheet" href="{{ "/assets/css/estilos.css" | relative_url }}">
  • después de main.css para que sobrescriba la regla para img
img {
  max-width: none;
 }

la estructura del proyecto tree

C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima-galeria>tree
Listado de rutas de carpetas para el volumen Acer
El número de serie del volumen es 00000200 22C7:ADBD
C:.
├───assets
│   ├───css
│   ├───img
│   └───js
├───galerias -- para cada galería un directorio
│   └───retratos
├───img_galerias
│   └───retratos
├───_data
├───_includes
├───_layouts
├───_sass
│   └───minima
└───_site -- el sitio generado
    ├───about
    ├───assets
    │   ├───css
    │   ├───img
    │   └───js
    ├───galerias
    │   └───retratos
    └───img_galerias
        └───retratos

pasos a seguir

  • cada galería necesita un subdirectorio en el directorio galerías con el archivo index.md
  • las imágenes que se quieren mostrar en un directorio dentro de img_galerias

renombrar los ficheros

  • con ant renamer y su opción enumeración parámetros:
    • mascara
    • img-%num%%ext%
    • iniciar en
    • 0
    • les cambio el nombre

los thumbnail

C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima-galeria\img_galerias\pruebas>magick *.jpg -resize 120x120 thumbnail-%03d.jpg

C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima-galeria\img_galerias\pruebas>dir
 El volumen de la unidad C es Acer
 El número de serie del volumen es: 22C7-ADBD

 Directorio de C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima-galeria\img_galerias\pruebas

25/06/2017  18:42    <DIR>          .
25/06/2017  18:42    <DIR>          ..
17/12/2015  07:01         1.572.609 img-000.jpg
17/12/2015  07:04         1.702.661 img-001.jpg
18/12/2015  00:52           733.282 img-002.jpg
18/12/2015  01:06           935.408 img-003.jpg
18/12/2015  01:06           900.480 img-004.jpg
25/06/2017  18:42            16.313 thumbnail-000.jpg
25/06/2017  18:42            14.411 thumbnail-001.jpg
25/06/2017  18:42             7.433 thumbnail-002.jpg
25/06/2017  18:42            12.506 thumbnail-003.jpg
25/06/2017  18:42            14.170 thumbnail-004.jpg
              10 archivos      5.909.273 bytes
               2 dirs  587.455.848.448 bytes libres

la referencia a los ficheros en yaml

  • en el archivo _data\galerias.yml se referencian las fotos
- id: pruebas
  description: pruebas
  imagefolder: /img_galerias/pruebas
  images:
  - name: img-000.jpg 
    thumb: thumbnail-000.jpg 
    text: la foto 0
  - name: img-001.jpg 
    thumb: thumbnail-001.jpg 
    text: la foto 1
  - name: img-002.jpg 
    thumb: thumbnail-002.jpg 
    text: la foto 2
  - name: img-003.jpg 
    thumb: thumbnail-003.jpg 
    text: la foto 3
  - name: img-004.jpg 
    thumb: thumbnail-004.jpg 
    text: la foto 4

imágenes tumbadas

  • hay algo que se me escapa pues aunque en algunos visores de vea las fotos en la orientación correcta luego en la web se ven tumbadas.
  • lo soluciono abriendo el programa ImageMagick Display que en la visión de directorio se ven derechas pero si las abres una a una se ven como se muestran luego en la web y te permite rotarlas fácilmente.
  • si hacer esto primero con las imágenes luego los thumbnail ya salen derechos

origen y sitios útiles

  • ejemplo de christianspecht

  • lo descargo y modifico

    • es simple y efectivo
    • usa lightbox2
    • C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\christianspecht\jekyll-gallery-example\img\demopage\javier>magick *.jpg -resize 120x120 thumbnail-%03d.jpg
    • atención pues se da un salto el thumbnail00 se corresponde con la imagen 01.

  • tiene otros ejemplos de uso de jekyll interesantes

  • un buen ejemplo de integración de busqueda de hmfaysal

propósito

  • notas sobre el uso de jekyll para montar una galería de fotos

  • quiero hacer un sitio para mostrar las fotos de santiago

  • empiezo con C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima-galeria-santiago pero la mayoria de las fotos están tumbadas y eso es un problema.

  • buscando información sobre las propiedades EXIF encuentro este ejemplo

  • buen ejemplo

  • monto un ejemplo con la plantilla minima en C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\minima_para_galerias

galería de fotos

  • sigo este repositorio
    • lleva un ejemplo incorporado sample-installation
  • tengo que resolver un problema
C:/nube/MEGA/programacion/HtmlCssEstatico/jekyll/sample-installation/_config.yml
            Source: C:/nube/MEGA/programacion/HtmlCssEstatico/jekyll/sample-installation
       Destination: C:/nube/MEGA/programacion/HtmlCssEstatico/jekyll/sample-installation/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
  Liquid Exception: Invalid Date: '"\n ERROR, EXIF-Tag RB\n "' is not a valid datetime. in photography/santiago/index.html
             ERROR: YOUR SITE COULD NOT BE BUILT:
                    ------------------------------------
                    Invalid Date: '"\n ERROR, EXIF-Tag RB\n "' is not a valid datetime.

  • en el propio repositorio dan la solución

  • renombro el directorio del ejemplo a galeria_santiago

  • cambio en el layout photo.html el filtro date_to_long_string por date_to_xmlschema para tener más información de las fotos

  • las fotos se ven tumbadas pero si le das a ver en una nueva pestaña se muestran derechas 😠

  • un intento con esta solución

    • da este error
C:\Users\javie\AppData\Roaming\npm\node_modules\jpeg-autorotate\node_modules\piexifjs\piexif.js:246
                throw ("Given thumbnail is too large. max 64kB");

  • JHEAD -v -autorot C:pictures***.jpg

    • pero parece como que no actúa a pesar de que dice lo contrario

  • probarlo bien pues no estaba siendo correcto

    • serían problemas de cache en el navegador casi seguro
    • comprobar que pasa si la imagen ya esta correctamente posicionada y si averigua en que sentido debe rotarla

el día siguiente

  • sigo este repositorio

    • lleva un ejemplo incorporado sample-installation
    • el proyecto esta en C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\galeria_santiago

  • repito las pruebas de ayer para rotar las imágenes con la serie img-100.jpg a img-109.jpg

    • las llevo a C:\inicio\probando
C:\inicio\probando>JHEAD -v -autorot *.jpg
  • funciona correctamente 😄
  • las fotos originales están en C:\nube\MEGA\viajes\CaminoSantiago

  • las llevo a C:\inicio\tratandoFotosSantiago las renombro con antRenamer hasta el 771

  • 2017-09-10 22:35:28

    • a aerobatic después de logearme
C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\galeria_santiago>aero create galeria_santiago
C:\nube\MEGA\programacion\HtmlCssEstatico\jekyll\galeria_santiago>aero deploy

importante borrar la cache del navegador*

jhead

JHEAD -h 

...

ROTATION TAG MANIPULATION:
  -autorot   Invoke jpegtran to rotate images according to Exif orientation tag
             Note: Windows users must get jpegtran for this to work
  -norot     Zero out the rotation tag.  This to avoid some browsers from
             rotating the image again after you rotated it but neglected to
             clear the rotation tag