WordPress práctico: Creación básica de temas

Formateo de las imágenes en WordPress

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Las imágenes tienen también un modo especial de ser tratadas desde WordPress, ya que pueden llevar incrustadas clases que controlen su forma de colocarse dentro del texto. Veremos ahora qué opciones de formateo de imágenes tenemos.

Transcripción

Voy a dedicar un vídeo especial para hablar de las imágenes. En realidad, se trabaja muy fácilmente con ellas, pero es bueno saber cómo podemos hacer ese trabajo. Para hacer pruebas con estas imágenes, dentro de las entradas que se han importado automáticamente, tenemos una, que es, aquí la tengo, Markup: Image Alignment. Dentro de ella tenemos imágenes que están colocadas, centradas, a la izquierda, ocupando todo el ancho, a la derecha, que están montadas en etiquetas figure, que tienen pies de foto. Vamos a ver cómo trabajar con todas estas imágenes, y vamos a ver qué archivos son los que tendremos que modificar. En principio, el primero de los archivos es el archivo de la carpeta elements, el archivo que se llama _elements. Este archivo de sass tiene dos clases que son imprescindibles. Por un lado, el selector de imagen, img, y por otro lado, el selector de la etiqueta figure. La configuración está pensada para que ocupe el total del ancho siempre que la imagen sea bastante grande y para que no desborde y no se deforme. Eso se consigue pidiendo que tenga un ancho máximo del 100 %. Con eso consigo que si la imagen es más grande, pues se encoja para adaptarse al tamaño disponible. Por otro lado, al no ponerle un width fijo, hago que si el tamaño disponible es más grande que la imagen no se estire. Y por otro lado, el height, que sirve para hacer que no se deforme nunca y que además esto esté marcado, o sea, esta propiedad esté definida y me asegure de que nunca se tenga que estirar. En el caso de figure, es un poco distinto. Aquí lo que tengo es un contenedor dentro del cual va la imagen, y lo único que necesito definir en él es el margen que voy a tener encima o debajo de esa figura. Si vuelvo de nuevo a la página, y voy a la edición de esta página de alineamiento de imágenes, veremos que todas estas imágenes se están añadiendo desde el propio editor de las entradas, y dentro de él, cada vez que añado una imagen, puedo definir a qué lado tiene que alinearse esa imagen. En este caso está centrada, sin embargo está colocada a la izquierda. Eso se traduce, después, en que cualquiera de estas imágenes va a recibir una serie de clases que definen cómo se tiene que comportar. Si inspecciono esa imagen, la selecciono, vemos que tiene la clase alignright para hacer que efectivamente acabe colocada a la derecha. Si, por ejemplo, miro esta más abajo, en esta en concreto no tiene ese align a la izquierda, alignleft, pero básicamente porque está montada sobre una etiqueta figure. Si selecciono esa etiqueta figure, aquí sí que tengo esa clase de alignleft, o sea, que en realidad tanto las imágenes como las que van montadas sobre una etiqueta figure, tienen la clase alignleft o right para controlar cómo se tienen que mostrar. Y esas clases están montadas también dentro de nuestro sass. En concreto, las vamos a encontrar dentro de modules _alignments, y aquí tengo a la izquierda o la derecha. Para conseguir esa alineación a la derecha o a la izquierda, pues primero piden un display inline para que se vean rodeadas por el texto. Un float a la izquierda o a la derecha, que sirve para que se coloquen a la izquierda o a la derecha, y luego, por último, un pequeño margen, que sirve para separar la imagen del texto que le rodea o de cualquier otro elemento que la rodee. El margen está aplicado al lado contrario de donde flota, con eso conseguimos que sólo de ese lado tenga margen y que a lado contrario quede completamente pegado al borde de la columna. Podemos hacer que sea un poco más pequeño, como un 1.2 em. Y ahora las imágenes tendrán este texto un poquito más cercano. También puedo hacer más cosas, por ejemplo, dentro de esta figura tengo un pie de foto, un caption, aquí lo tengo figcaption, y que tiene la clase fig-caption-text. Esa clase fig-caption-text, en realidad, está montada sobre una figura, en la cual hay un alignleft, luego la combinación de ambas puede servir para hacer modificaciones de cómo tiene que verse ese pie de foto. En mi caso, por ejemplo, quiero hacer que en las imágenes que estén alineadas a la izquierda, el texto del pie de foto salga a la izquierda, y las de la derecha pues a la derecha. Para trabajar con los captions, tengo la carpeta media, el archivo _captions.scss, aquí los podemos ver, y dentro de ellos tengo este caption-text, que es la clase que controlaba cómo se va a ver el pie de foto. Aquí, por ejemplo, podría hacer cosas como que ese texto fuese más pequeño, por ejemplo, 0.7, por cierto em. Esto lo voy a poner en la clase de arriba. Pero como digo, también puedo hacer otras modificaciones del tipo de que quiero controlar cuando ese caption está colocado hacia la izquierda o hacia la derecha. Bien, simplemente necesito la clase. Aquí la tengo, alignleft y luego en el elemento que tengo debajo en caption-text utilizar ese selector. O mejor lo explico con un ejemplo práctico Cogería la clase alignleft, se la aplicaría adelante para crear un selector en el que el caption metido en un elemento alineado a la izquierda, tenga un text-align a la izquierda. Y ahora esto lo puedo repetir, pero con la alineación a la derecha. Podría copiar este align-right, aplicarlo, aplicar el right. Para que esto funcione lo pondré al mismo nivel que el wp-caption-text aquí en la parte de abajo. Bien, pues ahora si lo guardo. Y aquí puedo ver como, efectivamente, está colocado a la izquierda o está colocado a la derecha. Exactamente igual que lo he hecho con el pie de foto, pues puedo hacer que vaya más pegado arriba, que tenga menos margen en la parte de abajo, etcetera- Y, por último, otro elemento que también se suele querer modificar es el de las galerías. Aquí tengo un estilo, un archivo _galleries.scss en el cual definimos, por un lado, el margen que tiene la galería, y por otro lado, cómo se van a separar los distintos items de esas galerías. Esta es la galería que viene por defecto dentro de WordPress. Y de hecho, vemos que básicamente consiste en que dependiendo del número de columnas que se está especificando para una galería se va a aplicar un máximo de ancho. O sea, si tengo 2 columnas, el 50 %, si tengo 3, 33 %, si tengo 4, 25 % etc. Esto es algo que no se utiliza mucho, porque lo normal es que cuando aplicamos galerías, utilizamos algún otro plugin de WordPress que sirva para dar mucho más estilo a las galerías. Hay galerías que hacen verdaderas maravillas. Entonces, lo normal es no utilizar esta por defecto. No obstante, si queremos usarla, tendríamos estas clases sobre las que poder trabajar.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.