Support

Account

Home Forums Backend Issues (wp-admin) Image Alt Tag

Solving

Image Alt Tag

  • I want to use the alt tag data for the image I have a custom field to insert an image.

    I have the code below that gets the URL:
    <img src="<?php the_field('the_image'); ?>" />

    but how do i get the alt tag?
    <img src="<?php the_field('the_image'); ?>" alt="???" />

    I have looked all over your site and have not found it.

    I know it gets entered when we insert an image through the wordpress post or page insert image, but what about through ACF?

    Do not need the ID and the image object data does not have it in there.

    If I am using ACF do I need to have another field for the Alt tag text to be entered by the user and enter it like?

    <img src="<?php the_field('the_image'); ?>" alt="<?php the_field('the_image_alt'); ?>" />

    Not a thing I want left to the person posting the page or post.

  • If you want to get the alt tag associated with an image then you need to return the image as either an ID and then get the image yourself using of the WP functions for getting an image and data or as an Image Object instead of returning a URL.

    You can read about each of these return value types in the documentation here: http://www.advancedcustomfields.com/resources/image/

  • thanks for the reply however

    after trying this:

    <?php

    $image = get_field(‘client_2_image’);

    if( !empty($image) ): ?>
    ” alt=”<?php echo $image[‘alt’]; ?>” title=”working”/>

    <?php endif; ?>

    I get the following error…

    <img src="<br />
    <b>Warning</b>:  Illegal string offset 'url' in <b>C:\xampp\htdocs\wordpress-4.1.1\wordpress\wp-content\themes\byersenterprises\page.php</b> on line <b>161</b><br />
    h" alt="<br />
    <b>Warning</b>:  Illegal string offset 'alt' in <b>C:\xampp\htdocs\wordpress-4.1.1\wordpress\wp-content\themes\byersenterprises\page.php</b> on line <b>161</b><br />
    h" title="working">

    it grabs the right image as I added this code to echo the info:
    <?php echo $image, the_field(‘client_2_image’) ?>

    and both are the same url, but no, alt and the url does not work.

  • What are you returning from the image field? I’m assuming an image object.

    I’m going to need some more information. Can you supply “The Loop” code from page.php

  • Sorry so late, and so long a code, hope this is what you wanted…

    I took out the code you recommended as it was not working…

    get_header(); ?>
    
    <div id="main">
    <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="gf-slider"> 
    <!-- slider -->
    	<ul class="slides">
       	<li><a href="http://localhost/wordpress-4.1.1/wordpress/byers-solar/"><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/04/slider-image-4.png" alt="SunPower Solar" title="SunPower Solar"></a>
    			<p class="flex-caption">SunPower Solar</p>
    		</li>
    		<li><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/04/slider-image-3.png" alt="LeafGuard Gutters. No Leaks. No Glogs. No Cleaning. That's Byers!" title="LeafGuard Gutters.  No Leaks.  No Glogs.  No Cleaning.  That's Byers!" />
          	<p class="flex-caption">LeafGuard Gutters. &nbsp;No Leaks. &nbsp;No Glogs. &nbsp;No Cleaning. &nbsp;That's Byers!</p>
          </li>
          <li><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/04/slider-image-2.png" alt="Roofing Contractor Since 1987" title="Roofing Contractor Since 1987" />
          	<p class="flex-caption">Roofing Since 1987</p>
          </li>
          <li><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/04/slider-image-1.png" alt="Solatube Daylighting Systems | The smarter Alternative to Skylights" title="Solatube Daylighting Systems | The smarter Alternative to Skylights" />
          	<p class="flex-caption">Solatube Daylighting Systems | The smarter Alternative to Skylights</p>
          </li>
    	</ul>
    </div>
    <div id="header-one-bar-full"><h1>The Best Investment for your home and Family. <span>That's Byers</span></h1></div>
    <div id="header-one-bar-800"><h1>The Best Investment for your home and Family.<br /><span>That's Byers</span></h1></div>
    
    <div id="the-content">
    	<div id="the-content-text">
    		<h3>Why Byers?</h3>
    		<p>For three generations &mdash; and counting, the Byers family has been in the business of keeping your family safe, warm, and dry with the highest qaulity gutters, roofing, and&hellip; people.</p>
    		<p>Our promise to you is that we are &ldquo;<strong>The Best Investment For Your Home and Family. <span>Guaranteed</span>.</strong>&rdquo;</p>
    		<p>Every new product and service we provide must meet our own time-tested set of standards before we will stake our family's namon it.</p>
    		<p>Is it industry leading technology?<br />Does it last a lifetime?<br />Will our staff continue to be the best trained staff?<br />Can we guarantee our clients' satisfaction everytime?</p>
    		<p>When we answer YES to these questions and more, it will make the cut, so you can rest assured that it truly is the best investment for your home and family.</p>
    	</div>
    	<div id="the-content-images">
    		<div class="brand-logos-full"><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/themes/byersenterprises/seals/ThatsByers-brand-logos.jpg" alt="Brand Logos | Good Housekeeping | GAF | Guild Quality | Owens Corning, LeafGuard, Solatube, Sunpowe, Angies List" width="100%" title="Brand Logos | Good Housekeeping | GAF | Guild Quality | Owens Corning, LeafGuard, Solatube, Sunpower, Angies List" /></div>
    		<div class="brand-logos-1024"><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/themes/byersenterprises/seals/ThatsByers-brand-logos-b.jpg" alt="Brand Logos | Good Housekeeping | GAF | Guild Quality | Owens Corning, LeafGuard, Solatube, Sunpowe, Angies List" width="100%" title="Brand Logos | Good Housekeeping | GAF | Guild Quality | Owens Corning, LeafGuard, Solatube, Sunpower, Angies List" /></div>
    		<div class="brand-logos-800"><img src="http://localhost/wordpress-4.1.1/wordpress/wp-content/themes/byersenterprises/seals/ThatsByers-brand-logos.jpg" alt="Brand Logos | Good Housekeeping | GAF | Guild Quality | Owens Corning, LeafGuard, Solatube, Sunpowe, Angies List" width="100%" title="Brand Logos | Good Housekeeping | GAF | Guild Quality | Owens Corning, LeafGuard, Solatube, Sunpower, Angies List" /></div>
    	</div>
    	
    	<div class="clear open"></div>
    	
    	<?php
    		$leaf = "leaf";
    		$roof = "roof";
    		$solar = "solar";
    		$solatube = "solatube";
    		$OfferBox1Product = get_field('offer_box_1_product');
    		$OfferBox2Product = get_field('offer_box_2_product');
    		$OfferBox3Product = get_field('offer_box_3_product');
    		{if ($OfferBox1Product == $leaf) {$OfferBox1Color = "30,134,72"; $OfferBox1Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-leafguard-320x122.png"; $OfferBox1ImageDescription = "LeafGuard Gutters - Sacramento, Bay Area";}
    		elseif ($OfferBox1Product == $roof) {$OfferBox1Color = "25,130,197"; $OfferBox1Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-roofing-320x122.png"; $OfferBox1ImageDescription = "Roofing Contractor - Sacramento, Bay Area, Northern California, GAF, Owens Corning";}
    		elseif ($OfferBox1Product == $solar) {$OfferBox1Color = "246,191,22"; $OfferBox1Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-solar-320x122.png"; $OfferBox1ImageDescription = "SunPower Solar - Sacramento, Bay Area, Northern California, Solar Power";}
    		elseif ($OfferBox1Product == $solatube) {$OfferBox1Color = "25,130,197"; $OfferBox1Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-solatube-320x122.png"; $OfferBox1ImageDescription = "Solatube Daylighting Systems better than Skylights - Sacramento, Bay Area, Northern California";}}
    		{if ($OfferBox2Product == $leaf) {$OfferBox2Color = "30,134,72"; $OfferBox2Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-leafguard-320x122.png"; $OfferBox2ImageDescription = "LeafGuard Gutters - Sacramento, Bay Area";}
    		elseif ($OfferBox2Product == $roof) {$OfferBox2Color = "25,130,197"; $OfferBox2Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-roofing-320x122.png"; $OfferBox2ImageDescription = "Roofing Contractor - Sacramento, Bay Area, Northern California, GAF, Owens Corning";}
    		elseif ($OfferBox2Product == $solar) {$OfferBox2Color = "246,191,22"; $OfferBox2Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-solar-320x122.png"; $OfferBox2ImageDescription = "SunPower Solar - Sacramento, Bay Area, Northern California, Solar Power";}
    		elseif ($OfferBox2Product == $solatube) {$OfferBox2Color = "25,130,197"; $OfferBox2Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-solatube-320x122.png"; $OfferBox2ImageDescription = "Solatube Daylighting Systems better than Skylights - Sacramento, Bay Area, Northern California";}}
    		{if ($OfferBox3Product == $leaf) {$OfferBox3Color = "30,134,72"; $OfferBox3Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-leafguard-320x122.png"; $OfferBox3ImageDescription = "LeafGuard Gutters - Sacramento, Bay Area";}
    		elseif ($OfferBox3Product == $roof) {$OfferBox3Color = "25,130,197"; $OfferBox3Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-roofing-320x122.png"; $OfferBox3ImageDescription = "Roofing Contractor - Sacramento, Bay Area, Northern California, GAF, Owens Corning";}
    		elseif ($OfferBox3Product == $solar) {$OfferBox3Color = "246,191,22"; $OfferBox3Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-solar-320x122.png"; $OfferBox3ImageDescription = "SunPower Solar - Sacramento, Bay Area, Northern California, Solar Power";}
    		elseif ($OfferBox3Product == $solatube) {$OfferBox3Color = "25,130,197"; $OfferBox3Image = "http://localhost/wordpress-4.1.1/wordpress/wp-content/uploads/2015/06/byers-offer-solatube-320x122.png"; $OfferBox3ImageDescription = "Solatube Daylighting Systems better than Skylights - Sacramento, Bay Area, Northern California";}}
    	?>
    	
    	
    	<!--
    	==		OFFERS (3 BOXES)
    
    	-->
    	<div id="offers">
    		<h3>Latest Offers</h3>
    		<a href="<?php the_field('offer_box_1_link') ?>"><div class="offer" style="background-color: rgba( <?php echo $OfferBox1Color ?>, 1.00);">
    			<?php the_field('offer_box_1_content'); ?>
    			<img class="offer-image" src="<?php echo $OfferBox1Image ?>" alt="<?php echo $OfferBox1ImageDescription; ?>" title="<?php echo $OfferBox1ImageDescription; ?>" />
    		</div></a>
    		<div class="offer-space">&nbsp;</div>
    		<a href="<?php the_field('offer_box_2_link') ?>"><div class="offer" style="background-color: rgba(<?php echo $OfferBox2Color ?>, 1.00);">
    			<?php the_field('offer_box_2_content'); ?>
    			<img class="offer-image" src="<?php echo $OfferBox2Image ?>" alt="<?php echo $OfferBox2ImageDescription; ?>" title="<?php echo $OfferBox2ImageDescription; ?>" />
    		</div></a>
    		<div class="offer-space  offer-space-third">&nbsp;</div>
    		<a href="<?php the_field('offer_box_3_link') ?>"><div class="offer" style="background-color: rgba(<?php echo $OfferBox3Color ?>, 1.00);">
    			<?php the_field('offer_box_3_content'); ?>
    			<img class="offer-image" src="<?php echo $OfferBox3Image ?>" alt="<?php echo $OfferBox3ImageDescription; ?>" title="<?php echo $OfferBox3ImageDescription; ?>" />
    		</div></a>
    	</div>
    	
    	<div class="open"></div>
    	
    	
    	<!--
    	==		CLIENT TESTIMONIALS
    
    	-->
    	<div id="client-testimonials">
    		<div class="client-testimonial-half">
    			<div class="the-testimonial"><?php the_field('client_1_testimonial'); ?></div>
    			<p class="client-info"><span class="client"><?php the_field('client_1_name'); ?></span><br /><?php the_field('client_1_city'); ?><br /><?php the_field('client_1_date'); ?></p>
    			<img style="display: <?php the_field('display_client_1_image');?>;" src="<?php the_field('client_1_image'); ?>" alt="<?php the_field('client_1_image_description'); ?>" title="<?php the_field('client_1_image_description'); ?>" />
    		</div>
    		<div class="client-testimonial-half half-right">
    			<div class="the-testimonial"><?php the_field('client_2_testimonial'); ?></div>
    			<p class="client-info"><span class="client"><?php the_field('client_2_name'); ?></span><br /><?php the_field('client_2_city'); ?><br /><?php the_field('client_2_date'); ?></p>
    			<img style="display: <?php the_field('display_client_2_image');?>;" src="<?php the_field('client_2_image'); ?>" alt="<?php the_field('client_2_image_description'); ?>" title="<?php the_field('client_2_image_description'); ?>" />
    		</div>
    	</div>
    
    	<div class="clear"></div>
    </div>
    <?php the_content(__('(more...)')); ?>
    
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, we could not find the post you are looking for.'); ?></p>
    <?php endif; ?>
    </div>
    
    </div>
    
    <div id="delimiter"></div>
    
    <?php get_footer(); ?>
  • Sorry for leaving you hanging, my notification on the topic got turned off for some reason.

    I’ve looked over your code and I’m a little lost, maybe.

    If you want to use the “Alt” value stored WP when uploading an image then you should be returning an image object from the ACF field. This would entirely change the code you using because it appears that you are returning the URL of the image.

    If you return an image object, then the alt value will be part of that object.

    If you return an image ID then you can get the rest of the image data using standard WP functions with that ID.

    If you return the URL, the way you are doing, you will be unable to get any other information about the image and, like you said, you’ll need to supply another field for the user to input the alt value.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Image Alt Tag’ is closed to new replies.