I'm working on a WordPress site where I use the WordPress Events Manager plugin to display events. When the client creates a new event I use the WordPress featured image option as the main image (the_post_thumbnail();). The problem I got is that the images that the client uses are quite large and sometimes they are too big, so I added a max-height to the feature image, but now the images can get a bit distorted when I "cut" them of in the middle. So I thought "Let's make them to a background-image" But I am struggling to do so in PHP. This is what I've got:
<div class="event_img" style="background-image:url('<?php the_post_thumbnail(); ?>');">
</div>
But this doesn't do anything on the custom page template that I use to display a single event.
Since WordPress 4.4, there's an efficient core function that can handle this in a cleaner way than the answers here.
You can use the_post_thumbnail_url( $size ) which will print the URL of the post thumbnail.
Alternatively if you want to return the URL instead of immediately output it, you can use $url = get_the_post_thumbnail_url( $size );
please see this link https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/
Perhaps it will help you.
So I got it working like this:
I had done it without echo
<div style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>'); width: 100%; height: 100%; background-position: center;">
</div>
Related
I have my new site at virmodrosti.com which has code to grab first image from latest post and use it for big image on the main site.
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image() ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
the command is <?php echo catch_that_image() ?>
How can I use optinal image instead of first image if available?
Currently my images order are /location/image240.jpg, image241.jpg, image242.jpg etc. So I would like to add optional image that can be used if available,
for example, if I upload aditional images like image240wide.jpg, image241wide.jpg, image242wide.jpg to image location. how can I make that it will display the wide image and then normal if wide is not available?
I will just make big custom format myself and upload them to location of images.
Kindly let me know. Thank you.
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('slide1_background');?>);">
<div class="slide1-cont"><p class="slide-text"><h1>
<?php the_field('slide_title'); ?></h1><img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content'); ?></p></div>
</div>
CSS:
.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}
Not sure if this is the real problem, but I think you're missing some quotes, it should all look like this:
<div class="slide1" style="background-image: url('<?php the_field('slide1_background'); ?>');">
Go by all your codes to see if anything else like quotes is missing and please let me know if it worked or not.
I'm creating a mobile-first website that makes use of full-width background images which are uploaded to the page as featured images.
The problem I'm having is that the background images are styled inline because PHP is needed to get the actual background image. Now because they're being fetched inline, the images are going to be downloaded no matter what platform you're on. I only want the images to be available/downloaded if you're on a desktop/tablet device. NEVER on a mobile device. So I need a way that will stop the images from being downloaded if you're on a mobile device - has anyone any experience of achieving this before?
The code I currently have:
<?php $background_image = wp_get_attachment_image_src(get_post_thumbnail_id($page -> ID), 'full'); ?>
<div class="page-background-image" style="background-image: url(background_image);"></div>
You can use a library such as Mobile-Detect, which has WordPress support. Or you can use media queries in CSS:
#media (max-width: 600px) {
.page-background-image {
display: none;
}
}
Preemptive thanks for helping!
I am a beginner programmer, and I am trying to place one photo link over another in wordpress.
Here is the link
You can see in the link above that I want to place the bottom image over the top image, and keep them both responsive, yet I am having trouble with the css properties to achieve this..?
Any ideas?
Thank you so much,
-C
Wrap both images in a div and set position to relative.
<div style="position:relative;">
<img src="#" style="left:0px; top:0px;"/>
<img src="#" style="left:0px; top:0px;"/>
</div>
Update 1
Sorry, first answer wasn't working. I figured out the images are vertical perfectly aligned. The header image is aligned to the top of the window.
The only this you need to do is:
.second-image-home
{
position:absolute;
top:0px;
}
This worked for me.
If you remove
height:auto;
the image will be correctly sized.
Update 2
If I added this to the css:
.second-image-home
{
height: 193px;
width: 309px;
//rest of the code
}
This happened:
One css I would get friendly with is
.yourclass {
z-index: 1;
position: absolute;
}
z-index will allow you to put one image over another image, as long as you have a position you will be able to stack as many in one spot as you would like. Use top, left, right ,bottom to position where you want them.
Hope this helps!
For some reason, on this page, the images are not positioned neatly inside the rectangles; instead they are shifted slightly to the right in IE, Chrome, and Firefox.
<img height="350" width="150" class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>" />
I set the image to have a height of 350 and width to be 150 for uniformity.
The "rectangle" itself is
<div class="item_image">
<!--IMG HERE--></div>
I am using the WP e-Commerce Grid View Lite plugin with WP e-Commerce (another Wordpress plugin).
The problem is in the index file (http://yadress.com/make-it-yourself/) on the line 116. On the anchor selector.
.product_grid_display .item_image a {
width: 350px
}
Removing the width property from that anchor solves the issue.
You have 3 options
Distortion the image to fit the frame (div), so bad
.product_grid_display .item_image a {
width: 350px;
height :150px;
}
Create a fixed-size frames , and overfollow attributes : hidden
.item_image{width:px;height:150px;overfollow:hidden;}.item_image img{widht:100%}
use timthumb to crop a picture fit the frame.(recommend, this is the best way, also good for page speed)
This website uses timthumb, you can refer to this site