Wordpress featured image as div background image - php

How can I set the featured images on all my posts to be outputted as a background image to a div. For example
<div class="postimg" style="background-image:url('https://s3.amazonaws.com/ooomf-com-files/8jLdwLg6TLKIQfJcZgDb_Freedom_5.jpg')"></div>
Currently the featured image is being outputted as a regular image using this helper <?php the_post_thumbnail( 'wpbs-featured' ); ?>

I would suggest simply something along the lines of this
Get post featured image URL and echo it out accordingly:
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postimg" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
</div>

Use this
<div style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?>')"></div>

Try this...
<?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; ?>

Related

How to make img src URL as Featured Image

I am trying to make a "Featured Image" from an img src URL with this theme: https://themezee.com/themes/donovan/
<img src="https://i.imgur.com/UJs4AKj.jpg" />
Please Use below code post Get post featured Image.
<?php
$imageId = get_post_thumbnail_id( $post_id);
$imageURL = wp_get_attachment_image_src( $imageId ), 'full' );
echo '<img src="'.$imageURL.'" />';
I guess this will resolve your problem.
<?php if (has_post_thumbnail( get_the_ID() ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
?>
<img src="<?php echo $image[0]; ?>"/>
<?php endif; ?>

How can I get featured image url for woocommerce Shop page?

This is the code by which I am trying to get featured image url to set as BG. It's working fine for page.php. But in Woocommerce Shop (post-type-archive-product) page it is showing one of product featured image instead of page featured image.
Any solution??
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<header style="background-image: url('<?php echo $thumb['0']; ?>')" class="inner-page-header">
<div class="wrap">
<div class="page_header">
<?php the_title(); ?>
</div>
</div>
</header>
You can use wc_get_page_id() to get the page ID and use that to get the image source. This should work.
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( wc_get_page_id( 'shop' ) ), 'full' );?>
<header style="background-image: url('<?php echo $thumb['0']; ?>')" class="inner-page-header">
<div class="wrap">
<div class="page_header">
<?php the_title(); ?>
</div>
</div>
</header>
Here is the documentation

Generate Background for Each Post With Wordpress Thumbnail

I have a website that i'm working on where I need to generate a unique image in header.php for each individual post.
I have this in my index.php:
$pageposts = $wpdb->get_results($querystr, OBJECT);
foreach($pageposts as $ppost){
$ID = $ppost->post_id;
$title = get_the_title( $ID );
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $ID ), 'single_post_thumbnail' );
$t = $thumb[0];
$desc = get_post($ID)->post_content;
$out = get_post_meta($ID,'outbound',true);
$output = "
<div class='ph-sticky' id='phf'>
<span class='icon-x'><i class='fa fa-times icon-xy'></i></span>
<div class='row hunt-row-fp'>
<a class='title' href='$out' target='_blank' rel='nofollow'>$title</a>
<div class='img-featured'><img class='phsi' src='$t'/></div>
<span class='description'>$desc</span>
</div>
</div>";
}
echo $output;
wp_reset_query();
?>
This correctly generates a thumbnail for each post, however in my header.php my code only generates the image of the FIRST post on the page. Here it is:
<!-- post modal -->
<div class="show-post-modal">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); ?>
<div class="comments-bg-image" style="background-image: url('<?php echo $image[0]; ?>')" >
</div>
<?php endif; ?>
<div class="comments-header">
I've tried multiple solutions however I can only seem to pull in the first thumbnail, which becomes the background for all posts. Any help would be most appreciated!
i think this will help you a lot.
<?php
$page = get_post($post->ID);
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
if(!empty($post_thumbnail_id)) {
$img_ar = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );?>
<style>
.comments-bg-image{ background-image: url(<?php echo $img_ar[0];?>); }
</style>
<?php } ?>

Link in thumbnail images in WordPress

