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

 

Subscribe to Imaxes