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.
Related
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';">
I want to put a default image in custom taxonomy category using Advanced Custom Field Pro plugin.
I am using following code to show the featured image, I want to show a default image if there is no featured image.
<?php
if($category_image_url) { ?>
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/timthumb.php?src=<?php echo $category_image['url']; ?>&w=250&h=200&zc=2"
alt="<?php echo $term->name; ?>"
class="product_img">
<?php }else { ?>
<img src="http://www.staticwhich.co.uk/static/images/products/no-image/no-image-available.png"
alt="<?php echo $category_image['name']; ?>"
title="<?php echo $category_image['name']; ?>">
<?php } ?>
I have an issue trying to display an image. I use last ACF
but not showing image
when i take look in html i get this :
<img src="2119, , , , , image/jpeg, /wp-content/uploads/2016/02/ef51d8e8f5cf684e7654f0ea4ab7ce33.jpg, 1024, 681, Array" alt="">
my name slug is hotes
<span><img src="<?php the_field('hotes',256); ?>" alt="" /><span>
the post meta for image is an array of data containing url, height, width etc.
based on the docs,
http://www.advancedcustomfields.com/resources/code-examples/
http://www.advancedcustomfields.com/resources/image/
you should be doing it like this,
<?php $image = wp_get_attachment_image_src(get_field('image_test'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('image_test')) ?>" />
or this way,
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
or by using native get_post_meta function
$image = get_post_meta(get_the_ID(), 'hotes'); // Get Image Object
$image_url = $image['url']; // Retrieve image url
I'm having a Magento issue where the image selected as the base image is shown twice, once as the main image and once as a "more views" image. The problem is that the base image hasn't been checked as "Exclude" on all the thousands and thousands of products.
Is there a Magento way to either pull the full gallery of images, regardless of if "Exclude" is checked or not, or to pull all the images except the one selected as "base image".
Current Code
<a href="<?php echo $helpImg->getImg($_product, $imgWidth, $imgHeight); ?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>" />
<img src="<?php echo $helpImg->getImg($_product, $imgWidth, $imgHeight); ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel());?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>" />
</a>
<?php if (count($this->getGalleryImages()) > 1): ?>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>" class="swipebox" title="<?php echo $this->escapeHtml($this->getImageLabel());?>" />
<img data-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>" alt="<?php echo $subtitle; ?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>"/>
</a>
<?php endforeach; ?><?php endif; ?>
Currently it pulls the main image, and then it pulls the gallery. I'm trying to just pull the ENTIRE gallery regardless of "Exclude", or pull the gallery except the base image.
Ideas?
Solution has been found
PHP
<?php
if ($_product->getImage() == $_image->getFile())
continue;
?>
Added this directly after the foreach statement, now it pulls all images except the first one.
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