How to assign links to thumbnail images. I have portfolio with thumbnail images of different websites and i have to add link to them.
<div class="showcase-image">
<?php
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
if(has_post_thumbnail()): echo '<img src="'.$thumbnail[0].'"/>'; else: ?>
<?php endif; ?>
</div>
Try this
<div class="showcase-image">
<?php
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
if(has_post_thumbnail()): echo '<a href="'.$thumbnail[0].'" > <img src="'.$thumbnail[0].'"/></a>'; else: ?>
<?php endif; ?>
</div>

How to get the WordPress post thumbnail (featured image) URL?

I am using this function to get the featured images:
<a href="#" rel="prettyPhoto">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
Now I want to get the full featured image on click on the anchor tag for which I need a featured image URL in
<a href="here" rel="prettyPhoto">
How can I fix this?
Check the code below and let me know if it works for you.
<?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; ?>
If you want JUST the source, and not an array with other information:
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>
<img src="<?php echo $url ?>" />
// Try it inside loop.
<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo $feat_image;
?>
Easy way!
<?php
wp_get_attachment_url(get_post_thumbnail_id(get_the_ID()))
?>
This perfectly worked for me:
<?php echo get_the_post_thumbnail_url($post_id, 'thumbnail'); ?>
I think this is the easiest solution and the updated one:
<?php the_post_thumbnail('single-post-thumbnail'); ?>
This is the simplest answer:
<?php
$img = get_the_post_thumbnail_url($postID, 'post-thumbnail');
?>
You can try this:
<?php
$feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
echo $feat_image;
?>
Try this one
<?php
echo get_the_post_thumbnail($post_id, 'thumbnail', array('class' => 'alignleft'));
?>
I had searched a lot and found nothing, until I got this:
<?php echo get_the_post_thumbnail_url( null, 'full' ); ?>
Which simply give you the full image URL without the entire <img> tag.
Hope that can help you.
You can try this.
<?php
$image_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
?>
<a href="<?php echo $image_url; ?>" rel="prettyPhoto">
You can also get it from post_meta like this:
echo get_post_meta($post->ID, 'featured_image', true);
You can also get the URL for image attachments as follows. It works fine.
if (has_post_thumbnail()) {
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
}
You will try this
<?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'full'); ?> // Here you can manage your image size like medium, thumbnail, or custom size
<img src="<?php echo $url ?>"
/>
<?php
if (has_post_thumbnail( $post->ID ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
If the post is an image and we already know what the image is, it's possible to get the thumbnail URL without too much hassle:
echo pathinfo($image->guid, PATHINFO_DIRNAME);
Simply inside the loop write <?php the_post_thumbnail_url(); ?> as shown below:-
$args=array('post_type' => 'your_custom_post_type_slug','order' => 'DESC','posts_per_page'=> -1) ;
$the_qyery= new WP_Query($args);
if ($the_qyery->have_posts()) :
while ( $the_qyery->have_posts() ) : $the_qyery->the_post();?>
<div class="col col_4_of_12">
<div class="article_standard_view">
<article class="item">
<div class="item_header">
<img src="<?php the_post_thumbnail_url(); ?>" alt="Post">
</div>
</article>
</div>
</div>
<?php endwhile; endif; ?>
if you want to fetch full image size from post thumbnail you can use this code.
$img_url = wp_get_attachment_image_url(get_post_thumbnail_id(get_the_ID()), 'full');
<img src="<?PHP echo $img_url?> ">
here, get_the_ID() is post id.
Use:
<?php
$image_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail_size');
$feature_image_url = $image_src[0];
?>
You can change the thumbnail_size value as per your required size.
You can also get the URL for image attachments as follows:
<?php
"<div>".wp_get_attachment_url(304, array(50,50), 1)."</div>";
?>
You can get image src for specific size by wp_get_attachment_url function.
<?php
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' );
?>
<img src="<?php echo $url ?>" />
<img src="<?php echo get_post_meta($post->ID, "mabp_thumbnail_url", true); ?>" alt="<?php the_title(); ?>" width ="100%" height ="" />

Categories