Get The First Image From a Post

[timo-dygryn]

Hi everyone,

I jusd read this post:

https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/

I want to reach this goal:
http://www.krisstelljes.de/blog/

From what I understand it´s the same as it is mentioned in the post on this site here: WP should “grab” the first image and use it as a preview image.

I do understand the functions.php part but I don´t understand the second part. Where do I put that code?

One more thing: What if my theme is being changed? Can that affect this code? (I´m using a child theme already but is it possible that this code isn´t working anymore someday and I have to change all my posts?) After some months this will be a lot of work…

Thanks,
Timo

[timo-dygryn]

Hi Alen,

sorry – I still don´t understand where “Where ever you need to include a thumbnail” is… Is it a php-file?!?

I want to have it on every blogpost I write…

Sorry wordpress is still a mystery to me… :-)

Greets,
Timo

[timo-dygryn]

I put the code in my index.php and put the file to my child theme folder. The result is this:

http://timo-dygryn.com/blog/

If you scroll down, the image is there, but on the bottom…

[timo-dygryn]

Sorry I didn´t understand “CodePen” so here is my code:

---

<?php get_header(); ?>
<?php
$container_class = ”;
$timeline_icon_class = ”;
$post_class = ”;
$content_css = ‘width:100%’;
$sidebar_css = ‘display:none’;
$content_class = ”;
$sidebar_exists = false;
$sidebar_left = ”;
$double_sidebars = false;

$sidebar_1 = $smof_data['blog_archive_sidebar'];
$sidebar_2 = $smof_data['blog_archive_sidebar_2'];
if( $sidebar_1 != 'None' && $sidebar_2 != 'None' ) {
    $double_sidebars = true;
}

if( $sidebar_1 != 'None' ) {
    $sidebar_exists = true;
} else {
    $sidebar_exists = false;
}

if( ! $sidebar_exists ) {
    $content_css = 'width:100%';
    $sidebar_css = 'display:none';
    $content_class= 'full-width';
    $sidebar_exists = false;
} elseif($smof_data['blog_sidebar_position'] == 'Left') {
    $content_css = 'float:right;';
    $sidebar_css = 'float:left;';
    $sidebar_left = 1;
} elseif($smof_data['blog_sidebar_position'] == 'Right') {
    $content_css = 'float:left;';
    $sidebar_css = 'float:right;';
    $sidebar_left = 2;
}

if($double_sidebars == true) {
    $content_css = 'float:left;';
    $sidebar_css = 'float:left;';
    $sidebar_2_css = 'float:left;';
} else {
    $sidebar_left = 1;
}
?>
<div>" style="&lt;?php echo $content_css; ?&gt;"&gt;
&lt;?php get_template_part( 'templates/blog', 'layout' ); ?&gt;
</div>
&lt;?php if( $sidebar_exists == true ): ?&gt;
&lt;?php wp_reset_query(); ?&gt;
<div>"&gt;
    &lt;?php
    if($sidebar_left == 1) {
        generated_dynamic_sidebar($sidebar_1);
    }
    if($sidebar_left == 2) {
        generated_dynamic_sidebar_2($sidebar_2);
    }
    ?&gt;
</div>
&lt;?php if( $double_sidebars == true ): ?&gt;
<div>"&gt;
    &lt;?php
    if($sidebar_left == 1) {
        generated_dynamic_sidebar_2($sidebar_2);
    }
    if($sidebar_left == 2) {
        generated_dynamic_sidebar($sidebar_1);
    }
    ?&gt;
</div>
&lt;?php endif; ?&gt;
&lt;?php endif; ?&gt;

<?php get_footer();

// Get the first image from a post (css-tricks.com)

if ( get_the_post_thumbnail($post_id) != ” ) {

echo ‘‘;
the_post_thumbnail();
echo ‘‘;

} else {

echo ‘‘;
echo ‘<img src=”‘;
echo catch_that_image();
echo ‘” alt=”” />’;
echo ‘‘;

}

?>

---

I just realized that I only have to paste the code to the right place, but I don´t know where…

Thanks,
Timo

[timo-dygryn]

There is s file called “blog-layout.php”

The content is this:

<?php
/**
* Render the blog layouts
*
* @author ThemeFusion
* @package Avada/Templates
* @version 1.0
*/

fusion_block_direct_access();

global $wp_query, $smof_data;

// Set the correct post container layout classes
$blog_layout = avada_get_blog_layout();
$post_class = sprintf( ‘fusion-post-%s’, $blog_layout );
if ( $blog_layout == ‘grid’ ) {
$container_class = sprintf( ‘fusion-blog-layout-%s fusion-blog-layout-%s-%s isotope ‘, $blog_layout, $blog_layout, $smof_data[‘blog_grid_columns’] );
} else {
$container_class = sprintf( ‘fusion-blog-layout-%s ‘, $blog_layout );
}

// Set class for scrolling type
if ( $smof_data[‘blog_pagination_type’] == ‘Infinite Scroll’ ||
$smof_data[‘blog_pagination_type’] == ‘load_more_button’
) {
$container_class .= ‘fusion-blog-infinite fusion-posts-container-infinite ‘;
} else {
$container_class .= ‘fusion-blog-pagination ‘;
}

