Problemas para ajustar tamaño uniforme de miniaturas

gerardoMx

gerardoMx Seguir

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Feb 2012
Mensajes
1.552
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
0uySLoy.png


Gracias de antemano por su ayuda ;)
 
C

CopperDeveloper

Épsilon
Programador
Desde
9 Sep 2012
Mensajes
762
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
 
gerardoMx

gerardoMx

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Feb 2012
Mensajes
1.552
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
iultjA0.png


pero ni aun asi :(
 
Última edición:
OLMID

OLMID

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Oct 2009
Mensajes
347
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 :)
 
gerardoMx

gerardoMx

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Feb 2012
Mensajes
1.552
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
Axj2S0A.png
 
OLMID

OLMID

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Oct 2009
Mensajes
347
[MENTION=20768]gerardoMx[/MENTION] pásame el link de tu sitio y miro por si puedo ver algo

Saludos
 
G

Galbatorix

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 May 2013
Mensajes
1.231
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)
 
gerardoMx

gerardoMx

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Feb 2012
Mensajes
1.552
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:
3AEUboH.png


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:
Qkj39PV.png


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??
 
G

Galbatorix

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 May 2013
Mensajes
1.231
Te falto mostrar la parte del loop que genera la ultima imagen.

Sent from my Galaxy Nexus using Tapatalk
 
gerardoMx

gerardoMx

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Feb 2012
Mensajes
1.552
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???
 
G

Galbatorix

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 May 2013
Mensajes
1.231
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.
 
96levels

96levels

Beta
Programador
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Nov 2013
Mensajes
65
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í.
Arriba