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.

Numeración personalizada dunha lista ordenada html

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

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador

        }

        #lista ol li:before{
            content:counter(contador) ".- " ;
            color:grey;
            margin-left:50px;
        }

 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

No caso de queren engadir unha icona de font awesome, deberemos de seleccionar a fonte polo código unicode. Neste exemplo escollemos a imaxe de play, con código unicode f144, tal e como podemos ver na seguinte imaxe:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador;
        }

        #lista ol li:before{
            font-family: FontAwesome;
            content: "\f144  " counter(contador) ;
            
            color:grey;
            margin-left:60px;
        }
 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

Ou tamén engadindo a clase na etiqueta <li> dentro do body

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            display: inline;
        }

        #lista ol li:before{
           
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>
        
        
    <section id="lista">
        <ol>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>

     
        </ol>
    </section>
</body>
</html>

No caso de que teñamos a imaxe da icona descargada, podemos engadila do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            list-style-image:url(./iconos/claqueta_negra.png);
        }

        #lista ol li:before{
            
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>      
        
    <section id="lista">
        <ol>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>     
        </ol>
    </section>
</body>
</html>

Agregar textos e imaxes desde CSS

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

<!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>
        .container{
            color:blue;
            padding: 50px;
        }
        .logo:after{
            content:url(./img/logo-agency.png);                      
        }        
        .logo{
            margin:20px auto;
        }
        .container:after{
            content:"String en un div";  
        }
        .imaxedefondo{
            width:300px;
            height:200px;
            background-image:url('./img/header.jpg');
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: cover;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo"></div>
    </div>
    <div class="imaxedefondo">
    </div>
</body>
</html>

Engadir un vídeo adaptable a dispositivos móbiles

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

En moitas ocasión non é previsible controlar o tamaño que debe de ter un vídeo á hora de engadilo ao Drupal. Isto ocorre nalguhas resolucións xa que as dimensións do vídeo superan o ancho dispoñible, ou no caso de que haxa cambios estrutura dos bloques, pasando de unha columna a dúas.

Para darlle remedio a este problema, debemos de empregar os estilos CSS.

 

A. UN VÍDEO DE YOUTUBE

 

1. Escollemos o vídeo de youtube desexado. Clic en compartir e posteriormente en inserir. Obtemos un código  html como o seguinte:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Se nos fixamos, como width é de 560px e o height é de 315, a relación ancho con respecto ao alto é 16:9. Se dividimos 9/16=0.5625, que ven a ser o 56.25%, que é a relación que engadimos ao padding-bottom. Se a relación entre ancho e alto fose 4:3, como padding-top sería do 75% (3/4=0.75, é dicir o 75%)

2. Deste código eliminamos as dimensións de ancho de alto (width e height), quedado así:

<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. Inserirmos este código dentro do body do seguinte código html, quedando así:

<!DOCTYPE html>
<html lang="en">
<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>
        .video-responsive{
            position:relative;
            overflow:hidden;
            padding-bottom:56.25%;
        }
        .video-responsive iframe{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
        }    
    </style>
</head>
<body>

        <div class="video-responsive">
                <iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

    
</body>
</html>

 

B. UN VÍDEO SUBIDO AO DRUPAL COMO DOCUMENTO ADXUNTO

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        position: relative;
        margin:0 auto;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
    }
    .video-responsive video {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left:0;        
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <video controls="controls">
            <source src="http://www.edu.xunta.gal/centros/crasantacomba/system/files/CESTA%20VIAXEIRA%20DE%20OVOS.mp4" type="video/mp4" />
            O teu navegador non soporta este vídeo.
            </video>
    </div>
</body>
</html>

 

Código html e css dunha táboa

Submitted by martin on Lun, 06/10/2019 - 08:12
Lenda da táboa
ano webs páxinas Liñas
1 2 3 4 5
6 7 8 9

Aínda que moita xente emprega as táboas para maquetar (construir a plantilla ou layout), as táboas só se deben de empregar para gardar datos numéricos. Presento un pequeno exemplo sen funcionalidade ningunha, pero nel compártense filas e columnas e dáselle estilos con código css.

 

<!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>Táboa</title>
    <style>
    table{
        width:70%;
        margin:0 auto;
    }    
    table, tr, th, td{
        border:1px solid grey;
        border-collapse: collapse;
    }
    table th[scope="col"]{
        background-color:rgba(25,25,25,0.2);        
    }
    table th[scope="row"]{
        background-color:rgba(125,205,75,0.2);
        
    }
    td{
        text-align: center;
    }
    </style>
</head>
<body>
    <table>
        <caption>Lenda da táboa</caption>
        <thead>
            <tr>
                <th colspan="2" scope="col">ano</th>    
                <th scope="col">webs</th>
                <th scope="col">páxinas</th>
                <th scope="col">Liñas</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <th data-title="ano" scope="row">1</th>
            <th data-title="ano" scope="row">2</th>
            <td>3</td>
            <td>4</td>
            <td rowspan="2">5</td>
            </tr>
            <tr>  
            <th data-title="ano" scope="row">6</th>
            <th data-title="ano" scope="row">7</th>
            <td>8</td>
            <td>9</td>
            
            </tr>  
        </tbody>
    </table>
</body>
</html>

Subscribe to html_css