if ( ! $smof_data[‘featured_images’] ) {
$container_class .= ‘fusion-blog-no-images ‘;
}

// Add the timeline icon
if ( $blog_layout == ‘timeline’ ) {
echo ‘

<i class=”fusion-icon-bubbles”></i>

‘;
}

if ( is_search() &&
$smof_data[‘search_results_per_page’]
) {
$number_of_pages = ceil( $wp_query->found_posts / $smof_data[‘search_results_per_page’] );
} else {
$number_of_pages = $wp_query->max_num_pages;
}

echo sprintf( ‘

‘, $container_class, $number_of_pages );

if( $blog_layout == ‘timeline’ ) {
// Initialize the time stamps for timeline month/year check
$post_count = 1;
$prev_post_timestamp = null;
$prev_post_month = null;
$prev_post_year = null;
$first_timeline_loop = false;

// Add the container that holds the actual timeline line
echo ‘

‘;
}

// Start the main loop
while ( have_posts() ): the_post();
// Set the time stamps for timeline month/year check
$alignment_class = ”;
if( $blog_layout == ‘timeline’ ) {
$post_timestamp = get_the_time( ‘U’ );
$post_month = date( ‘n’, $post_timestamp );
$post_year = get_the_date( ‘o’ );
$current_date = get_the_date( ‘o-n’ );

// Set the correct column class for every post
if( $post_count % 2 ) {
$alignment_class = ‘fusion-left-column’;
} else {
$alignment_class = ‘fusion-right-column’;
}

// Set the timeline month label
if ( $prev_post_month != $post_month ||
$prev_post_year != $post_year
) {

if( $post_count > 1 ) {
echo ‘

‘;
}
echo sprintf( ‘<h3 class=”fusion-timeline-date”>%s</h3>’, get_the_date( $smof_data[‘timeline_date_format’] ) );
echo ‘

‘;
}
}

// Set the has-post-thumbnail if a video is used. This is needed if no featured image is present.
$thumb_class = ”;
if ( get_post_meta( get_the_ID(), ‘pyre_video’, true ) ) {
$thumb_class = ‘ has-post-thumbnail’;
}

$post_classes = sprintf( ‘%s %s %s post fusion-clearfix’, $post_class, $alignment_class, $thumb_class );
ob_start();
post_class( $post_classes );
$post_classes = ob_get_clean();

echo sprintf( ‘

‘, get_the_ID(), $post_classes );
// Add an additional wrapper for grid layout border
if ( $blog_layout == ‘grid’ ) {
echo ‘

‘;
}

// Get featured images for all but large-alternate layout
if ( $smof_data[‘featured_images’] &&
$blog_layout == ‘large-alternate’
) {
get_template_part( ‘new-slideshow’ );
}

// Get the post date and format box for alternate layouts
if ( $blog_layout == ‘large-alternate’ ||
$blog_layout == ‘medium-alternate’
) {
echo ‘

‘;

/**
* avada_blog_post_date_adn_format hook
*
* @hooked avada_render_blog_post_date – 10 (outputs the HTML for the date box)
* @hooked avada_render_blog_post_format – 15 (outputs the HTML for the post format box)
*/
do_action( ‘avada_blog_post_date_and_format’ );

echo ‘

‘;
}

// Get featured images for all but large-alternate layout
if ( $smof_data[‘featured_images’] &&
$blog_layout != ‘large-alternate’
) {
get_template_part( ‘new-slideshow’ );
}

// post-content-wrapper only needed for grid and timeline
if ( $blog_layout == ‘grid’ ||
$blog_layout == ‘timeline’
) {
echo ‘

‘;
}

// Add the circles for timeline layout
if ( $blog_layout == ‘timeline’ ) {
echo ‘

‘;
echo ‘

‘;
}

echo ‘

‘;

// Render the post title
echo avada_render_post_title( get_the_ID() );

// Render post meta for grid and timeline layouts
if ( $blog_layout == ‘grid’ ||
$blog_layout == ‘timeline’
) {
echo avada_render_post_metadata( ‘grid_timeline’ );

if ( $smof_data[‘post_meta’] &&
( $smof_data[‘excerpt_length_blog’] > 0 || ( ! $smof_data[‘post_meta_author’] || ! $smof_data[‘post_meta_date’] || ! $smof_data[‘post_meta_cats’] || ! $smof_data[‘post_meta_tags’] || ! $smof_data[‘post_meta_comments’] || ! $smof_data[‘post_meta_read’] || $smof_data[‘excerpt_length_blog’] > 0 ) )
) {
echo ‘

‘;
}
// Render post meta for alternate layouts
} elseif( $blog_layout == ‘large-alternate’ ||
$blog_layout == ‘medium-alternate’
) {
echo avada_render_post_metadata( ‘alternate’ );
}

echo ‘

‘;

/**
* avada_blog_post_content hook
*
* @hooked avada_render_blog_post_content – 10 (outputs the post content wrapped with a container)
*/
do_action( ‘avada_blog_post_content’ );

