I have some code that uses a posts featured image as the background of a DIV...
<?php if (has_post_thumbnail( $post->ID ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
endif; ?>
<div class="news-image" style="background-image: url(<?php echo $image[0]; ?>); background-repeat: no-repeat; background-color: #000; background-position: center center; background-size: cover;">
Pretty simple, but I need to set a default image on this background for any posts that do NOT have a featured image set.
Is that possible by modifying my above code?
For example...
If post has featured image - show it.
If post does not have featured image - show default.jpg.
Sure you can do that, I did some rought snippet, hope you can get the info from my comments :)
<?php
// first you have to define and save your default image somewhere,, save it in options table for ex.. like this:
add_option( 'my_default_pic', 'http://www.website.com/image/jpg', '', 'yes' );
// then on page or template use like this
if (has_post_thumbnail( $post->ID ) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];
} else {
$image = get_option( 'my_default_pic' );
}
?>
<div class="news-image" style="#000 no-repeat center center background: url(<?php echo $image; ?>);">
body = lorem ipsum
</div>
that's it :)
hth,
edit: inserted example image path
Related
I'm working on a child theme from twentythirteen.
Twentythirteen has support fro thumbnails:
add_theme_support( 'post-thumbnails' );
But when I use:
the_post_thumbnail_url()
I get a fatal error.
All the google answers say that add_theme_support( 'post-thumbnails' ) has to be in the parent theme functions.php, well, in this case it is there but I'm getting the fatal error anyway.
I have even duplicated the support sentence in the child functions.php (just in case) but still in trouble with this.
The code:
query_posts('category_name=curso&showposts=3');
?>
<?php if (have_posts()) : ?>
<h2>Cursos</h2>
<?php while ( have_posts() ) : the_post(); ?>
<div class = "ficha curso">
<?php
if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="ficha-thumbnail" style = "background: url('<?php the_post_thumbnail_url('large'); ?>') no-repeat; background-size: 300px auto"></div>
<?php endif; ?>
<h3 class="ficha-title"><?php the_title(); ?></h3>
<div class="ficha-resumen">
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</div>
<?php endwhile; endif;
Try this Logic if it does anything for you:
<?php
if ( has_post_thumbnail() && ! post_password_required() ) :
$imgURL = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );
?>
<div class="ficha-thumbnail" style = "background: url('<?php echo $imgURL; ?>') no-repeat; background-size: 300px auto"></div>
<?php endif; ?>
Hope this does the trick for you... ;-)
With the excellent help of Poiz I have finally found a solution. The one suggested by him works, but I needed to get the large thumbnail rather than the attachment.
This is doing the trick for me:
<?
if ( has_post_thumbnail() && ! post_password_required() ) :
$imgURL = the_post_thumbnail(get_the_ID(), 'large');
preg_match('/src="([^"]+)/i',$imgURL, $src);
?>
<div class="ficha-thumbnail" style = "background: url('<?php echo $src; ?>') no-repeat; background-size: 300px auto">
I will mark Poiz answer as the correct one as he deserves the reputation.
Have you tried removing single quotation marks around php tags in your markup? It seems like these are the source of a parsing problem.
background: url(<?php the_post_thumbnail_url('large'); ?>)
You might like this simple function to do the job.
function getImage($id, $size){
if(has_post_thumbnail()){
return wp_get_attachment_image_src(get_post_thumbnail_id($id), $size)[0];
}
return false;
}
It checks if there is a post thumbnail, if there is it looks for the post thumbnail ID, and then using the $size and wp_get_attachement_image_src's first part of the answer (the src) the response.
I was able to retrieve the post featured image url with the following:
wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
i am calling in a function to show the post featured image and post it a background image. The dimensions are set within the div yet my client updates originals that are huge and wondering if theres a way to set the size of the image to scale them down:
<?php
$catquery = new WP_Query( 'cat=23&posts_per_page=1' );
while($catquery->have_posts()) : $catquery->the_post();
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'featured' );?>
<div onclick="window.location='<?php the_permalink(); ?>'" title="<?php the_title(); ?>">
<div class="front-page-featured-post" style="background: url(<?php echo $src[0]; ?> ); background-size: cover; background-repeat:no-repeat;">
in my functions:
add_theme_support( 'post-thumbnails' );
add_image_size('featured', 370, 240, true);
Have you tried this?
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 370, 340 );
You need to regenerate the images after you implement the new thumbnail size, just use this plugin: https://wordpress.org/plugins/regenerate-thumbnails/
to regenerate all the images and it will create new images with dimensions 370x240
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; ?>
mysite.com
I would like to be able to allow the user of this twentytwelve child theme to be able to upload a featured image to a page (not post) and have that dynamically become the background image (positioned basically the way it is now-see thesite.com)
I think it would need a dynamic url (like wp_get_attachment_thumb_url ), though I'm not using a loop. (was thinking that function has to be used inside a loop.
I am using the code below as a template part. This is what is generating the content on the front page. So basically, I need to get this featured image and use it as a background image for a templage part, and not inside a loop.
<?php $page = get_page_by_title ( 'Welcome' ); ?>
<div id="welcome-intro" class="clear">
<?php if ( get_the_post_thumbnail ( $page->ID ) ) : ?>
<figure class="entry-page-image">
<?php echo get_the_post_thumbnail ( $page->ID, 'full'); ?>
</figure>
<?php endif; ?>
<article id="intro-elements">
<div class="welcome-entry-content">
<?php echo apply_filters( 'the_content', $page->post_content); ?>
</div>
</article>
</div>
/* >>>>>>>>>>>>>>MODIFED<<<<<<<<<<<<<<< */
<?php
// welcome message ?>
<?php $page = get_page_by_title ( 'Welcome' ); ?>
<?php if ( $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ) ) : ?>
<div style="background: url('<?php echo $background[0]; ?>') top right no-repeat; height:400px;" id="welcome-intro" class="clear">
<?php endif; ?>
<article id="intro-elements">
<div class="welcome-entry-content">
<?php echo apply_filters( 'the_content', $page->post_content); ?>
</div>
</article>
</div>`
You can do it in this way by using css
$background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
<style>
body{
background-image: url('<?php echo $background[0]; ?>');
}
</style>
The thing I want to do here, is adding the post-thumbnails of the blogposts as background-image into the built in Orbit slider within 320press WP-Foundation Wordpress-theme.
First thing said, is that I don't know how to code PHP. I just wanted to do this little tweak to make the design look nicer.
My code:
<?php
global $post;
$tmp_post = $post;
$args = array( 'numberposts' => 5 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
$post_thumbnail_id = get_post_thumbnail_id();
$featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'wpf-home-featured');
?>
<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo wp_get_attachment_image_src($post_thumbnail_id); ?>);">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
<p>Read More ยป</p>
</div>
<?php endforeach; ?>
That's the whole code, now onto the part I have problems with:
`<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo wp_get_attachment_image_src($post_thumbnail_id); ?>);">`
As you can see, I try to get the image source and make it the background-image.
I have no clue how to solve this problem, so, in advance, thanks for your help!
The documentation for wp_get_attachment_image_src reveals the problem. This function returns an array, containing the url, width, and height of the image. Also, the second argument it accepts is the output size of the image. Since you are using it with background-size:cover, I presume you want the image to be full resolution.
In order to output the proper background-url instead array(), change your echo in the background div to $featured_src[0]:
<div style="background-color: #F2F2F2; background-size:cover; background-image: url(<?php echo $featured_src[0]; ?>);">
To make the background-image full resolution, change the second argument on the $featured_src line to 'full':
$featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'full');
Try changing it to
background-image: url('<?php echo $featured_src; ?>')