Si luego de actualizar Divi, notaste que las imágenes miniaturas del módulo Blog o Portfolio se recortaron, aquí tienes la solución para restaurarlas.
La Situación
Me encontraba modificando un sitio web e implementando Divi Theme.
Mi proceso de trabajo implicó hacer una copia del sitio online a mis servidores, e ir modificando páginas y adaptando contenidos a Divi. También incluía la creación de nuevas páginas / contenidos: uno de ellos, utilizando el módulo portfolio.
El Problema
Una de las nuevas funciones requeridas era la de Portfolio y estaba trabajándola normalmente. Pero luego de actualizar Divi, las miniaturas de la imágenes destacadas cambiaron. Ya no se mostraban correctamente, sino que aparecían recortadas.
Chequeé en otras páginas que tengo con Divi y el problema también aparecía en las miniaturas del módulo Blog.
Lo interesante del asunto, es que con las imágenes que ya tenía cargadas no había problemas. Se mostraban correctamente. El inconveniente se presentaba en las que subía luego de la actualización.
Analizando el código, observé que las imágenes se estaban cortando (no redimensionando) en 400×284, al cargarse.
La Búsqueda
Por supuesto que inmediatamente comencé a tocar los ajustes del módulo de Portfolio. Allí no obtuve resultados.
Pasé a tocar el CSS y a lograr algunos cambios en cuanto al tamaño de las imágenes, pero no hallaba la solución definitiva: que no se recorte la imagen, más allá del tamaño que pudiera tener.
La Solución
Finalmente, luego de googlear un rato para ver si alguien ya lo había resuelto y ahorrar tiempo, di con un artículo de Elegant Tweaks -en inglés- que me salvó rápidamente.
Como no lo encontré en español y a mí me ha funcionado, lo comparto con vos traduciendo su contenido. Puedes leer el artículo original aquí: http://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/
Este problema se resuelve agregando algunas líneas de código al functions.php de tu Child Theme.
Si aún no tienes un Child Theme, te ofrezco uno aquí: Descarga: Divi Child Theme
Si aún no trabajas con un Child Theme, te recomiendo que lo hagas. Es muy simple y evitará que cualquier parche, como este que estamos aplicando, se borre al actualizar tu plantilla.
Si no deseas instalar uno y prefieres trabajar directamente sobre los archivos de la plantilla original, es tu decisión y responsabilidad.
Modificar tamaño de miniaturas del Blog
Lo primero será entrar a editar el archivo functions.php. Si no sabes editarlo localmente, puedes hacerlo ingresando en tu panel de administración de WordPress a: Apariencia / Editor.
Allí localizas el archivo functions.php y pegas el siguiente código (puedes evitar abrir <? y cerrar ?> el php si ya se encuentra en el archivo):
<?php // Begin child theme import function my_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); // End child theme import // Begin custom image size for Blog Module add_filter( 'et_pb_blog_image_height', 'blog_size_h' ); add_filter( 'et_pb_blog_image_width', 'blog_size_w' ); function blog_size_h($height) { return '400'; } function blog_size_w($width) { return '400'; } add_image_size( 'custom-blog-size', 400, 400 ); // End custom image size for Blog Module ?>
La primer sección del código es simplemente la importación de tu archivo style.css de tu tema hijo.
La siguiente sección cambia el tamaño de la imagen del módulo blog y agrega un tamaño para las miniaturas cuando se cargan nuevas imágenes.
Si deseas cambiar el tamaño por uno que necesites a medida, sólo debes modificar los valores en la siguiente línea:
add_image_size( 'custom-blog-size', 400, 400 );
También puedes recortar la imagen dándole un parámetro true a la función:
add_image_size( 'custom-blog-size', 400, 400, true );
De esta manera recortarías la imagen desde la posición central vertical y horizontalmente. Puedes cambiar la posición de recorte agregando valores de posición a la función, comenzando con la posición horizontal seguida de la vertical:
add_image_size( 'custom-blog-size', 400, 400, array( 'center', 'top' ) );
Modificar tamaño de miniaturas del Portfolio
Y por último, para resolver lo de las miniaturas del módulo Portfolio, usamos este fragmento:
// Begin custom image size for Portfolio Module add_filter( 'et_pb_portfolio_image_height', 'portfolio_size_h' ); add_filter( 'et_pb_portfolio_image_width', 'portfolio_size_w' ); function portfolio_size_h($height) { return '400'; } function portfolio_size_w($width) { return '400'; } add_image_size( 'custom-portfolio-size', 400, 400 ); // End custom image size for Portfolio Module
Ten en cuenta que si deseas cambiar los tamaños de imagen para el blog y el módulo de cartera, sólo necesitarás incluir la función add_image_size una vez. Eso es si los tamaños de las imágenes serán los mismos para ambos módulos. Si los quieres diferentes, puedes incluir la función dos veces con diferentes valores para cada tamaño de imagen. Sólo asegúrate de que el nombre de la miniatura sea diferente para cada función:
add_image_size( 'custom-blog-size', 400, 400 ); add_image_size( 'custom-portfolio-size', 450, 800 );
11 comentarios en “Divi: solución tamaño miniaturas de blog y portfolio”
Hola Franco! gracias por el post. Yo me estoy volviendo loca porque me pasa justo al contrario, yo quiero que mis galerias se recorten para que se vea todo uniforme, antes lo tenia así y debe haber habido alguna actualizacion que me lo ha cambiado todo. El problema es que al tener imagenes horizontales y verticales para que se me vea uniforme necesito que se me recorten, modo Entorno o Retrato.
Tambien uso Child Divi y he probado de todo, regenerar miniaturas, desactivar algun plugin de imagenes, modificar los Ajustes de Medios y nada. Solo me queda la ultima opcion de restaurar la web a un punto anterior pero estoy intentando todo antes de eso…
Me sería de gran ayuda si se te ocurre por qué es y cómo podría solucionarlo.
Un saludo
Hola Alexandra. Creo darme una idea de lo que te sucede y la solución. Puedo escribir una posible solución en un post pero no sé si sería la que necesitas vos. Si deseas, escribime a través del formulario de contacto y vemos de solucionarlo. No creo que sea conveniente lo de restaurar la web a un punto anterior 🙂
Hola:
Estoy buscando un tutorial o guía para personalizar las miniaturas de las entradas en DIVI. Solamente encuentro 2 opciones: tamaña completo y rejilla, pero ninguna de las dos opciones me sirven.
¿Cómo puedo crear una miniatura con la foto a la izquierda y el texto a la derecha (en versión pantalla de pc)?
Gracias!
De paso, les dejo el link a mi sitio web por si les interesa el tema, estoy aún construyéndolo con Divi.
Hola Javier. Aquí un breve artículo sobre cómo hacer lo que necesitas: https://www.francogiardina.com/divi-modulo-blog-alinear-imagen-destacada-izquierda/
Muchas gracias por comentar y éxitos con tu nueva página!
Hola Franco!! Muy buen post
Habría alguna forma de cambiar el color del tipo de evento? es decir para que cada tipo de evento tenga un color. Muchas gracias. Saludos.
Muchísimas gracias, ciertamente no encontraba esta solución en ningún lado. Ha funcionado perfectamente. Un saludo!
Gracias por comentarlo Alberto. Me alegro que haya sido útil. Saludos!
Muy útil, me ha servido perfectamente.
Me alegro mucho Erickson, gracias por comentarlo.
Un saludo, amigo franco tu información me ha sido muy útil me ha funcionado bastante para la versión de escritorio quisiera saber si esta configuración aplica para la versión mobil de mi thema Divi?
Hola Juan. Sí, a mí me funcionó en todas las resoluciones. Pero como de esto ya hace tiempo, con tantas actualizaciones que hubo, tendrías que probar. Si no funcionara como deseas borras el código del functions.php y listo.
Saludos y gracias por comentar.