1

Quisiera pasar estas imágenes, a Wordpress de manera que cada Fila de Imágenes o patrocinio tenga definido con CSS un tamaño distinto:

Ejemplo: Fila de Imágenes de Patrocinio 1: width: 300px; height: 225px ;

Ejemplo: Fila de Imágenes de Patrocinio 2: width: 200px; height: 125px ;

Ejemplo: Fila de Imágenes de Patrocinio 3: width: 400px; height: 325px ;

¿Como debo pasar el código html al editor de wordpress, que debo omitir de código posteado, y en que parte debó colocar el código CSS para asignar los tamaños?

<!DOCTYPE html>
<html>
<head>
   <title>Ejemplo de imágenes</title>
   <style type="text/css">
   	* { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px; }
   </style>

</head>
<body>
   <h1>Album de imágenes de ejemplo</h1>
   <p></p>

     <p>Patrocinio 1</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja-e1488219473944.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/LOGO-MV-e1488219523437.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Nafin_logo_1-e1488219676293.png" alt="imagen1">
     <br>

     <p>Patrocinio 2</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/SP-Global.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Creel_logo-nuevo.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Piedmont-blue.jpg" alt="imagen2">
     <br>

     <p>Patrocinio 3</p>   
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/FAZENDA-LOGO-2.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Grupo-IGS_logo.jpg" alt="imagen1">
     <br>

</body>
</html>

1 respuesta 1

1

Tendrías que envolver cada una de tus filas en un contenedor de tal manera que pudieras darle una clase en común a cada uno de los elementos contenidos en éste.

Luego en tu css le asignarías ancho y alto a las img dentro de la clase

* { text-align: center; }
      h1 { font-family: arial; text-align: center;}
      p { font-family: arial; text-align: justify; margin: 25px;}
      img {width: 300px; height: 225px ; margin: 10px;float:left }

.patrocinio1, .patrocinio2, .patrocinio3 {
 clear:left;
 float:left;
}

.patrocinio1 img {
   width: 300px; height: 225px ;
}

.patrocinio2 img {
   width: 200px; height: 125px ;
}

.patrocinio3 img {
  width: 400px; height: 325px ;
}
<h1>Album de imágenes de ejemplo</h1>
   <p></p>
  <div class="patrocinio1">
     <p>Patrocinio 1</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja-e1488219473944.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/LOGO-MV-e1488219523437.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Nafin_logo_1-e1488219676293.png" alt="imagen1">
  </div>     
     <br>
     
  <div class="patrocinio2">
     <p>Patrocinio 2</p>
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/SP-Global.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Creel_logo-nuevo.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Piedmont-blue.jpg" alt="imagen2">
     <br>
  </div>

  <div class="patrocinio3">
     <p>Patrocinio 3</p>   
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Asgard.jpg" alt="imagen2">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/FAZENDA-LOGO-2.jpg" alt="imagen1">
     <img src="http://foroamexcap.com/wp-content/uploads/2017/02/Grupo-IGS_logo.jpg" alt="imagen1">
     <br>
  </div>

Esto se puede hacer de muchas maneras. El div puede ser un span, o puede ser tu mismo elemento p si éste envolviese a las imágenes. En vez de clase puede ser un id, y así sucesivamente. El código que te pongo es sólo una manera más.

EDIT añadí un estilo para que las imagenes se puedan alinear horizontalmente, eso si es que su ancho lo permite.

3
  • de acuerdo, gracias, una pregunta: ¿Como hago para que salgan en filas las imágenes y no en una sola columna? Esto me pasa en al pasar el código a wordpress Commented el 27 feb. 2017 a las 20:45
  • Puedes probar darles estilo float: left;
    – ffflabs
    Commented el 28 feb. 2017 a las 2:16
  • @ArmandoArellano edité mi respuesta. Prueba cómo te resulta.
    – ffflabs
    Commented el 28 feb. 2017 a las 10:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.