• Resuelto afnays

    (@afnays)


    Hola buenas. Uso el tema GoPress. Lo que quiero hacer parece sencillo pero no logro hacerlo. El loop de este tema distribuye por pares las entradas en el Homepage. Es decir, aparecen los thumbnails de a dos, cada uno de ellos con su respectivo título+imagen+resumen. De modo que los posts bajan en dos columnas.
    Lo que quiero hacer es que uno de esos post (especial) abarque ambas columnas y luego sigan los siguientes por pares.
    Es decir, quiero que uno thumnail de categoría especial tenga una imagen del tamaño de dos pequeñas.
    Me imagino que eso se hace en el loop. Y es aquí donde me tranco. He visto infinidad de tutoriales, leído recomendaciones y no doy con ese resultado.
    Lo intenté por campos personalizados (custom fields) pero tampoco. Es complicarse todavía más. Puse la foto del tamaño doble y la deforma o cuando la despliega echa hacia abajo toda la columna derecha donde van los widgets.
    Este tema trae por separado el archivo de loop-entry. Parece sencillo pero no sé cómo hacer lo que les planteo.
    Les dejo copia del código de loop-entry original:

    <?php
    $count=0;
    while (have_posts()) : the_post();
    $count++;
    ?>

    <?php
    //design for pages
    if ( get_post_type() == ‘page’) { ?>

    <div class=»loop-entry clearfix <?php if($count ==’2′) { echo ‘remove-margin’; } ?>»>
    <h2>» title=»<?php the_title(); ?>»><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
    </div><!– END entry –>

    <?php } else { ?>
    <div class=»loop-entry clearfix <?php if($count ==’2′) { echo ‘remove-margin’; } ?>»>

    <?php if ( has_post_thumbnail() ) { ?>
    <div class=»loop-entry-thumbnail»>
    » title=»<?php the_title(); ?>»><?php the_post_thumbnail(‘post-image’); ?>

    <?php } ?>

    </div>

    <h2>» title=»<?php the_title(); ?>»><?php the_title(); ?></h2>
    <div class=»post-meta»>
    <?php _e(‘Posted On’,’gopress’); ?> <?php the_time(‘j’); ?> <?php the_time(‘M’); ?>, <?php the_time(‘Y’); ?> – <?php comments_popup_link(‘0 Comments’, ‘1 Comment’, ‘% Comments’); ?>
    </div>
    <?php the_excerpt(»); ?>
    </div>

    <!– END entry –>

    <?php } ?>

    <?php if($count ==’2′) { echo ‘<div class=»clear»></div>’; $count=0; } endwhile; ?>

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Lo comentas pinta de que el tema está hecho así:
    – Entradas mostradas en dos columnas, que en CSS se traduce como capas de X tamaño con float:left para que vayan ajustándose solas.

    Si puedes corroborar que es así podrás crear una clase especial para la entrada que tu quieres que salga a tamaño doble cambiándole los estilos y haciendo un if(is_category(1)) echo «class=’clase_especial'»; dentro del <div class=»post»> (o sustituto) de tu tema.

    No sé si me explico, si no es así responde en este mismo hilo y trataré de hacerlo de otra forma.

    Saludos.

    Hola,

    Lo que quieres hacer se parece mucho a algo que tuve que resolver hace poco, puedes verlo aquí:
    http://codigonuevo.com

    Trás analizar a fondo el problema y las posibles soluciones llegué a la conclusión de que lo más sencillo era usar la seudo-clases :nth-child() de CSS.

    Pongamos por caso que el efecto debe repetirse cada 9 posts (o cualquier número impar para que no te quede descuadrado el layout puesto que solo aplicarás el efecto sobre un elemento), osea que el primero de cada 9 debe ser el doble que los siguientes y suponiendo que tienes una clase .articulo para cada posts del loop, escribirias algo así:

    .articulo { width: 50%; }
    .articulo:nth-child(9n+1) { width: 100%; }

    Aquí tienes una buena explicación (en inglés) de como funciona esta seudo-clase:
    http://css-tricks.com/how-nth-child-works/

    Espero que te sirva.

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • El debate ‘Loops múltiples’ está cerrado a nuevas respuestas.