I'm using this code.
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url();">
At this time how to get the post thumbnail url in background image?
The code should be like following,
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url(<?php the_post_thumbnail_url(); ?>);">
And if you want to get post thumbnail from a specific post/page using post ID it will be like following,
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url(<?php echo get_the_post_thumbnail_url($post_id); ?>);">
Related
I am trying to figure out why my image won't add to the WordPress website I am creating. This course came with other images that will display but not the ones I add as a jpg file. I am not sure why it will add the other jpg images but not the ones I want. Here's my code:
<?php get_header(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo
get_theme_file_uri('images/traffic.jpg') ?>)"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">TBS</h1>
<h2 class="headline headline--medium">Working to make traffic safer</h2>
<h3 class="headline headline--small">Explore constructing, utlities, and other types of work we do</h3>
Service & Support
Signs
Utilities
</div>
</div>
I am not sure if I need to add more information to this.
Try this:
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo
get_theme_file_uri('images/traffic.jpg'); height:200px;width:100% ?>)"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">TBS</h1>
<h2 class="headline headline--medium">Working to make traffic safer</h2>
<h3 class="headline headline--small">Explore constructing, utlities, and other types of work we do</h3>
Service & Support
Signs
Utilities
</div>
</div>
Problem is that you are closing <div> tag without adding any content in that:
<div class="page-banner__bg-image" style="background-image: url(<?php echo
get_theme_file_uri('images/traffic.jpg') ?>);"></div>
So I have added height and width for showing the background image. Either you can add some content or specify the height and width of that div.
I figured it out. I added the image to my image folder but it wasn't refreshed in VS editor. If you add images to a folder, make sure to refresh the image folder.
I know that in wordpress it is possible to use a featured image as the background of a div using the following code
background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>');
The question is: is there a way to use a secondary image as a background for this div?
I am using the Multiple Post Thumbnails plugin and I can display the secondary image with the code bellow
<?php
if (class_exists('MultiPostThumbnails')) :
MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image', NULL, 'secondary-featured-thumbnail');
endif;
?>
But is it possible to use this image as bakground?
I wanna something like this
I think what you are looking for is to get the URL of the secondary image, not the full post thumbnail.
In the documentation there is MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');
https://github.com/voceconnect/multi-post-thumbnails/wiki/Frequently-Asked-Questions
So then on your page, you can do (Not the nicest):
<?php
if (class_exists('MultiPostThumbnails')) :
image_url = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');
?>
<style>
.myclass{
background-image: url('<?php echo image_url ?>');
}
</style>
<?php
endif;
?>
Or you can add that image_url to the html div container:
<div style="background-image: url('<?php echo image_url ?>');">
</div>
Depends on how you have it setup
On a Wordpress theme site I have this code:
<div class="gallery-img" style="background-image: url(<?php echo esc_url($image['sizes']['thumbnail']); ?>);">
However I need the background image url to be in ''.
So it works like this:
<div class="gallery-img" style="background-image: url('<?php echo esc_url($image['sizes']['thumbnail']); ?>');">
With it like that the PHP then does not work, how can I do the above so it works and so it has the '' around it?
How about inverting your single and double quotes ?
<div class="gallery-img" style='background-image: url("<?php echo esc_url($image['sizes']['thumbnail']); ?>");'>
I have a site in WordPress, and I want to display the WordPress post first image which is displayed in the post but remember not the featured images. so how to show it in the post and i want my post like below
this is how blog design should be
This is the code
<div class="col-md-3 small-post-img">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
It not taking the the_post_thumbnail code because there is no any featured image in the post, but I have added the images in the inside post content. I want that post images as featured image.
Put this in your theme's functions.php file
function ash_post_first_img($post_content){
preg_match_all('/<img[^>]+>/i', $post_content, $content_all_images);
preg_match_all('/src="([^"]+)"/i', $content_all_images[0][0], $content_image);
if (isset($content_image[1][0])) {
return $content_image[1][0];
} else{
return 'http://example.com/defaultimage.jpg';
}
}
and use this function ash_post_first_img(get_the_content('')); where you want to display image's url "single.php or post.php"
<div class="col-md-3 small-post-img">
<a href="<?php the_permalink() ?>">
<img src="<?php echo ash_post_first_img(get_the_content('')); ?>">
</a>
</div>
Change "http://example.com/defaultimage.jpg" to the default image url if no image is found.
I am trying to set an image uploaded through custom fields plugin and have it display as the background of a div (which is used in a slider).
However the image is not displaying...I have text in the custom fields and that is showing okay so I think its something to do with the line of code I am using to pull in the image.
I am trying to set the background of .slide1 with the image.
The custom field name is slide1_background.
HTML:
<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>
CSS:
.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}
Look at the difference in your code in your question, where you try to set the background-image, compared to the code in your comment in another answer where you're setting it as an image source.
the_field('slide_bg1') returns an array, so you're trying to set the background image source as a PHP array which gets converted to a string as "Array" so in your HTML it'll look like: background-image:url('Array')
You need to get the field first, then echo the url element of the returned array as the source of the background image:
$image = get_field( 'slide_bg1' );
if ( !empty( $image ) ) { ?>
<div class="slide1" style="background-image:url('<?php echo $image['url']; ?>');">
<?php }
Use echo
<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">