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.
Related
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
I'm using wordpress and ACF plugins to add an image :
http://www.advancedcustomfields.com/resources/image/
I would like to add an image in a div as a background.
I used this code in my style.css but it doesn't work :
background-image: url(<?php $image = get_field('image_projet');?> <img
src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />);
Thanks for you help
A css file contains CSS. Just CSS. You can't write html or PHP into a CSS file.
If you want to generate a CSS property with PHP, you must use the <style>...</style> tags directly in your PHP file (the view). For instance :
<?php $image = get_field('image_projet'); // fetch the ACF field ?>
<html>
<head>
<title>Page's Title</title>
<style>
.your-div {
background-image: url('<?php echo $image; ?>');
}
</style>
</head>
<body>
<!-- this div uses the $image URL as a background. -->
<div class="your-div">
Lorem Ipsum.
</div>
</body>
</html>
do it this way , you can't add alt via css so use title instead, look here, SO css background image alt attribute
`<div style="background-image: url( <?php echo $image['url']; ?>); height: 200px; width: 400px; border: 1px solid black;" title= "<?php echo $image['alt']; ?>">my DIV with a background image:</div>
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; }
In my page I show posts from feeds. A post-preview has an image and the content. The width of the image is fixed at 150px but I want the image to have height equal to content's height. A post-preview content may have less than 450 chars, that means that the height of it will be smaller that other posts.
Is this possible using jQuery?
This is my code:
<div id="post">
<div id="image">
<?php
$imgpath="timthumb.php?src=THE-IMAGE.PNG&h=91&w=150"; } ?>
<img border="0" src="<?php echo $imgpath; ?>"></img>
</div>
<div id="thepost2">
<?php echo mb_substr(strip_tags($entry->description), 0, 450, "UTF-8"); ?>
</div>
</div>
HTML
<div id="uniqueid" class="autoheight">
<img />
</div>
$('.autoheight img').css({height: $('#thepost2').height(), width:'150 px'});
If you will not specify the width it will set the width equal to height as well. So you will be specifying width appropriately as your needs. It may change the aspect ratio of the image and it might not look good.