Inicio

Blog

 

Engadir Galería a Pelican

 

xa que estou conectado ao servidor vou deixar aquí os recursos que lin para engadir unha galería de fotos que crea unha miniatura sobre a que podes premer e ves a foto máis grande nun "lightbox" (escurece a páxina, semitransparente, para destacar a foto)

 

Non é obxecto desta reseña describir Pelican (getpelican.com), nin instalalo, nin facer públicos os ficheiros que crea (web estática). Ademais isto é para a web, así que ti que les isto en gemini igual nin che interesa. Fas ben.

 

O proxecto en sí consta de dúas partes, sendo independentes e ademáis a segunda (lightbox) non é realmente necesaria

 

Documentación, na www

 

isto é o relevante, con isto vas que chutas se queres enredar un anaco:

 

Complemento "photos" para Pelican

Magnific-Popup (Lightbox)

CSS para dar formato á grella

 

 

TL;DR Resultado final

 

Pódelo ver na seguinte ligazón web:

Galería de fotografías con lightbox

 

Só é unha galería de exemplo para probar que funciona, irei creando algunha máis

 

Galería

 

pelican-photos

INSTALAR o complemento para pelican no teu entorno python

 

python -m pip install pelican-photos

 

chámase "pelican-photos", para liarte.

 

ACTIVAR o complemento en pelicanconf.py

 

PLUGINS = ["photos", ...]

 

no ficheiro de configuración tamén hai que definir onde vas subir as fotos (admite subcartafoles)

 

Le a documentación con todas as posibilidades.

 

metadatos da páxina

 

a "galería" pódela incluír en calquera páxina se (unha vez activado o complemento) así o indicas nos "metadatos" da mesma (o que vai ao inicio de todo)

 

gallery: {photo}cartafol{Título galería}

podes engadir VARIAS galerías ás mesma páxina, separadas por comas (,) nos metadatos

 

 

editar modelos

 

modelos aka "plantillas" aka "templates", é dicir, os modelos que definen a estructura das páxinas.

 

Normalmente cada decorado ten definidos varios modelos, partindo de "base.html" imos engadindo particularidades.

 

As galerías pódense engadir en calquera lugar que se defina, pero hai que ter isto en conta porque o código varía lixeiramente. Respecto do exemplo que vemos na documentación, indicado para incluír a galería nun "artigo" (article), se a vas mostrar nunha "páxina" (page) entón debes cambiar "article" por "page" no código.

 

Eu useino nunha "páxina" (despois engadínlle o css para a grella)

 

{% if page.photo_gallery %}
<div class="gallery">
		{% for title, gallery in page.photo_gallery %}
			<h1>{{ title }}</h1>
				{% for name, photo, thumb, exif, caption in gallery %}
						<a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
				{% endfor %}
		{% endfor %}
</div>
{% endif %}

 

 

 

Se creas ou adaptas un novo modelo debes indicalo nos metadatos da páxina con:

template: modelo

pode ser útil, pois así non se verá afectada ningunha outra parte da web, só as páxinas onde queiras usar galerías.

 

CSS para grella de fotos

 

inicialmente as fotos da galería aparecían todas en fila (ou columna, dependendo o tamaño da ventá, polo CSS adaptable que xa ten o decorado Nest)

 

Non te líes con isto ao principio, déixao para o final de todo porque o CSS pode confundirte e agochar erros cometidos noutras partes.

 

Eu lin a ligazón de arriba a w3schools e xa me chegou.

 

Co feito ata agora xa temos a Galería funcionando (le a documentación! RTFM! XD ) e ao premer nunha imaxe vémola a tamaño completo no navegador. Queda máis chachi nunha Caixa de Luz.

 

"Lightbox"

Aquí hai que tirar de JavaScript

 

Non hai que "compilar" ou "build" nin nada. Vas a "https:github.com/dimsemenov/Magnific-Popup/tree/master/dist" e descargas os tres ficheiros (css e js), gárdalos dentro de "content/themes/theme/static/" (por exemplo) e que deberás despois incluír nos "modelos" (probablemente "base.html" sexa bo lugar).

 

Fíxate que tamén fai falta "jquery" ou "zepto". Podes pór a ligazón a google ou simplemente descargalos (son pequenos) e servilos tamén xunto cos outros.

 

Que che parece?

 

E xa está. Mira a ver que che parece. A documentación é extensa e só hai que poñer un pouco de coidado co nome das variables e definir ben as rutas ás fotos e ao javascript. Coidado non liala co CSS.

 

Na seguinte ligazón podes mandarme unha mensaxe (pode ser anónima):

 

ENVÍAME UNHA MENSAXE // Send me a Fatline message!

 

Inicio

Blog