0

I need the frontpage show article that has featured image.

If the article has featured image uploaded, display it.

If the article has no featured image uploaded, not display it.

I searched online, the featured image code is:

<?php if ( '' != $thumb ) { ?>
    <div class="single-post-thumbnail">
        <?php echo $thumb; ?>
    </div>
<?php }

How do I add the if condition in php below? I had tried many time to insert it but went wrong.

<?php 

include locate_template( 'composer/assets/section-colors.php' );


$ti_featured_posts = new WP_Query(
    array(
        //'post_type' => 'post',
        'meta_key' => 'featured_post_add',
        'meta_value' => '1',
        'posts_per_page' => '15',
        'no_found_rows' => true,
    )
);
?>

<section class="home-section featured-posts<?php echo $section_bg . '' . $section_text. '' . $section_links; ?>">

    <div class="wrapper">

        <?php
        /**
         * Section Main & Sub titles
        **/
        $main_title = get_sub_field( 'featured_main_title' );
        $sub_title = get_sub_field( 'featured_sub_title' );

        if( $main_title || $sub_title ) : ?>
        <header class="section-header">
            <div class="section-title<?php echo $title_with_sep; ?>">
                <h2 class="title"><?php echo $main_title; ?></h2>
            </div>
            <?php if ( $sub_title ): ?>
            <span class="sub-title"><?php echo $sub_title; ?></span>
            <?php endif; ?>
        </header>
        <?php endif; ?>

        <?php
        if ( $ti_featured_posts->have_posts() ) :

            $posts_column = 0; // Count the posts
            ?>

            <div class="grids entries">


                <?php
                while ( $ti_featured_posts->have_posts() ) : $ti_featured_posts->the_post();


                if ( $posts_column == 0 ) : // Middle column

                    $posts_image_size = 'rectangle-size-big';
                    $posts_width = '';
                    echo '<div class="grid-6 column-middle">';

                elseif ( $posts_column == 1 ) : // Right column

                    $posts_width = 'grid-6';
                    $posts_image_size = 'rectangle-size-small';
                    echo '<div class="grid-6 column-right"><div class="grids grid-layout featured-carousel">';

                endif;
                ?>

                    <article <?php post_class($posts_width); ?>>
                        <div class="post-item-inner">

                            <figure class="entry-image">
                                <a href="<?php the_permalink(); ?>">
                                    <?php 
                                    if ( has_post_thumbnail() ) {
                                        the_post_thumbnail( $posts_image_size );
                                    } elseif( first_post_image() ) { // Set the first image from the editor
                                        echo '<img src="' . first_post_image() . '" class="wp-post-image" />';
                                    } ?>
                                </a>
                            </figure>

                            <div class="entry-details">

                                <header class="entry-header">
                                    <div class="entry-meta">
                                       <span class="entry-category"><?php the_category(', '); ?></span>
                                    </div>

                                    <h2 class="entry-title">
                                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </h2>

                                    <?php if ( $posts_column == 0 ) : ?>
                                    <span class="written-by"><?php _e( 'by','themetext' ); ?></span>
                                    <span class="author">
                                        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
                                            <?php the_author_meta( 'display_name' ); ?>
                                        </a>
                                    </span>
                                    <?php endif; ?>
                                </header>

                                <?php if ( $posts_column == 0 ) : ?>
                                <div class="entry-summary">
                                    <?php the_excerpt(); ?>
                                </div>
                                <?php endif; ?>

                            </div>

                        </div>        
                    </article>

                <?php
                    if ( $posts_column == 0 ) :

                        echo '</div><!-- .middle-right -->'; // Close middle column

                    elseif ( ( $ti_featured_posts->current_post + 1 ) == ( $ti_featured_posts->post_count ) ) : // Close right column

                        echo '</div><!-- .featured-carousel --></div><!-- .column-right -->';

                    endif;

                    $posts_column++;

                endwhile;
                ?>

                <?php wp_reset_postdata(); ?>

            </div><!-- .grids -->

            <div class="carousel-navigation"></div>

            <?php else : ?>

                <p class="message">
                    <?php _e( 'There are no featured posts yet', 'themetext' ); ?>
                </p>

    <?php endif; ?>

    </div><!-- .wrapper -->
</section><!-- Featured Posts -->

Question Edited

From Michał Skrzypek suggested,

<figure class="entry-image">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail( $posts_image_size );
                                } elseif( first_post_image() ) { // Set the first image from the editor
                                    echo '<img src="' . first_post_image() . '" class="wp-post-image" />';
                                } ?>
                            </a>
</figure>

change to

<figure class="entry-image">
            <a href="<?php the_permalink(); ?>">
            <?php
                if( has_post_thumbnail() ) { ?>
                    <figure class="entry-image">
                            <a href=<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail(); ?>" title="<?php the_title(); ?>" /></a>
                 </figure>
            <?php } ?>
            </a>
</figure>

It results this

enter image description here

The article without featured image is still showing.

The title is showing. It doesn't showing before.

“title=”I accidentally broke the super-rugged Cat S60 smartphone”/>
  • Add something like if ( !has_post_thumbnail() ) continue; right before if ( $posts_column == 0 ) : // Middle column line – Samuel Elh Jul 11 '16 at 8:03
0

If i understood you correctly, you want the featured image to be displayed or not based on whether it was uploaded or not. If so, the basic code is:

<?php
if( has_post_thumbnail() ) { ?>
<a href=<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail(); ?>" title="<?php the_title(); ?>" /></a>
<?php } ?>

And that displays the image linking to the post. From the code you provided it pretty much feels you want to include the image there:

<figure class="entry-image">
                            <a href="<?php the_permalink(); ?>">
                                <?php 
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail( $posts_image_size );
                                } elseif( first_post_image() ) { // Set the first image from the editor
                                    echo '<img src="' . first_post_image() . '" class="wp-post-image" />';
                                } ?>
                            </a>
</figure>

The thing is that in this form your code displays something whether the featured image is displayed or not so you basically need to wrap all of this code in if statement and get rid of it in the middle like so:

<?php
if( has_post_thumbnail() ) { ?>
 <figure class="entry-image">
      <a href=<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail(); ?>" title="<?php the_title(); ?>" /></a>
 </figure>
<?php } ?>

Now the statement checks whether your post has a featured image attached and then tries to display it with the whole class.
Let me know how that went for you and if I got what you meant.

  • Thank for help. I had tried the script you suggest, but failed. Is my code put in wrong place. I have edited my question. Please take a look. @Michal Skrzyek – Jason Jason Jul 12 '16 at 0:35
  • Sorry for late reply. I somehow did not get an e-mail alert about your reply. So my code has a little mistake, the middle part should be <a href="<?php the_permalink();>"<img src="<?php the_post_thumbnail(); ?>" title="<?php the_title(); ?>" /></a> also, you were supposed to replace your poart of code I sepcified with mine. Please od that and let me know. – Michał Skrzypek Jul 27 '16 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.