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>';
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 am working on a project to help optimize the content of a site for search engines and all of the images and links within this plugin are not pulling the alt text and titles for the images and anchors within the portfolio.
I have looked through the waving-portfolio.php file to see where this issue might be originating and the lines that add the images and links for the modals and lightbox do not pull alt text or titles.
I am looking for a quick fix to add some lines of php to that file so that the hundreds of images and links have alt text and titles attributed to them.
Here is what that section of the file looks like currently on the site I am working on.
if($width != 0){
$image_code = '<img src="'.$image[0].'" style="width:'.$width.'px" />';
}else
{
$image_code = '<img src="'.$image[0].'" style="height:'.$height.'px" >';
}
So how do I add something to those lines of code to make it pull the alt text and title of the image from the media library?
https://wordpress.org/plugins/waving-portfolio/
$title = $alt = get_the_title();
if($width != 0){
$image_code = '<img title="'.$title.'" alt="'.$alt.'" src="'.$image[0].'" style="width:'.$width.'px" />';
}else
{
$image_code = '<img title="'.$title.'" alt="'.$alt.'" src="'.$image[0].'" style="height:'.$height.'px" >';
}
I fixed this lack of SEO problem in Waving Portfolio and submitted an update just now, all you have to do is remove and install your plugin again.
The fix added "img" meta information for all of the internal gallery as well.
For general benefits here is the code I have added to fetch the "alt" & "title" for an attachment (In our case a featured image). In Line 300 inside of "waving-portfolio.php" I added these lines of code to get the desired information:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID() ), 'single-post-thumbnail' );
// Get the featured image ID
$post_thumbnail_id = get_post_thumbnail_id(get_the_ID());
// Retrieve the title of the image
$title = get_the_title( $post_thumbnail_id );
// Retrieve the alternate text of the image
$alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
You can see the effect in the Demo page, although I haven't given any meaningful titles for the images so far, but soon I will do :)
Thanks
I had some trouble with facebook pulling the wrong images from Wordpress links added to the FB news feed. I was able to correct it with the "if" snippet of code below. I added the "else" statement to provide for a fall-back image in case the user hasn't added a featured image to the linked WP post, but it doesn't seem to be working. Obviously I'm no php coder... any help?
<?php
if ( has_post_thumbnail())
{
$fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
else {
$fb_image = wp_get_attachment_image_src ("http://MY-IMAGE-URL"), 'full');
}
?>
I also tried the code below in the else statement, but to avail
wp_get_attachment_image_src( 732, $size, $icon )
Thanks in advance
The function wp_get_attachment_image_src is used to get the URL (src) for an image attachment.
However, you cannot directly pass on an URL like you do as it works based on an attachment ID.
In your else statement, replace the line with the following in order to work with a default image :
$fb_image = "http://MY-IMAGE-URL";
Hope this helps
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.
I have a plugin in a cakephp application located at app/plugins/my_plugin in which I have a webroot folder which contains some images in the app/plugins/my_plugin/webroot/img/ folder. I'm trying to put an image as the background of a span in one of the views of my_plugin. My span is for example:
<span class="my_span"><p>Content...</p></span>
And the css I use to but the image as background is:
.my_span
{
background-image:url('<?php echo $this->Html->image('/my_plugin/img/my_image.png', array('alt' => 'My Image'))?>');
}
When I do this, I get the following error:
Resource interpreted as Image but transferred with MIME type text/html
But the weird thing is, when I just try to put the image within my span tags (without putting it as a background through CSS) like:
<span class="my_span"><p><?php echo $this->Html->image('/my_plugin/img/my_image.png', array('alt' => 'My Image'))?></p></span>
My image displays just fine and I don't have any errors.
Can anybody tell me why I can't put the image as background of my span?
NOTE: I already tried display:block; or everything else for my span
The issue is that this code:
<?php echo $this->Html->image('/my_plugin/img/my_image.png', array('alt' => 'My Image'))?>
produces this
<img src="/my_plugin/img/my_image.png" alt="My Image" />
In your case you want to use this code:
.my_span
{
background-image:url(/my_plugin/img/my_image.png);
}
Reference: here