Get image from post in wordpress - php

Question

I need to configure this script so that it fetches the first image that is in the article and shows it in a widjet.
At the moment the widjet only shows featured images, I would like it to show external images that were in the post.
For example, the first image in the article would be shown.
Code
<?php
/**
* Featured Posts widget
*/
class colormag_featured_posts_widget extends WP_Widget {
function __construct() {
$widget_ops = array(
'classname' => 'widget_featured_posts widget_featured_meta',
'description' => __( 'Display latest posts or posts of specific category.', 'colormag' ),
'customize_selective_refresh' => true,
);
$control_ops = array( 'width' => 200, 'height' => 250 );
parent::__construct( false, $name = __( 'TG: Featured Posts (Style 1)', 'colormag' ), $widget_ops );
}
function form( $instance ) {
$tg_defaults['title'] = '';
$tg_defaults['text'] = '';
$tg_defaults['number'] = 4;
$tg_defaults['type'] = 'latest';
$tg_defaults['category'] = '';
$instance = wp_parse_args( ( array ) $instance, $tg_defaults );
$title = esc_attr( $instance['title'] );
$text = esc_textarea( $instance['text'] );
$number = $instance['number'];
$type = $instance['type'];
$category = $instance['category'];
?>
<p><?php _e( 'Layout will be as below:', 'colormag' ) ?></p>
<div style="text-align: center;"><img src="<?php echo get_template_directory_uri() . '/img/style-1.jpg' ?>">
</div>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<?php _e( 'Description', 'colormag' ); ?>
<textarea class="widefat" rows="5" cols="20" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>"><?php echo $text; ?></textarea>
<p>
<label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to display:', 'colormag' ); ?></label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" />
</p>
<p>
<input type="radio" <?php checked( $type, 'latest' ) ?> id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" value="latest" /><?php _e( 'Show latest Posts', 'colormag' ); ?>
<br />
<input type="radio" <?php checked( $type, 'category' ) ?> id="<?php echo $this->get_field_id( 'type' ); ?>" name="<?php echo $this->get_field_name( 'type' ); ?>" value="category" /><?php _e( 'Show posts from a category', 'colormag' ); ?>
<br /></p>
<p>
<label for="<?php echo $this->get_field_id( 'category' ); ?>"><?php _e( 'Select category', 'colormag' ); ?>
:</label>
<?php wp_dropdown_categories( array(
'show_option_none' => ' ',
'name' => $this->get_field_name( 'category' ),
'selected' => $category,
) ); ?>
</p>
<?php
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
if ( current_user_can( 'unfiltered_html' ) ) {
$instance['text'] = $new_instance['text'];
} else {
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes( $new_instance['text'] ) ) );
}
$instance['number'] = absint( $new_instance['number'] );
$instance['type'] = $new_instance['type'];
$instance['category'] = $new_instance['category'];
return $instance;
}
function widget( $args, $instance ) {
extract( $args );
extract( $instance );
global $post;
$title = isset( $instance['title'] ) ? $instance['title'] : '';
$text = isset( $instance['text'] ) ? $instance['text'] : '';
$number = empty( $instance['number'] ) ? 4 : $instance['number'];
$type = isset( $instance['type'] ) ? $instance['type'] : 'latest';
$category = isset( $instance['category'] ) ? $instance['category'] : '';
$post_status = 'publish';
if ( get_option( 'fresh_site' ) == 1 ) {
$post_status = array( 'auto-draft', 'publish' );
}
$args = array(
'posts_per_page' => $number,
'post_type' => 'post',
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'post_status' => $post_status,
);
// Display from category chosen.
if ( $type == 'category' ) {
$args['category__in'] = $category;
}
$get_featured_posts = new WP_Query( $args );
echo $before_widget;
?>
<?php
if ( $type != 'latest' ) {
$border_color = 'style="border-bottom-color:' . colormag_category_color( $category ) . ';"';
$title_color = 'style="background-color:' . colormag_category_color( $category ) . ';"';
} else {
$border_color = '';
$title_color = '';
}
if ( ! empty( $title ) ) {
echo '<h3 class="widget-title" ' . $border_color . '><span ' . $title_color . '>' . esc_html( $title ) . '</span></h3>';
}
if ( ! empty( $text ) ) {
?> <p> <?php echo esc_textarea( $text ); ?> </p> <?php } ?>
<?php
$i = 1;
while ( $get_featured_posts->have_posts() ):$get_featured_posts->the_post();
?>
<?php if ( $i == 1 ) {
$featured = 'colormag-featured-post-medium';
} else {
$featured = 'colormag-featured-post-small';
} ?>
<?php if ( $i == 1 ) {
echo '<div class="first-post">';
} elseif ( $i == 2 ) {
echo '<div class="following-post">';
} ?>
<div class="single-article clearfix">
<?php
if ( has_post_thumbnail() ) {
$image = '';
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$image_alt_text = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
$title_attribute = get_the_title( $post->ID );
if ( empty( $image_alt_text ) ) {
$image_alt_text = $title_attribute;
}
$image .= '<figure>';
$image .= '<a href="' . get_permalink() . '" title="' . the_title( '', '', false ) . '">';
$image .= get_the_post_thumbnail( $post->ID, $featured, array(
'title' => esc_attr( $title_attribute ),
'alt' => esc_attr( $image_alt_text ),
) ) . '</a>';
$image .= '</figure>';
echo $image;
}
?>
<div class="article-content">
<?php colormag_colored_category(); ?>
<h3 class="entry-title">
<?php the_title(); ?>
</h3>
<div class="below-entry-meta">
<?php
$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
printf( __( '<span class="posted-on"><i class="fa fa-calendar-o"></i> %3$s</span>', 'colormag' ), esc_url( get_permalink() ), esc_attr( get_the_time() ), $time_string
);
?>
<span class="byline"><span class="author vcard"><i class="fa fa-user"></i><a class="url fn n" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" title="<?php echo get_the_author(); ?>"><?php echo esc_html( get_the_author() ); ?></a></span></span>
<?php if ( ! post_password_required() && comments_open() ) { ?>
<span class="comments"><i class="fa fa-comment"></i><?php comments_popup_link( '0', '1', '%' ); ?></span>
<?php } ?>
</div>
<?php if ( $i == 1 ) { ?>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
<?php } ?>
</div>
</div>
<?php if ( $i == 1 ) {
echo '</div>';
} ?>
<?php
$i ++;
endwhile;
if ( $i > 2 ) {
echo '</div>';
}
// Reset Post Data
wp_reset_query();
?>
<!-- </div> -->
<?php
echo $after_widget;
}
}
This is the complete code of the widget

Answer 1

Try this code
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">
</div>
<?php endif; ?>