Crear unha galería de imaxes responsive design en Drupal 6 co tema 0Point
Con seguridade hai moitas maneira de crear unha galería cun conxunto de imaxes coa característicade responsive design, é dicir, que se adapten a distintos tipos de pantalla. Procedo a explicar unha das maneiras:
1. Ir á zona de Administración > Construción da páxina > Plantillas. Pinchamos en configurar na plantilla OPoint que esteamos empregando
2. No apartado Layout width, escollemos a segunda opción_ Fluid width (custom)
3. Agregamos Crear Contido > Páxina, e engadimos un título. Seguidamente pinchamos en Disable Rich Text e pegamos o código e finalmente gardamos, sen pinchar en ningunha outra opción. En canto ao código, dicir que empreguei a clase Grid de css (aínda que tamén se podería facer con flexbox) e para darlle un aspecto máis dinámico engadín unha ligazón de cada imaxe a outra de maior tamaño empregando a súa vez a librería Lightbox. Lembra que debes de ter activo este módulo para que se visualice con este efecto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
box-sizing: border-box;
}
.wrapper {
padding: 50px;
background: #f2f2f2;
max-width:100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
grid-column-gap: 10px;
grid-row-gap:10px;
justify-content: space-around;
}
.img{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"><a href="https://atio.es/pub/costamortex/foto1.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto1.jpg"></div>
<div class="box"><a href="https://atio.es/pub/costamortex/foto2.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto2.jpg"></div>
<div class="box"><a href="https://atio.es/pub/costamortex/foto3.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto3.jpg"></div>
<div class="box"><a href="https://atio.es/pub/costamortex/foto4.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto4.jpg"></div>
<div class="box"><a href="https://atio.es/pub/costamortex/foto5.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto5.jpg"></div>
<div class="box"><a href="https://atio.es/pub/costamortex/foto6.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto6.jpg"></div>
</div>
</body>
</html>
E este é o resultado. Podes comprobar se o comportamento é o correcto ao modificar o tamaño da pantalla.
