Introducción
En este tutorial detallado aprenderás a crear un grid de logos con tamaño uniforme en WordPress usando object-fit. El objetivo es que, independientemente de la proporción original de cada logo (horizontal, vertical, cuadrado), todos se muestren centrados, con el mismo recuadro y sin deformarse. Verás la marca HTML que usarías en un bloque HTML o en una plantilla, el CSS necesario, cómo integrarlo en WordPress y opciones de compatibilidad y mejora (retina, accesibilidad, polyfill para navegadores antiguos).
Por qué usar object-fit
- object-fit: contain — la imagen se escala para entrar completamente en el contenedor manteniendo su proporción. Verás espacio alrededor si las proporciones no coinciden.
- object-fit: cover — la imagen cubre todo el contenedor, recortando lo que sobresalga. Útil si quieres que el recuadro siempre se llene.
Diseño general y consideraciones
- Accesibilidad: siempre incluir atributo alt significativo.
- Retina: usar imágenes de buena resolución o srcset para evitar pixelado.
- Compatibilidad: object-fit tiene soporte en la mayoría de navegadores modernos para IE/Edge antiguos puedes ofrecer una alternativa con background-image o un polyfill.
- Responsive: usar CSS Grid o Flexbox con auto-fit/minmax para que la rejilla se adapte al ancho.
Marcado HTML recomendado (bloque HTML o plantilla)
Ejemplo de marcado semántico usando una lista. Este bloque puede pegarse en un Bloque HTML de Gutenberg o en una plantilla de tema. Cada elemento contiene un enlace opcional y la imagen del logo.
ltul class=logo-gridgt
ltli class=logo-grid__itemgt
lta href=https://partner1.example class=logo-grid__link target=_blank rel=noopenergt
ltimg src=https://example.com/wp-content/uploads/logo1.png alt=Partner 1 class=logo-grid__img /gt
lt/agt
lt/ligt
ltli class=logo-grid__itemgt
lta href=https://partner2.example class=logo-grid__link target=_blank rel=noopenergt
ltimg src=https://example.com/wp-content/uploads/logo2.png alt=Partner 2 class=logo-grid__img /gt
lt/agt
lt/ligt
lt!-- repetir según sea necesario --gt
lt/ulgt
CSS: Grid responsivo y logos uniformes
Este CSS crea un grid flexible, define el tamaño de las celdas y aplica object-fit a las imágenes. Cambia –logo-size o los breakpoints según tus necesidades.
:root{
--logo-gap: 1rem
--logo-size: 120px / tamaño base de la celda (puedes usar responsive units) /
--logo-bg: #ffffff
}
/ Grid responsivo /
.logo-grid{
display: grid
grid-template-columns: repeat(auto-fit, minmax(var(--logo-size), 1fr))
gap: var(--logo-gap)
list-style: none
margin: 0
padding: 0
align-items: center
}
/ Cada celda mantiene una proporción cuadrada usando aspect-ratio (soporte moderno) /
.logo-grid__item{
background: var(--logo-bg)
display: grid
place-items: center
padding: 0.75rem
border-radius: 6px
box-sizing: border-box
/ Mantener celdas cuadradas si quieres rectangular, elimina aspect-ratio /
aspect-ratio: 1 / 1
overflow: hidden
}
/ Enlaces ocupan todo el espacio para hacer la zona clicable /
.logo-grid__link{
display: block
width: 100%
height: 100%
}
/ Imagen: ocupa el contenedor y mantiene su proporción /
.logo-grid__img{
width: 100%
height: 100%
object-fit: contain / o cover si prefieres llenar y recortar /
object-position: center
display: block
margin: 0 auto
/ Evitar que imágenes muy pequeñas queden pixeladas: max-width puede ayudar /
max-height: 100%
max-width: 100%
}
/ Ejemplo: estilos hover /
.logo-grid__item:hover{
box-shadow: 0 6px 18px rgba(0,0,0,0.08)
transform: translateY(-4px)
transition: transform 160ms ease, box-shadow 160ms ease
}
/ Adaptación: aumentar tamaño de celda en pantallas anchas /
@media (min-width: 1200px){
:root{ --logo-size: 160px }
}
Generar el grid desde PHP (plantilla o shortcode)
Aquí tienes un ejemplo básico de cómo generar la lista desde un loop de WordPress. Este ejemplo asume que tienes posts (por ejemplo, un custom post type partner) con imagen destacada o que estás obteniendo URLs de un campo.
lt?php
// Ejemplo: loop simple sobre CPT partner
args = array(
post_type => partner,
posts_per_page => -1,
orderby => menu_order,
order => ASC,
)
partners = new WP_Query( args )
if ( partners-gthave_posts() ) : ?>
ltul class=logo-gridgt
lt?php while ( partners-gthave_posts() ) : partners-gtthe_post()
link = get_post_meta( get_the_ID(), partner_link, true ) // ejemplo de campo personalizado
thumb = get_the_post_thumbnail_url( get_the_ID(), full ) // URL de la imagen
alt = get_post_meta( get_post_thumbnail_id(), _wp_attachment_image_alt, true ) ?: get_the_title()
?gt
ltli class=logo-grid__itemgt
lta href=lt?php echo esc_url( link ?: # ) ?gt class=logo-grid__link target=_blank rel=noopenergt
ltimg src=lt?php echo esc_url( thumb ) ?gt alt=lt?php echo esc_attr( alt ) ?gt class=logo-grid__img /gt
lt/agt
lt/ligt
lt?php endwhile wp_reset_postdata() ?gt
lt/ulgt
lt?php endif ?gt
Enqueue: añadir CSS/JS correctamente en functions.php
Registra y encola los estilos desde functions.php para que se carguen correctamente.
lt?php
function theme_enqueue_logo_grid_assets(){
// CSS principal (puedes colocar el CSS anterior en un archivo)
wp_enqueue_style( theme-logo-grid, get_stylesheet_directory_uri() . /assets/css/logo-grid.css, array(), 1.0 )
// Si usas polyfill para object-fit:
wp_enqueue_script( object-fit-images, https://unpkg.com/object-fit-images/dist/object-fit-images.min.js, array(), null, true )
wp_add_inline_script( object-fit-images,
document.addEventListener(DOMContentLoaded, function(){ objectFitImages(document.querySelectorAll(.logo-grid__img)) })
)
}
add_action( wp_enqueue_scripts, theme_enqueue_logo_grid_assets )
?gt
Compatibilidad y fallback
Aunque object-fit tiene amplio soporte, si necesitas compatibilidad con navegadores antiguos considera:
- Usar el polyfill object-fit-images. En el ejemplo anterior lo encolamos desde un CDN.
- Alternativa sin object-fit: usar la imagen como background-image de la celda. Ventaja: background-size: contain/cover funciona en navegadores antiguos. Desventaja: tienes que mantener accesibilidad (añadir un elemento ltimggt con alt oculto para lectores o usar atributos aria).
Fallback usando background-image (opción)
/ Si prefieres background-image en cada item (por ejemplo generada desde PHP inline) /
.logo-grid__item--bg{
background-repeat: no-repeat
background-position: center
background-size: contain
}
Ejemplo de cómo podrías insertar la URL desde PHP en estilo inline: style=background-image:url(…) y ocultar la imagen HTML para lectores si la usas exclusivamente como decoración.
Optimización adicional
- Usa srcset/sizes para servir imágenes adecuadas en cada resolución: mejora rendimiento en móviles y dispositivos retina.
- Si las imágenes vienen del editor de WordPress, pide versiones grandes y medianas y usa la función wp_get_attachment_image_srcset() para generar el srcset en el HTML.
- Comprime imágenes: WebP o compresión eficiente para ahorrar ancho de banda.
Resumen de pasos prácticos
- Decide el marcado: lista (ul/li) con enlace y ltimggt dentro.
- Aplica CSS Grid/Flexbox para el layout responsivo.
- Define el tamaño de la celda (aspect-ratio o padding-trick) y aplica object-fit a la imagen.
- Encola CSS/JS en functions.php si lo usas en una plantilla.
- Añade srcset/alt y haz pruebas en móviles, retina y navegadores antiguos.
Ejemplo completo (resumiendo)
Markup (puedes pegar este bloque en un bloque HTML de Gutenberg) y luego añadir el CSS anterior en tu stylesheet.
ltul class=logo-gridgt
ltli class=logo-grid__itemgt
lta href=https://partner1.example class=logo-grid__link target=_blank rel=noopenergt
ltimg src=https://example.com/wp-content/uploads/logo1.png alt=Partner 1 class=logo-grid__img srcset=https://example.com/.../logo1@2x.png 2x /gt
lt/agt
lt/ligt
lt!-- repetir --gt
lt/ulgt
Notas finales
Con object-fit lograrás una presentación profesional y consistente de logos con mínimo esfuerzo. Si tu audiencia usa navegadores modernos, la solución es robusta y limpia. Para entornos con soporte legacy, añade el polyfill o usa background-image como fallback y cuida siempre la accesibilidad (alt, rel=noopener en enlaces externos).
Leave a Reply