Problemas para ajustar tamaño uniforme de miniaturas

  • Autor Autor gerardoMx
  • Fecha de inicio Fecha de inicio

gerardoMx

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Hola gente,aquí vengo con una duda,ojala alguien me pueda ayudar, el problema es el siguiente,estoy viendo la manera de mostrar todas las miniaturas en un solo tamaño,
pero no lo consigo ya he intentado con :

Insertar CODE, HTML o PHP: 
{
height:100px;
width:100px;
}

pero no me funciona por que mientras algunas miniaturas se ven rectangulares,otras se ven cuadradas , el codigo que afecta la dimension es el siguiente:

Insertar CODE, HTML o PHP: 
.wp-post-image { float: left }
.advanced-recent-posts .wp-post-image { min-width: 65px }
.featured-thumbnail {
    max-width: 580px;
    float: none;
    width: 100%;
}
#featured-thumbnail {
    float: left;
    max-width: 150px;
    width: 22%;
    padding-right: 1.7em;
}
.home_page .featured-thumbnail { max-width: 150px }
.featured-thumbnail img {
    margin-bottom: 0;
    width: 100%;
    margin-top: 5px;
}

alguien me podrá dar una pista? ya he intentado cambiar los valores también, pero ni así mantienen el mismo tamaño las miniaturas

Asi es como se ven las miniaturas actualmente ,pero me gustaría que todas tuvieran la misma dimensión,no importando el tamaño real de la imagen


Gracias de antemano por su ayuda 😉
 
tu problema está en el max-width... lo estás definiendo en 150px, entonces eso reemplaza a tu width:100px; y deberías definir un height específico también, así las imágenes con más alto que ancho no se hacen rectangulares.
Ah.. y capas te convenga cortar todas las img cuadradas así no se te desfiguran cuando las definís de esa forma, no se si me explico
 
Muchas gracias por tu respuesta [MENTION=28829]Coperfield[/MENTION]
Defini el height ,pero aun asi no hay manera 🙁
Insertar CODE, HTML o PHP: 
.wp-post-image { float: left }
.advanced-recent-posts .wp-post-image { min-width: 200px }
.featured-thumbnail {
    max-width: 200px;
    max-height: 200px;
    float: none;
    width: 100%;
}
#featured-thumbnail {
    float: left;
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    padding-right: 1.7em;
}
.home_page .featured-thumbnail { max-width: 200px }
.featured-thumbnail img {
    margin-bottom: 0;
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    margin-top: 5px;
Igualmente me cerciore de que en los ajustes de miniaturas del panel de control estuvieran bien


pero ni aun asi 🙁
 
Última edición:
Hola gerardoMx

Prueba así y ya nos comentas:
HTML: 
.wp-post-image { float: left }
.advanced-recent-posts .wp-post-image { min-width: 200px }
.featured-thumbnail {
    width: 200px;
    height: 200px;
    float: none;
}
#featured-thumbnail {
    float: left;
    width: 200px;
    height: 200px;
    padding-right: 1.7em;
}
.home_page .featured-thumbnail { max-width: 200px }
.featured-thumbnail img {
    margin-bottom: 0;
    width: 200px;
    height: 200px;
    margin-top: 5px;

Saludos 🙂
 
Muchas gracias por tu ayuda [MENTION=65428]OLMID[/MENTION],desgraciadamente las miniaturas siguen teniendo un tamaña desproporcionado
creo que esos valores en el css están sobrescritos en otra parte del código,me voy a poner a investigar
 
[MENTION=20768]gerardoMx[/MENTION] pásame el link de tu sitio y miro por si puedo ver algo

Saludos
 
Muchas gracias [MENTION=65428]OLMID[/MENTION] Te mando pm 🙂
 
Utiliza la opción crop o recortar. Cuando CSS reduce imágenes lo hace de forma proporcional, es decir si tu imagen es rectangular se mantiene rectangular, si tu imagen es cuadrada se mantiene cuadrada.

WordPress ofrece la opción de recortar las imágenes al tamaño que quieras, y puede hacer de forma proporcional o exacta.

Para hacerlo necesitas un hosting con PHP compilado o enlazado con GD, casi todos lo tienen, pero es básico.

1. Agrega al archivo functions.php esta línea add_theme_support( 'post-thumbnails' );
2. Luego agrega esta otra set_post_thumbnail_size('minitiatura', 100, 100, true);
3. Debes subir una imagen como destacada para que wp la recorte
4. Agrega este código en donde quieras que aparezca tu miniatura: <?php the_post_thumbnail('single-post-thumbnail'); ?>

Esto funcionará con los post nuevos, para que funcione con post existentes
1. Deben tener imagen destacada
2. Debes regenerar las imagenes (hay plugines para eso)
 
Pues desde anoche y hasta el dia de hoy,no logro hacer que las miniaturas sean redimensionadas
en el panel de control de wordpress la configuracion de miniaturas esta asi:


en la hoja de estilos esta asi:
Insertar CODE, HTML o PHP: 
.wp-post-image { float: left }

.advanced-recent-posts .wp-post-image { min-width: 300px }

.featured-thumbnail {

    width: 300px;

    height: 150px;

    float: none;

}

#featured-thumbnail {

    float: left;

    width: 300px;

    height: 150px;

    padding-right: 1.7em;

}

.home_page .featured-thumbnail { max-width: 300px }

.featured-thumbnail img {

    margin-bottom: 0;

    width: 300px;

    height: 150px;

    margin-top: 5px;


en el archivo functions.php esta asi
Insertar CODE, HTML o PHP: 
/*-----------------------------------------------------------------------------------*/
/*	Post Thumbnail Support
/*-----------------------------------------------------------------------------------*/
if ( function_exists( 'add_theme_support' ) ) { 
	add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 300, 150, true );
	add_image_size( 'featured', 300, 150, true ); //featured
	add_image_size( 'related', 300, 150, true ); //related
}

/*-----------------------------------------------------------------------------------*/


Con todo y esto el resultado es este:


Estuve investigando si eran algunos plugins como wl minify o el wp supercache,pero los he desactivados los dos y ni asi se redimensionan las miniaturas

Alguien tendrá alguna otra pista??
 
Te falto mostrar la parte del loop que genera la ultima imagen.

Sent from my Galaxy Nexus using Tapatalk
 
Galbatorix dijo:
Te falto mostrar la parte del loop que genera la ultima imagen.
Hacer clic para expandir...
lo unico que encontre fue esto
Insertar CODE, HTML o PHP: 
</header><!--.header-->

						<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail">

							<?php if ( has_post_thumbnail() ) { ?> 

								<?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('featured',array('title' => '')); echo '</div>'; ?>

							<?php } ?>

						</a>
a ese te refieres???
 
Pues todo está bien.. intenta crear un post, que debe usar las imágenes correctas... o cambia featured por 'related'. Si el nuevo post sale como tu quieres, tendrías que regenerar todas las imágenes.
 
Otra forma, es aplicar la imagen como background a un div de forma que podrias tener

.caja_con_imagen{
width:200px; height:200px;
}

y en el html:

<div class="caja_con_imagen" style="background:url(ruta/archivo/con/imagen.jpg);"></div>

tantas veces como imágenes tengas.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

I
Cómo establecer un tamaño uniforme para las imágenes en NextGEN Gallery
Respuestas
0
Visitas
787
invasiondecancha
I
Menú
Acceder
Registro