Avisos
Vaciar todo

Igualar tamaño imágenes página blog

4 Respuestas
2 Usuarios
0 Reactions
25 Visitas
Respuestas: 91
Estimable Member
Topic starter
 

Buenos días. Estoy intentando crear un blog en mi página pero no sé cómo conseguir que las imágenes queden del mismo tamaño (más pequeñas),  alineadas y, de ser posible, que por lo menos haya 3 en cada fila, para que se vean bien ordenadas. Gracias

Contenido solo visible a usuarios registrados


 
Respondido : 04/02/2025 12:33 pm
Tags del tema
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Pedro,

En este caso el problema no es el tamaño de tus imágenes, sino la altura del contenedor de los post de blog, para solucionarlo puedes probar lo siguiente: 

Edita el módulo de blog y en la pestaña Avanzado añade la siguiente clase dt-blog-equal-height

image

Una vez tengas esto añadido, accede a Divi → opciones del tema → Integración y pega el siguiente código en la sección de header

image
<script>
(function ($) {
$(document).ready(function () {
$(window).resize(function () {
$('.dt-blog-equal-height').each(function () {
equalise_articles($(this));
});
});

$('.dt-blog-equal-height').each(function () {
var blog = $(this);

equalise_articles($(this));

var observer = new MutationObserver(function (mutations) {
equalise_articles(blog);
});

var config = {
subtree: true,
childList: true
};

observer.observe(blog[0], config);
});

function equalise_articles(blog) {
var articles = blog.find('article');
var heights = [];

articles.each(function () {
var height = 0;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;

heights.push(height);
});

var max_height = Math.max.apply(Math, heights);

articles.each(function () {
$(this).height(max_height);
});
}

$(document).ajaxComplete(function () {
$('.dt-blog-equal-height').imagesLoaded().then(function () {
$('.dt-blog-equal-height').each(function () {
equalise_articles($(this));
});
});
});

$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
var dfds = [];

if (!$imgs.length) {
return $.Deferred().resolve().promise();
}

$imgs.each(function () {
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();

img.onload = function () {
dfd.resolve();
};

img.onerror = function () {
dfd.resolve();
};

img.src = this.src;
});

return $.when.apply($, dfds);
}
});
})(jQuery);
</script>

Guarda los cambios y revisa como va todo

Un Saludo

 


 
Respondido : 04/02/2025 2:33 pm
Respuestas: 91
Estimable Member
Topic starter
 

@karen Muchas gracias Karen. Me ha funcionado perfectamente en cuanto a igualar el tamaño de imágenes... Si me pudieras ayudar para que dichas imágenes fuesen más pequeñas y poder poner 3 entradas en cada fila y ya luego añadiría barra lateral... Gracias


 
Respondido : 04/02/2025 4:47 pm
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Pedro, 

En este caso necesitas realizar otro tipo de cambios ya que Divi en sus configuraciones básicas no lo añade, por ejemplo puedes revisar un ejemplo que comparten en su documentación oficial

Contenido solo visible a usuarios registrados

https://help.elegantthemes.com/en/articles/2310880-how-to-change-the-number-of-columns-in-the-blog-module

Verifícalo y revisa si con ello puedes configurar lo que necesitas.

Un Saludo


 
Respondido : 04/02/2025 7:03 pm