Añadir dos clases a fotos de artículo para evitar texto pegado

Linton · 22 May 2019

El amigo liukin(no sé cómo ponerle enlace) me explica amablemente en esta consulta la manera de añadir una clase dinámicamente (o sea según vayan apareciendo nuevos contenidos) a las fotos de un artículo del blog.

Pero no me basta con una, necesito dos clases por artículo, cuya función es evitar, CSS mediante, que salga el texto pegado a las fotos. Por tanto habrá unas fotos alineadas a la derecha y otras a la izquierda, ambas con margen por el lado contrario.
La foto 1 sería por ejemplo .fotoizquierda {margin-right: 1em}
La foto 2, .fotoderecha {margin-left: 1em}

¿Cómo puedo conseguir eso, en qué sitio añado a cada foto su nueva clase HTML?

BotBeta · 15 Dic 2024

Linton dijo:
El amigo liukin(no sé cómo ponerle enlace) me explica amablemente en esta consulta la manera de añadir una clase dinámicamente (o sea según vayan apareciendo nuevos contenidos) a las fotos de un artículo del blog.

Pero no me basta con una, necesito dos clases por artículo, cuya función es evitar, CSS mediante, que salga el texto pegado a las fotos. Por tanto habrá unas fotos alineadas a la derecha y otras a la izquierda, ambas con margen por el lado contrario.
La foto 1 sería por ejemplo .fotoizquierda {margin-right: 1em}
La foto 2, .fotoderecha {margin-left: 1em}

¿Cómo puedo conseguir eso, en qué sitio añado a cada foto su nueva clase HTML?
Ver el archivo adjunto 136061

Puedes lograr tu objetivo añadiendo dos clases distintas a las fotos de tus artículos en WordPress. Para hacerlo de forma dinámica, puedes utilizar el enfoque que te explicó liukin, pero modificándolo ligeramente para incluir las dos clases que necesitas. Aquí tienes un ejemplo de cómo podrías hacerlo:

1. Primero, añade las dos nuevas clases CSS que deseas en tu archivo de estilo (style.css), por ejemplo:

CSS:

.fotoizquierda { margin-right: 1em; }
.fotoderecha { margin-left: 1em; }

2. Luego, para añadir estas clases dinámicamente a las fotos de tus artículos, puedes modificar el código que te proporcionaron en el enlace que mencionas del foro. Podrías hacerlo de la siguiente manera:

JavaScript:

jQuery(document).ready(function($) {
    // Añadir clase .fotoizquierda a las imágenes alineadas a la izquierda
    $('.entry-content img').filter(function() {
        return $(this).css('float') === 'left';
    }).addClass('fotoizquierda');

    // Añadir clase .fotoderecha a las imágenes alineadas a la derecha
    $('.entry-content img').filter(function() {
        return $(this).css('float') === 'right';
    }).addClass('fotoderecha');
});

3. Finalmente, para aplicar estas clases a las fotos en tus artículos, solo necesitas asegurarte de alinear las imágenes correctamente en tu editor de WordPress. Para hacerlo, selecciona la imagen y elige la alineación deseada (izquierda o derecha).

Al seguir estos pasos, cada vez que añadas una imagen alineada a la izquierda en tu artículo, se le aplicará automáticamente la clase ".fotoizquierda", y lo mismo ocurrirá con las imágenes alineadas a la derecha y la clase ".fotoderecha".

Espero que esta solución te sea de ayuda para evitar que el texto se pegue a las fotos en tus artículos. Si tienes alguna otra pregunta, ¡no dudes en preguntar!

Añadir dos clases a fotos de artículo para evitar texto pegado

Linton

BotBeta