Engadir unha galería de imaxes en Drupal

Submitted by martin on Lun, 06/10/2019 - 09:05

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.

Imaxes do litoral galego con licenza Creative Commons

Submitted by martin on Lun, 06/10/2019 - 09:03

A Xunta, a través do Plan do Litoral Galego, ofrécenos un conxunto impresionante de fotografías co litoral galego con licenza Creative Commons.

Para visualizalas, tan só debes de descarga o seguinte ficheiro, e seguidamente abrilo co Google Earth:

Descargar: fotos oblicuas - Plan do Litoral

E clic en Ver Foto 1952

Xa na imaxe, se pinchamos co botón dereito do rato e escollemos a opción "open image", abrirase o explorador coa imaxe, que podemos descargar:

Engadir unha imaxe na que aparece unha ligazón ao pasar o cursor

Submitted by martin on Lun, 06/10/2019 - 09:01

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width:200px;
            height:300px;
            margin:50px auto;  
        }

 

        .imaxe{
            width:100%;
            height:100%;
            position:relative;                  
        }

        .imaxe-overlay{
            
            height: 100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            background:rgba(255,255,255,0.6);
            visibility: hidden;
            opacity:0;
          
        }
        
        .imaxe .img-info{
            font-family: 'Open Sans', sans-serif;
            position:absolute;
            top:45%;
            display:table-cell;
            width:100%;
            text-align: center;
            visibility: hidden;
            opacity:0;
        }

        .img-info a{
            text-decoration:none;
            color: black;
        }

        .imaxe:hover .imaxe-overlay, .imaxe:hover .img-info {
            visibility: visible;
            opacity:1;
        }
      
 
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="imaxe">
            <img src="https://picsum.photos/200/300" alt="">
            <div class="imaxe-overlay">
                <div class="img-info">
                <h3><a href="#">Imaxe link</a></h3>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

Crear unha galería de imaxes responsive design en Drupal 6 co tema 0Point

Submitted by martin on Lun, 06/10/2019 - 08:43

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.

Redimensionar imaxes por lotes

Submitted by martin on Lun, 06/10/2019 - 08:36

Hai moitas utilidades coas que se pode redimensionar as imaxes dunha carpeta. O XnConvert pode ser un deles:

xnconvert

http://www.xnview.com/en/xnconvert/#downloads

Escollemos o paquete deb da versión 32 ou 64 bits, segundo corresponda e procedemos a instalalo co gDebi ou ben desde o terminal coa instrución dpkg -i nomeficheiro.deb

No apartado settings pódese configurar o idioma dos menús en español. O funcionamento é moi sinxelo, tan só debemos de engadir as imaxes e configurar o traballo a realizar co elas.

 

 

Imaxes

Submitted by martin on Lun, 06/10/2019 - 08:31

Neste caso crearemos unha páxina nova, só cunha imaxe, a cal queremos que apareza sempre cando abrimos a páxina web (pegañoso ó comezo das listas).

 

1.- Descargamos a seguinte foto

2.- Abre a imaxe co Gimp.

3.- Clic en Imaxe > Escalar imaxe. Como tamaño, escollemos 300x225 px.

4.- Clic en Ficheiro > Exportar

5.- Clic en Importar (erro de tradución) e gardamos a imaxe nunha carpeta que destinemos a tal fin. Seguidamente en exportar (esta vez si)

6.- Creamos unha nova páxina, que chamaremos Benvidos!

7.- Inserimos a imaxe

8.- Centrámola

9.- Normalmente corresponde ao usuario Administrador decidir se os contidos se promocionan ou non á páxina principal ou incluso ancorala ao inicio dunha páxina. Nesta páxina de formación está configurado que calquera publicación apareza na páxina principal por razóns didácticas.

 

 

RESULTADO


 

Bancos de imaxes