echo ‘

‘;

echo ‘

‘; // end post-content

if( $blog_layout == ‘medium’ ||
$blog_layout == ‘medium-alternate’
) {
echo ‘

‘;
}

// Render post meta data according to layout
if ( $smof_data[‘post_meta’] ) {
echo ‘

‘;
if ( $blog_layout == ‘grid’ ||
$blog_layout == ‘timeline’
) {
// Render read more for grid/timeline layouts
echo ‘

‘;
if ( ! $smof_data[‘post_meta_read’] ) {
$link_target = ”;
if( fusion_get_page_option( ‘link_icon_target’, get_the_ID() ) == ‘yes’ ||
fusion_get_page_option( ‘post_links_target’, get_the_ID() ) == ‘yes’ ) {
$link_target = ‘ target=”_blank”‘;
}
echo sprintf( ‘%s‘, get_permalink(), $link_target, apply_filters( ‘avada_blog_read_more_link’, __( ‘Read More’, ‘Avada’ ) ) );
}
echo ‘

‘;

// Render comments for grid/timeline layouts
echo ‘

‘;
if ( ! $smof_data[‘post_meta_comments’] ) {
if( ! post_password_required( get_the_ID() ) ) {
comments_popup_link(‘<i class=”fusion-icon-bubbles”></i> ‘ . __( ‘0’, ‘Avada’ ), ‘<i class=”fusion-icon-bubbles”></i> ‘ . __( ‘1’, ‘Avada’ ), ‘<i class=”fusion-icon-bubbles”></i> ‘ . ‘%’ );
} else {
echo sprintf( ‘<i class=”fusion-icon-bubbles”></i> %s’, __( ‘Protected’, ‘Avada’ ) );
}
}
echo ‘

‘;
} else {
// Render all meta data for medium and large layouts
if ( $blog_layout == ‘large’ || $blog_layout == ‘medium’ ) {
echo avada_render_post_metadata( ‘standard’ );
}

// Render read more for medium/large and medium/large alternate layouts
echo ‘

‘;
if ( ! $smof_data[‘post_meta_read’] ) {
$link_target = ”;
if( fusion_get_page_option( ‘link_icon_target’, get_the_ID() ) == ‘yes’ ||
fusion_get_page_option( ‘post_links_target’, get_the_ID() ) == ‘yes’ ) {
$link_target = ‘ target=”_blank”‘;
}
echo sprintf( ‘%s‘, get_permalink(), $link_target, __( ‘Read More’, ‘Avada’ ) );
}
echo ‘

‘;
}
echo ‘

‘; // end meta-info
}
if ( $blog_layout == ‘grid’ ||
$blog_layout == ‘timeline’
) {
echo ‘

‘; // end post-content-wrapper
}
if ( $blog_layout == ‘grid’ ) {
echo ‘

‘; // end post-wrapper
}
echo ‘

‘; // end post

// Adjust the timestamp settings for next loop
if ( $blog_layout == ‘timeline’ ) {
$prev_post_timestamp = $post_timestamp;
$prev_post_month = $post_month;
$prev_post_year = $post_year;
$post_count++;
}
endwhile; // end have_posts()

if ( $blog_layout == ‘timeline’ &&
$post_count > 1
) {
echo ‘

‘;
}
echo ‘‘; // end posts-container

// If infinite scroll with “load more” button is used
if ( $smof_data[‘blog_pagination_type’] == ‘load_more_button’ ) {
echo sprintf( ‘

%s

‘, __( ‘Load More Posts’, ‘Avada’ ) );
}

// Get the pagination
fusion_pagination( $pages = ”, $range = 2 );

wp_reset_query();

[timo-dygryn]

Hi again,

I managed to show the picture. The only thing that bothers me is, that the image is right over the post. It would be great, if there was a space between image and post:

http://timo-dygryn.com/blog/

How can I do that?

Just to be sure:
I put the new code here – is that right?:

---

        // Set the timeline month label
        if ( $prev_post_month != $post_month || 
             $prev_post_year != $post_year 
        ) {

            if( $post_count > 1 ) {
                echo '</div>';
            }
            echo sprintf( '&lt;h3 class="fusion-timeline-date"&gt;%s&lt;/h3&gt;', get_the_date( $smof_data['timeline_date_format'] ) ); 
            echo '<div>';
        }
    }

// Get the first image from a post (css-tricks.com)

if ( get_the_post_thumbnail($post_id) != ” ) {

echo ‘‘;
the_post_thumbnail();
echo ‘‘;

} else {

echo ‘‘;
echo ‘<img src=”‘;
echo catch_that_image();
echo ‘” alt=”” />’;
echo ‘‘;

}

// End of first image from a post

    // Set the has-post-thumbnail if a video is used. This is needed if no featured image is present.
    $thumb_class = '';
    if ( get_post_meta( get_the_ID(), 'pyre_video', true ) ) {
        $thumb_class = ' has-post-thumbnail';
    }

[timo-dygryn]

Hi Alen,

thanks a lot for your help! It works just fine:
http://timo-dygryn.com/blog/

Cheers,
Timo

[Author]

Posts