I've got an ACF 'options page' with a placeholder image within, to fall back to if a client removes the image from the post/page by mistake. And I'm using the following code to handle this situation happening.
<?php
// Variables
$banner_image = get_field('banner_image');
$fallback_banner_image = get_field('fallback_image', 'options');
?>
<?php if ( $banner_image ): { ?>
<img class="hero-content" src="<?php echo esc_url( $banner_image_src[0] ); ?>" srcset="<?php echo esc_attr( $banner_image_srcset ); ?>" sizes="100vw" alt="<?php echo $banner_image_alt_text ?>">
<?php } elseif ( empty( $banner_image ) ): { ?>
<img class="hero-content" src="<?php echo esc_url( $fallback_banner_image_src[0] ); ?>" srcset="<?php echo esc_attr( $fallback_banner_image_srcset ); ?>" sizes="100vw" alt="<?php echo $fallback_banner_image_alt_text ?>">
<?php } endif; ?>
This works fine once pages or posts are saved.
However
The issue I have is if the page/post has been previously saved with an image and then a user deletes the image from the Media Library directly, the field doesnt become 'empty' so the content just disappears, rather than falling back to the placeholder image that I would like it to.
Any advice on how to handle images directly removed from the Media Library?
Thanks.
You can use attachment_url_to_postid. Using this function you can get post id from image url. if post id is not exists , user deleted the attachment before. so based on the result of this function you can actually test of attachment is deleted or not and use placeholder instead.
I've solved this issue using onerror for anyone with similar concerns.
I placed a folder, with a simple light grey placeholder image in it, in the root of my theme directory, so it can never be deleted by a user.
Then added the following to the end of my image tag. Seems to work perfectly when ever the media library images are removed by mistake.
<img src="<?php echo esc_url( $image_src[0] ); ?>" srcset="<?php echo esc_attr( $image_srcset ); ?>" sizes="(min-width: 1050px) 25vw, (min-width: 750px) 33.333vw, (min-width: 500px) 50vw, 100vw" alt="<?php echo $image_alt_text ?>" onerror="this.onerror=null;this.src='https://www.domain-name.co.uk/fallback-folder/missing-placeholder-img.jpg';">
Related
I am pretty new at this and tried to search a lot about this, breaking my site down numerous times because of wrong PHP code, so here is the deal.
I have a Wordpress page with portfolio posts. In those posts the only image displayed is the featured image. Due to that my prettyPhoto plugin won't show the lightbox when I click on that featured photo.
First I had this code ...
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
... which showed the featured image but didn't show the lightbox so it was not clickable. Then I played around and created this:
<?php if ( has_post_thumbnail()) : ?>
<a class="lightbox_single_portfolio" title="<?php echo esc_attr($title); ?>"
href="<?php echo esc_url($image_src); ?>" data-
rel="prettyPhoto[single_pretty_photo]">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
So the featured image got clickable, the lightbox started opening but there is an error that states "Image cannot be loaded. Make sure the path is correct and image exists". Due to that I said to myself that the problem could be that lightbox isn't loading the right image source.
I tried playing a bit more and tried to do this ...
<?php
if ( has_post_thumbnail()) {
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
echo '<a class="lightbox_single_portfolio" href="'.esc_url($image_src).'" data-rel="prettyPhoto[single_pretty_photo]">';
the_post_thumbnail('thumbnail');
echo '</a>';
endif;?>
... aaaand it breaks my site.
What could be the problem?
You are not closing the If statement,
change endif; to }
Well, I'm gonna post an answer as I found out something on the internet and it made my code work. Although the above answer (change endif; to }) did make my code work, it still showed the same error that the path couldn't be found.
I played around again a little bit, and this did the trick:
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo '<a rel="prettyPhoto" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
So the PHP calls a $large_image_url instead of the post thumbnail url.
This did the trick, and it works! It shows my featured image in a lightbox :)
Using WordPress on the default twentysixteen theme. This is a code issue not a theme issue which is why I'm posting it on SO. I have a feeling I'm just doing something simple wrong but I've searched and figured out what code I need to change but it seems like it's not making the changes as expected.
So what I'd like to do is change the LOGO that is currently going to the website "home". I'm talking about the front end logo at the top left that i'd like to go to one of my other sites which has more relevant information.
But when I change this code:
<div class="header-image">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
To:
<div class="header-image">
<a href="http://external-website-here.com">
<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
It doesn't seem to be affecting where I'm redirected when clicking on the logo image. In other words it still goes to the home_url it seems instead of the external site.
Any suggestions are much appreciated.
Additional Information: No caching is enabled, tried other browser/devices to make sure it's not a cache issue.
Update: Even remove the entire code from my first code box it doesn't change anything on the front end. Maybe I'm modifying the wrong file? How do I figure out what file the logo code is living in?
You're looking at the wrong code.
You need to edit line 35 and 37 of the header.php, which I can see here: https://github.com/WordPress/twentysixteen/blob/master/header.php
This is because you don't have a logo, as far as I can tell anyway.
Update:
I've updated your site to work.
What I did was add function to filter the home url;
//functions.php (end of file)
/**
* Changes the url returned from home_url();
*/
function change_home_link($url, $path, $orig_scheme, $blog_id){
return 'http://google.com';
}
Then add and remove the filter in the header
//header.php line 32
add_filter( 'home_url', 'change_home_link' );
twentysixteen_the_custom_logo();
remove_filter( 'home_url', 'change_home_link' );
You could also just remove the twentysixteen_the_custom_logo() function and replace it with what ever you want.
So what i'm trying to do it pull the image alt info from the media library in Wordpress. The site needs to be heavily 508 so i'm pulling it in for every image. Trying to get this working initially and am having some issues. In this instance i'm getting the image from my "options" page that I set up with ACF. Here is the code i'm using.
<?php $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true); ?>
<img src="<?php the_field('footer_logo', 'option'); ?>" alt="<?php echo $alt; ?>">
I think that fact that the image is coming from ACF it's not pulling it but i'm not to sure so I figured I would ask.
If it's an ACF image field, you could just do the following:
<?php $image = get_field('footer_logo'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
See ACF Image documentation.
I actually changed up the code a little to achieve the same gaol
<?php
$image = get_field('a1_image');
$thumb = $image['sizes'][ 'home-announcement' ];
?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $image['alt']; ?>"/>
With the ACF option set to image array.
This is a WP/SEO question related to adding the title attribute to the on an attachment page. We are using the twentyeleven theme and default image.php code, as below.
We want to pull in the title tag (or even automatically set the title for all images, so user doesn't have to individually set, or just use post title for the title - any of these).
The html from View Source looks like this:
The image.php code:
<a href="<?php echo esc_url( $next_attachment_url ); ?>" title="<?php the_title_attribute(); ?>" rel="attachment"><?php
$attachment_size = apply_filters( 'twentyeleven_attachment_size', 848 );
echo wp_get_attachment_image( $post->ID, array( $attachment_size, 1024 ) ); // filterable image width with 1024px limit for image height.
?></a>
I also wanted all my attachments to automatically have a title attribute, so I wrote the following PHP code:
<?php if(wp_attachment_is_image($post->id)) : $att_image = wp_get_attachment_image_src($post->id, "full"); ?><p class="attachment"><a class="show_image" rel="bookmark" href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php echo get_the_title(); ?>"><img class="img-responsive attachment-medium" src="<?php echo $att_image[0]; ?>" height="<?php echo $att_image[2];?>" width="<?php echo $att_image[1];?>" alt="<?php echo get_the_title(); ?>"></a></p><?php endif; ?>
This PHP code has been tested on WordPress 3.7.1. A live example of this code being used on a custom WordPress image.php file can be found on my Web Development & Design Blog
I have a site which uses PHP to echo results within a MySql database. The results are $link, $description and $title. Here is the code:
echo "
<h2><a href='$link'><b>$title</b><img src=\"IMAGE LINK GOES HERE OR PHP\" /></a> </h2><br>
$description<br />
<a href='$link'>$link<br /><br /></a><p></div></li></ul></div>
";
I would like to know how I would echo "Wordpress featured images" from a separate site.
For example:
echo <img src="PHP CODE TO GRAB THE IMAGES FROM A WORDPRESS SITE WHICH I HAVE ALREADY CREATED" />
Im sorry if Im not making perfect sense. I am rubbish with PHP. Please help....
I think you want this
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
<img src="<?php echo $image[0]; ?>" />