I am trying to display some images in my wordpress site. I am trying to make the background div and image via style=""
So when I do this:
<?php
if(has_post_thumbnail($property->ID)){
$image_url = get_the_post_thumbnail($property->ID,array(300,220),array('class' => "post_thumbnail"));
}else{
$image = $image_url = '';
}
?>
<div class="property_photo" style="background-image:url('<?php echo $image_url;?>') no-repeat;">
</div>
The photo is not displaying anymore and it's printing ') no-repeat;"> where the image should display. When I use a variable without an "_" in the name, it doesn't print anything. So to avoid that I tried $image = $image_url = ''; to get around that.
Is this is a simple syntax problem or is there something in the php that is causes this? It doesn't seem like syntax because when I use other variable it does not do this.
Your get_the_post_thumbnail() function is returning HTML, not a URL. You need to either change the function to only return a URL (or use a different function which does that), or change your HTML to put the image inside the div instead of setting it as a background image.
Related
I am trying to run a function which is using a featured image as my header image on my webpage I want to include the options to also allow my end user to select between using the featured image or to select a slider instead if they wish to use that page depending here is the code I have for the featured image development.
add_action('neve_before_primary', 'getPageFeaturedImage', 5);
function getPageFeaturedImage() {
// These two variables will only be used if set
$pageTitle = get_field('page-title');
$pageSecondTitle = get_field('page_second_title');
if (has_post_thumbnail($post -> ID) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post -> ID ), 'single-post-thumbnail');
<div class="featured-image-container">
<img src="<?php echo $image[0]; ?>" class="featured-image">
</div>
</div>
This code when run is making the feadured image the main image on the page with a title container on top of it with some css which doesnt matter for this question below you will find the code I have for the slider.
function smartsliderheader() {
echo '<div class="smart-slider-header">';
$slider = get_field("smart_slider_header");
echo do_shortcode($slider);
}
This on its own does what I need it to do the featured image code works and so does the slider but getting them both to run toghether and have only one of them run if the other has no options used is where I could used some help.
Any help with this will be much apprechiated. I look forward to your questions if I have missed something out.
I would simply do this using an if statement checking if the $pageTitle and the $pageSecondTitle are empty
if(empty($pageTitle) && empty($pageSecondTitle)) {
// do stuff for when settings aren't filled in
}
else {
// do stuff for when settings are filled in.
}
I don't know if this answers your question. Let me know if this goes into the direction you want to go so I can build on it further.
I was actually able to solve this by myself by doing the following code we are using 2 variables one is for a featured image and the other is go a slider please look below for the code and an explanation.
if(!$checkFeaturedImage and !$slider) {
return null ;
}
This is checking to see if either of these variable's have a value assigned to them e.g. if a featured image is selected a value will be assigned to it and vice versa for a slider what this is doing if neither of these have a value it will stop the rest of the function running and save render time on the site.
if ($slider) {
echo '<div class="header-featured-image">' ;
echo do_shortcode($slider);
echo '</div>' ;
}
What this is doing is it is making a call to an advanced custom field set up to allow a slider to be selected and if a value is returned that value is then being directly echoed out onto the page.
else {
if (has_post_thumbnail($post -> ID) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post -> ID ), 'single-post-thumbnail'); }
?>
<div class="header-featured-image">
<div class="featured-image-container">
<img src="<?php echo $image[0]; ?>" class="featured-image">
</div>
</div>
}
<?php
}
What this is doing is this is displaying our featured image onto our page if a value is returned by our page editor.
The way this code has been set up is if a featured image and a slider have both been selected it will default back to a slider as that is the first call and due to the null statement at the beginning if nothing is selected nothing will run saving some rendering time.
I have a grid of thumbnails that when clicked on I want to load an overlay on the page showing the full size image and the contents of a text file as a caption.
Something like
<image src="thumbs/1001.jpg"> would just load the image, but I want to load the image in a light box sort of view and also load the contents to "desc/1001.txt" into a caption (not necessarily a <caption>) below the image.
I don't want it to reload the page if that can be avoided. If it helps, the images, thumbnails, and description all match the pattern above, or I also have a CSV file in the format of 1000,"Description of the picture" if that is simpler.
If you use something like https://lokeshdhakar.com/projects/lightbox2/#getting-started this should be fairly easy.
Your PHP code would look something like this:
<?php
$photos = [1000,1001];
foreach ($photos as $photo) {
$description = file_get_contents('desc/' . $photo . '.jpg');
echo '' . $photo . '';
}
?>
In a section of code I'm attempting to show a menu title and the associated featured image.
The featured image is going to be the background of a <div> element, like this:
echo '<div style="width:100%;background-image:url("'.$thumbnail[0].'")"><h1>'. $menu->title .'</h1></div></a>';
I've tried two different method of getting the URL:
$image = get_the_post_thumbnail_url($menu->object_id, 'full');
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $menu->object_id ), 'full' );
Whenever any of these urls are rendered into the browser the url is completely garbled from this:
"http://localhost:8085/wp-content/uploads/D_DSC0130.png"
Into this:
url(" http:="" localhost:8085="" wp-content="" uploads="" d_dsc0130.png")"="">
I've not seen any posts or discussion talking about anything similar. The site is hosted in IIS and running on PHP 7.1.7.
I have already attempted to escape the returned value with this:
echo '<div style="width:100%;background-image:url("'.esc_url($thumbnail[0]).'")"><h1>'. $menu->title .'</h1></div></a>';
if I echo this, the URL is fine and the image is displayed on the page:
echo '<img src="'.esc_url($image).'" />';
How can I correct the rendered values in the div version?
If the url is being returned ok then you probably need to escape it to output properly
echo '<div style="width:100%;background-image:url("'.esc_url($thumbnail[0]).'")"><h1>'. $menu->title .'</h1></div></a>';
I need to get all the source values from all image inside a container. I'm having some difficulty with this.
Allow me to explain the process.
All the data comes from a database. Inside the backofficce the user enter all the text and the image inside a textarea. To separate the text with the image the user must enter a pagebreak.
Let's go to the code
while ($rowClients = mysql_fetch_array($rsClients)) {
$result = $rowClients['content'];
$resultExplode = explode('<!-- pagebreak -->', $result);
// with resultExplode[0] I get the code and with resultExplde[1] I get the image
// Now with I want to get only the src value from resultExplode[1]
I already tried with strip_tags
$imageSrc = strip_tags($resultadoExplode[1]);
but it doesn't print anything.
I found this post but without success. I stopped in the first print_r.
Can anyone help me??
Thanks
try foreach, if you can't print it out.. (if that's the problem)
foreach($resultExplode as $key => $value){
echo "[".$key."]".$value;
}
I found a solution:
continuing with the previous code I worked with the split function.
So I start to strip the tags. This way I get the img isolated from the rest.
$image = strip_tags($resultExplode[1],"<img>");
Because all the img has the same structure like this: <img width="111" height="28" alt="alternative text" src="/path/to/the/file.png" title="title of the image">
I split this string, using " as a delimiter
$imgSplit = split('"', $image);
$src = $imgSplit[3];
Voilá. It's working
What do you say about this procedeure??
I have a slideshow set up with Magic fields like the code below, but
now I need each image to have a seperate link. How can I set this up?
I just can't think how I can add this to the code below, I appreciate
any help anyone can offer me.
<div id="slider">
<?php
$images = getFieldOrder('slideshow_slide');
if(is_array($images)){
foreach($images as $image){
echo get_image('slideshow_slide',1,$image);
}
}
?>
</div>
Hooray MagicFields! <3
There are two ways to get an image in MagicFields.
Method 1 will return a full image tag:
echo get_image('slideshow_slide');
Method 2 just returns the url of the image:
echo get_image('slideshow_slide',1,1,0);
In order to generate a link to your full-size image, you'll need to construct an anchor tag using the second method. Maybe something like this:
$image_path = get_image('slideshow_slide',1,1,0);
echo 'Insert link text or thumbnail here';
You might need to modify the above to work with your foreach loop, but that's the basic idea.
Update:
Here's what you need to do. Create another duplicateable text field, called image_url. This field will hold the link for your image. Each image will need a corresponding url. This loop should do what you want:
if(is_array($images)){
foreach($images as $image){
$image_url = get('image_url',1,$image);
echo "<a href='" . $image_url ."'>" . get_image('slideshow_slide',1,$image) . "</a>";
}
}