Soporte » Diseño – Temas y plantillas » Incluir imagen en miniatura de cada post

  • Hola. Llevo varias semanas buscando un tema para WordPress en el que para cada post se genere un excerpt (en la página principal) que incluya una imagen a la izquierda y el título junto a un fragmento del texto a la derecha. Me refiero a algo como esto: http://magazine3.com/demo/technews/category/phones/

    El problema es que en la mayoría de temas de WordPress, al incluir una imagen del post, aparece en grande encima de del título y el fragmento de texto. Ejemplo: https://themify.me/demo/#theme=parallax

    Yo lo que quiero es una imagen pequeña y cuadrada a la izquierda del texto, pero no veo la forma de cambiar eso. ¿Alguien me puede ayudar?

Viendo 15 respuestas - 1 de 15 (de 15 total)
  • ¿Tienes ya el tema o la web?

    Todos esos cambios se pueden hacer a través de CSS, así que no bases tu elección de plantilla por ese motivo, hazlo por otras cuestiones, como la frecuencia de actualizaciones, los plugins que vienen incorporados o la asistencia técnica.

    Muchas gracias por responder, Anaïs. Tengo ya la web y en cuanto al tema estoy dudando entre dos, pero ninguno de ellos muestra las previsualizaciones como yo quiero. ¿Es muy difícil hacer esos cambios con CSS? ¿Cómo puedo hacerlo? Sólo sé lo básico de CSS, hasta ahora sólo he hecho pequeños cambios en webs.

    Por otra parte, he leído que para hacer cambios en CSS es mejor crear un tema hijo para poder seguir actualizando el tema sin perder las modificaciones realizadas, pero no encuentro ningún tutorial que lo explique bien en español.

    Sí, es muy recomendable trabajar con temas hijos, yo siempre trabajo con ellos.
    Casi todos los temas de pago llevan incorporados los temas hijos y si no fuera así es muy sencillo crear uno (cuando llegue el momento puedes preguntar aquí mismo y te responderé encantada).

    Muéstrame los dos temas por los que te decantas y te diré en cual es más sencillo de aplicar los cambios.

    Los temas por los que me decanto son estos (el 1 es el que prefiero) :

    1) http://preview.themezee.com/dynamicnews/
    2) http://demo.themegrill.com/colormag/

    Antes de nada muchas gracias por tu ayuda.

    He hecho los cambios con el primer tema, Dynamicnews, que es el que me ha parecido mejor.

    Este sería el código CSS para dejar las thumbnails como querías:

    .post article a{
    	display:block;
    	width:30%;
    }
    .post article a>img{
    	width:100%;
    	height:100%;
    }
    .post article a,.post article .entry{float:left;}
    .post article .entry{
    	width:70%;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	-o-box-sizing:border-box;
    	box-sizing:border-box;
    	padding:0 1%;
    }

    He probado con el código que has puesto y nada ha cambiado en la web. Lo he colocado en la hoja de estilos, pero no ocurre nada. Por si acaso pongo la URL de mi web: http://www.bateriailimitada.com/

    Verás que en el post con imagen, esta aparece en grande encima del texto. Es la imagen que he seleccionado como imagen destacada desde el menú de edición del post. Que, por cierto, me gustaría que no apareciese esa imagen al comienzo del post, pero ese es otro tema…

    Estoy desesperado, necesito empezar a publicar pero estoy atascado con el diseño.

    Ha sido fallo mio. Cambia .post por .blog:

    .blog article a{
    	display:block;
    	width:30%;
    }
    .blog article a>img{
    	width:100%;
    	height:100%;
    }
    .blog article a,.post article .entry{float:left;}
    .blog article .entry{
    	width:70%;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	-o-box-sizing:border-box;
    	box-sizing:border-box;
    	padding:0 1%;
    }

    Y para quitar la imagen destacada de dentro de las entradas es así:

    .single article .wp-post-image{display:none;}

    Ahora sí, pero se ve mal. He dejado los cambios que me indicas para que puedas ver cómo quedaría, por favor, entra a mi web para verlo.

    El titulo me aparece comprimido hacia la izquierda y aparece debajo de la línea negra en lugar de encima. El espacio gris con la fecha y los comentarios me aparece entremezclado y si lo bajo aparece el texto centrado (la fecha y los comentarios). El extracto del artículo me aparece muy comprimido, debería ser más ancho. La imagen está muy pegada al texto, aunque creo que eso sé cómo cambiarlo. Una duda: ¿la imagen va a ser en proporción a la original o tiene un tamaño específico? Me refiero a que me gustaría más un cuadrado de unos pixeles concretos (por ejemplo 500×500) sin que la imagen se alargue o estreche, es decir, que capte el centro de la imagen. No sé si esto último es posible, si es muy difícil entonces olvídalo.

    Lo de quitar la imagen destacada de las entradas me ha funcionado a la perfección, ¡gracias!

    Prueba con esto:

    .entry-title a{
        float:none;
        width:100%;
    }
    .blog article .entry {
        width: 68%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 1%;
        float: left;
    }
    .blog article a {
        display: block;
        width: 30%;
        margin-right: 2%;
    }

    Respecto al tamaño de las imágenes busca en el codex oficial de WordPress:
    https://codex.wordpress.org/Post_Thumbnails

    En functions.php tendrías que añadir algo así:

    add_theme_support( 'post-thumbnails');
    add_image_size( 'slider_thumbs', 470, 300, true );
    add_image_size( 'list_articles_thumbs', 450, 370, true );
    add_image_size( 'single_thumbs', 690, 300, true );

    Pero con los tamaños de imagen que gustes.

    He probado el nuevo código que me has pasado y tampoco sirve, se queda todo descolocado y además el texto del artículo aparece debajo de la imagen. He dejado los cambios hechos en la web para que puedas ver cómo está ahora.

    He probado varias modificaciones en el código pero no consigo solucionarlo. Cuando quito el display:block del código que me has pasado parece que queda bien salvo por el detalle de que la imagen aparece en gigante, por si te ayuda saberlo.

    Te he puesto un ejemplo y un link con el tema del tamaño los thumbnails para que te lo mires y busques la solución adecuada.

    Referente al otro tema prueba esto

    .entry-title a{
        float:none;
        width:100%!important;
    }

    Cuando empecé esto me sirvió de mucho:
    https://librosweb.es/libro/css/

    He probado con eso y tampoco ha funcionado. Me he pasado horas haciendo cambios de todo tipo y nunca consigo dejarlo bien. Tal y como lo tengo ahora me falla esa línea negra que no está donde debería y que el texto de la zona gris está mal colocado y no entiendo por qué. Me estoy volviendo loco…

    En cuanto al tamaño de los thumbnails todavía no he investigado porque es algo secundario y prefiero resolver primero el otro asunto, aunque por supuesto te agradezco la ayuda.

    Gracias también por la recomendación de librosweb.es, yo también lo tengo como referencia y he aprendido mucho de ahí.

    Finalmente, después de muchas horas, he conseguido dejar bien la web. No conseguía poner bien la franja gris, así que directamente la he ocultado de la home comentando el codigo HTML. No es la mejor solución, pero ya no podía más. Muchas gracias por tu ayuda, no lo hubiese conseguido yo solo. Lo único que está mal ahora es la versión móvil, ya que se ve todo muy comprimido y no sé cómo solucionarlo. Pero bueno, tampoco te puedo pedir más ayuda, bastante te he molestado ya.

    Una duda, ¿para crear un child theme lo tengo que hacer de todos los ficheros o sólo de aquellos que he modificado? Muchas gracias.

    Hola. Perdón por mi ignorancia pero qué son todos esos códigos, dónde se ponen? :/

    Buenas tardes, me gustaría el código para que se vea las imágenes en miniatura, el tema es:

    http://demo.themegrill.com/colormag/

    muchas gracias por tu ayuda de antemano.

Viendo 15 respuestas - 1 de 15 (de 15 total)
  • El debate ‘Incluir imagen en miniatura de cada post’ está cerrado a nuevas respuestas.