fotos

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`

para hacer los thumbnail uso imagemagick

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 búsqueda 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
- y este visor de la información que tiene una imagen en EXIF incluida la posición que me gustaría usar
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*

para ver los cambios en las imágenes
importante borrar los datos de navegación Archivos e imágenes almacenados en caché
probar también control mas F5
una buena explicación como no de Wikipedia
otra opción es usar el modo privado

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

jekyll galería fotos /jekyll /galería /fotos

Para mostrar galerías de fotos de forma sencilla.

plantilla mínima

la estructura del proyecto tree

pasos a seguir

renombrar los ficheros

los thumbnail

la referencia a los ficheros en yaml

imágenes tumbadas

origen y sitios útiles

propósito

galería de fotos

el día siguiente

importante borrar la cache del navegador*

jhead

jekyll galería fotos
/jekyll /galería /fotos

la estructura del proyecto `tree`

los `thumbnail`

la referencia a los ficheros en `yaml`