Avisos
Vaciar todo

Igualar tamaño imágenes página blog  

 
PEDRO
 PEDRO
Usuario experto

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

Citar
Respondido : 04/02/2025 12:33 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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

 

ResponderCitar
Respondido : 04/02/2025 2:33 pm

PEDRO
 PEDRO
Usuario experto

@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

ResponderCitar
Respondido : 04/02/2025 4:47 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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

ResponderCitar
Respondido : 04/02/2025 7:03 pm