💾 Archived View for gem.xmgz.eu › gemlog › 2024-01-14-pelican-galeria.gmi captured on 2024-08-18 at 17:17:09. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2024-02-05)
-=-=-=-=-=-=-
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
isto é o relevante, con isto vas que chutas se queres enredar un anaco:
Complemento "photos" para Pelican
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
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.
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
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.
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.
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.
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):