Custom Post Query: displaying 3 post and setting the featured image as the bg

  • Resolved tarzine

    (@tarzine)


    8 years, 7 months ago

    Here is my confusion, there is so much information about WordPress that it becomes very confusing for a newbie like me.
    I not sure should I write a function or write 3 different queries to display different information.

    I’ve re-wrote this query 6 times in the last 2 weeks. I have come to the point where I need help.

    Problems
    I am unable to display 3 post and it’s featured image
    I am unable to display category name
    I am only displaying 1 post and the it’s image, but the image is not set to the background of the div.

    Current Query 

    <!-- 3 columns post -->
<?php
// the query
$args = array(
    'post_type' => array( 'post', 'report', 'opinion', bookmark' ),
    'cat' => array(4,5,8),
    'single_cat_title' => '?',
    'showposts' => 3,
    'tag_slug__in'   =>  array(’featured-content’, ‘hero’),
    'get_featured_img’ => '?'
);
query_posts( $args );

while ( have_posts() ): the_post(); // start of the loop ?>
        <section class="bit-3">
            <h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php single_cat_title(); // category name for each post ?></a></h3>

            <div class="box featured featured-post" style="background: url('<?php if( has_post_thumbnail() ) {
                    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
                    echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute( 'echo=0' ) . '" >';
                    echo get_the_post_thumbnail( $post->ID, 'full' );
                    echo '</a>';
                }
            ?>', no-repeat);">

                <div class="featured-post-details">
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                    <?php the_excerpt(); // post summary ?>
                    <a href="<?php the_permalink(); ?>" class="read-more-link">Learn more  &raquo;</a>
                </div>
            </div>
        </section>
<?php endwhile; // end of the loop. ?>
<?php wp_reset_query(); // resets the altered query back to the original ?>
<!-- END of: 3 columns post -->

    Output
    Display post: category name
    Display post: featured image as the background image, depending on the width of div
    Display post: title
    Display post: summary information for the post
    Display post: more link

    First attempt at the query that actually displayed 3 different posts. 

    <!-- 1 column -->
<div class="bit-3”>
    <?php query_posts('cat=13&showposts=3’);
        while (have_posts()) : the_post(); ?>
            <div class="box featured" style="background-image: url('<?php
                if( has_post_thumbnail() ) {
                    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
                    echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute( 'echo=0' ) . '" >';
                    echo get_the_post_thumbnail( $post->ID, 'full' );
                    echo '</a>';
                }
            ?> no-repeat;">
            </div>
            <div class="post-summary">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
                <a href="<?php the_permalink(); ?>">Learn more  &raquo;</a>
            </div>
        <?php endwhile; // end of the loop. ?>
    <?php wp_reset_query(); // resets the altered query back to the original ?>
</div>
<!-- 1 column -->

Viewing 1 replies (of 1 total)
  • Thread Starter tarzine

    (@tarzine)

    My co-worker resolved my issue.
    Below is the final.
    I hope this helps someone :o)

    <!-- 1 columns post -->
            <?php
                // the query
                $args = array(
                    'post_status' => 'publish',
                    'cat'       => 1,
                    'showposts' => 1,
                    'tag_slug__in' => 'featured-content',
                    'order'     => 'DESC',
                    'posts_per_page' => '1'
                );
                // Declare global $more (before the loop).
                global $more;

                query_posts( $args );

                while ( have_posts() ): the_post(); // start of the loop ?>
                <?php $more = 0; ?>
                        <section class="bit-1">
                            <div class="box featured featured-post" style="background: url('<?php if( has_post_thumbnail() ) {
                                    echo wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' )[0];
                                }
                            ?>') no-repeat; background-position: center;">
                                <div class="featured-post-summary">
                                    <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

                                    <?php the_content('Learn more  &raquo;'); // post summary ?>
                                </div>
                            </div>
                        </section>
                <?php endwhile; // end of the loop. ?>
            <?php wp_reset_query(); // resets the altered query back to the original ?>
            <!-- END of: 1 columns post -->
Viewing 1 replies (of 1 total)
  • The topic ‘Custom Post Query: displaying 3 post and setting the featured image as the bg’ is closed to new replies.