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
Related
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); ?>);">
I am trying to set my featured image as a background image in CSS.
I need to show the same featured image in two places in the HTML and CSS.
How do you use the_post_thumbnail() in CSS?
HTML
<div class="magnify">
<div class="large"></div>
<img class="small" <?php the_post_thumbnail( 'large', array
('class' =>'img- responsive') ); ?> />
</div>
CSS
.large {background: url('img/image.jpg') no-repeat;}
As Tim Malone stated in the comments, you will need to do this with inline styles. You can do something like this:
<?php
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
list($url, $width, $height, $is_intermediate) = $thumbnail;
?>
<div class="large" style="height:<?php echo $height; ?>px;background-image:url(<?php echo $url; ?>);background-repeat:no-repeat;"></div>
Note that I am using wp_get_attachment_image_src so that I can get the image dimensions in case I need them. In this case, it is to set the height of the div to the height of the image.
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'); ?>');">
I am using 'Aqua Resizer' (aq_resizer.php) to resize my thumbnails on my Wordpress site. My posts are made from a loop in single.php with
<?php get_template_part( 'content', 'single' ); ?>
This pulls from content-single.php which has the code for my posts
HTML
<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >
<div>
<h2><?php the_title(); ?></h2>
<h3><?php the_category(', '); ?></h3>
<?php the_content(); ?>
</div>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
</div><!-- /#post -->
Everything works fine (the resizer function works on the featured post which is brought in with <?php the_content(); ?>. The image scales up/down as the window resizes
The effect works because class="img-responsive" is applied to the featured-image of the post.
I have images in the content of the post. I want them to act the same way (right now they are just brought in at their original size) I need the class img-responsive to be applied to the images in <?php the_content(); ?>
Applying the CSS classes to images can be done from within the post itself, just edit the image and put CSS class img-responsive.
If you cannot edit/modify posts (or it is just too much work) then second option is to write a small code snippet in your theme's custom function.php file (this is true only when you display post in your loop):
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));
See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for more details.
And the third option is to use jQuery in your header.php file, this way all images on page will get responsive class (however this may not be what you want, especially if you have backgrounds, logos, menu images, etc. and it will require JavaScript to be enabled in client's browser):
<script type="text/javascript">
jQuery(function() {
jQuery(img).addClass('img-responsive');
});
</script>
The last option I can think of, is by using pure CSS:
.content img { height: auto; max-width: 100%; }
Where .content is the area that contains your post content.
Note: You may also want to override the .wp-caption class as well like so.
.wp-caption { width: auto !important; }
So I have this modified Wordpress Loop. The Wordpress Modified/Super Loop is tasked to assigned a unique HTML structure for each post.
Anyway, I successfully used it. Not until I added the codes that calls the featured image and make it a background-image (css style property).
What the error I'm encountering right now is that it pulls the same Featured image for all post. Example, for post number two to six, it display the same featured image that belongs to Post #2.
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count >= 2 && $count <= 6) : ?>
//code to pull the featured images' urls
<?php
global $post;
if (has_post_thumbnail()) { //if a thumbnail has been set
$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage1 = wp_get_attachment_image_src($imgID, 'TypeTwo-1' );//get the url of the featured image (returns an array)
$featuredImage2 = wp_get_attachment_image_src($imgID, 'TypeThree-2' );//get the url of the featured image (returns an array)
$posttypetwoURL1 = $featuredImage1[0]; //get the url of the image out of the array
$posttypetwoURL2 = $featuredImage2[0]; //get the url of the image out of the array
?>
<style type="text/css">
.pt2s-img {
border:none;
color:black;
background-image: url(<?php echo $posttypetwoURL1 ?>);
background-repeat:no-repeat;
width:484px;
height:350px;
display:inline-block;
}
#media screen and (max-width:1231px) {
.pt2s-img {
border:none;
color:black;
background-image: url(<?php echo $posttypetwoURL2 ?>);
background-repeat:no-repeat;
width:484px;
height:350px;
}
}
#media screen and (max-width:800px) {
.pt2s-img {
border:none;
color:black;
background-image: url(<?php echo $imgURL3 ?>);
background-repeat:no-repeat;
width:150px;
height:250px;
}
}
</style>
<?php
}//end if
?>
<a class="pt2s-img" href="<?php the_permalink() ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" >
</a>
//code to pull the featured images' urls
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
I suspect that this codes is messing the loop:
$imgID = get_post_thumbnail_id($post->ID); //get the id of the featured image
$featuredImage1 = wp_get_attachment_image_src($imgID, 'TypeTwo-1' );//get the url of the featured image (returns an array)
$featuredImage2 = wp_get_attachment_image_src($imgID, 'TypeThree-2' );//get the url of the featured image (returns an array)
$posttypetwoURL1 = $featuredImage1[0]; //get the url of the image out of the array
$posttypetwoURL2 = $featuredImage2[0]; //get the url of the image out of the array
But i am unsure. I think that those codes should be put somewhere so it will not mess with the loop and display the correct images.
Any advice on correctly doing it?
has_post_thumbnail() accepts post ID as its argument, use has_post_thumbnail($post->ID) instead. Because you are using modified loop, you need to implicitly pass post ID as function argument.
Though I can't be sure right now, my guess would be that by getting the id with the global $post;, you get the ID of the first post.
Since you're in the loop, you could solve this by using the following function:
get_the_ID();
(see the WordPress Function reference)
That would give you the following way of getting the image ID:
$imgID = get_post_thumbnail_id(get_the_ID()); //get the id of the featured image