• Resolved GATEKeeper

    (@gatekeeper)


    I just started using the fantastic Autofocus theme from allancole.com, and I’m having one issue. Alt tags for photos are coming in blank, despite having all the info filled in when I upload.

    Any way I can fix this? Does some code just need to go in the functions file?

    Would appreciate any help. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • esmi

    (@esmi)

    You can’t upload data for the alt attribute (text alternative) of images. You have to add it by hand. Within WP, the alt text/tag normally defaults to the name or title of the image.

    Thread Starter GATEKeeper

    (@gatekeeper)

    Well, Autofocus inserts the images for you. You just upload it and don’t need to insert code into the post (if you do insert the image too, the photo appears twice).

    So, to add in the alt text I’m going to need to change the code in the theme itself which currently does not put anything in the alt tag.

    To reiterate, all the image details are filled in, and yet the theme shows: alt=””.

    esmi

    (@esmi)

    I wouldn’t have thought that a theme could insert alt text automatically. How would it know what text to use? Image analysis is incredibly complex and, so far, doesn’t even come close to what a real human being can do. I don’t know the Autofocus theme but are you sure that you’re not missing an extra step where you can add the alt text?

    How does it insert the image? With standard markup? Using a shortcode? Or something entirely different?

    Thread Starter GATEKeeper

    (@gatekeeper)

    The theme just inserts the first image attached to the post. I was hoping it was just a matter of adding an extra line of code somewhere to insert the title of the image in the ALT tag.

    I saw elsewhere that usually it’s as simple as adding:

    alt="<?php the_title() ?>"

    But where would I put that in the code below?

    Here’s the theme code from the functions.php file:

    // Post Attachment image function. Image URL for CSS Background.
    function the_post_image_url($size=large) {
    
    	global $post;
    	$linkedimgurl = get_post_meta ($post->ID, 'image_url', true);
    
    	if ( $images = get_children(array(
    		'post_parent' => get_the_ID(),
    		'post_type' => 'attachment',
    		'numberposts' => 1,
    		'post_mime_type' => 'image',)))
    	{
    		foreach( $images as $image ) {
    			$attachmenturl=wp_get_attachment_url($image->ID);
    			$attachmentimage=wp_get_attachment_image( $image->ID, $size );
    
    			echo ''.$attachmenturl.'';
    		}
    
    	} elseif ( $linkedimgurl ) {
    
    		echo $linkedimgurl;
    
    	} elseif ( $linkedimgurl &amp;&amp; $images = get_children(array(
    		'post_parent' => get_the_ID(),
    		'post_type' => 'attachment',
    		'numberposts' => 1,
    		'post_mime_type' => 'image',)))
    	{
    		foreach( $images as $image ) {
    			$attachmenturl=wp_get_attachment_url($image->ID);
    			$attachmentimage=wp_get_attachment_image( $image->ID, $size );
    
    			echo ''.$attachmenturl.'';
    		}
    
    	} else {
    		echo '' . get_bloginfo ( 'stylesheet_directory' );
    		echo '/img/no-attachment.gif';
    	}
    }
    
    // Post Attachment image function. Direct link to file.
    function the_post_image($size=thumbnail) {
    
    	global $post;
    	$linkedimgtag = get_post_meta ($post->ID, 'image_tag', true);
    
    	if ( $images = get_children(array(
    		'post_parent' => get_the_ID(),
    		'post_type' => 'attachment',
    		'numberposts' => 1,
    		'post_mime_type' => 'image',)))
    		{
    		foreach( $images as $image ) {
    			$attachmenturl=wp_get_attachment_url($image->ID);
    			$attachmentimage=wp_get_attachment_image( $image->ID, $size );
    
    			echo ''.$attachmentimage.'';
    		}
    
    	} elseif ( $linkedimgtag ) {
    
    		echo $linkedimgtag;
    
    	} elseif ( $linkedimgtag &amp;&amp; $images = get_children(array(
    		'post_parent' => get_the_ID(),
    		'post_type' => 'attachment',
    		'numberposts' => 1,
    		'post_mime_type' => 'image',)))
    		{
    		foreach( $images as $image ) {
    			$attachmenturl=wp_get_attachment_url($image->ID);
    			$attachmentimage=wp_get_attachment_image( $image->ID, $size );
    
    			echo ''.$attachmentimage.'';
    		}
    
    	} else {
    		echo '<img src="' . get_bloginfo ( 'stylesheet_directory' ) . '/img/no-attachment-large.gif" />';
    	}
    }
    
    //Setup Images for Attachment functions
    function image_setup($postid) {
    	global $post;
    	$post = get_post($postid);
    
    	// get url
    	if ( !preg_match('/<img ([^>]*)src=(\"|\')(.+?)(\2)([^>\/]*)\/*>/', $post->post_content, $matches) ) {
    		return false;
    	}
    
    	// url setup
    	$post->image_url = $matches[3];
    	if ( !$post->image_url = preg_replace('/\?w\=[0-9]+/','', $post->image_url) )
    		return false;
    
    	$post->image_url = clean_url( $post->image_url, 'raw' );
    
    	delete_post_meta($post->ID, 'image_url');
    	delete_post_meta($post->ID, 'image_tag');
    
    	add_post_meta($post->ID, 'image_url', $post->image_url);
    	add_post_meta($post->ID, 'image_tag', '<img src="'.$post->image_url.'" />');
    
    }
    
    add_action('publish_post', image_setup);
    add_action('publish_page', image_setup);
    
    // Post Attachment image function for Attachment Pages.
    function the_attachment_image($size=large) {
    	$attachmenturl=wp_get_attachment_url($image->ID);
    	$attachmentimage=wp_get_attachment_image( $image->ID, $size );
    
    	echo ''.$attachmentimage.'';
    }
    allancole

    (@allancole)

    Hi gate keeper,
    At the moment wp_get_attachment_image doesn’t support any attributes or arguments. So there isn’t an easy way to add alt tags to uploaded images.

    However, linked (From URL) images can have the alt tag added by replacing this line in functions.php:

    add_post_meta($post->ID, 'image_tag', '<img src="'.$post->image_url.'" />');

    with this line:

    add_post_meta($post->ID, 'image_tag', '<img alt="'.the_title().'" src="'.$post->image_url.'" />');

    I did find these two posts in the forum that seems to have a potential fix for the uploaded images but I have not tested the solutions in AutoFocus. Hope that helps. As soon as some wp_get_attachment_image attributes are added to the WP core, I will make updates to AutoFocus.

    1) http://wordpress.org/support/topic/225677
    2) http://wordpress.org/support/topic/166896

    Thread Starter GATEKeeper

    (@gatekeeper)

    Thanks for the info – I really appreciate!

    And again, love the theme!

    tjkoontz21

    (@tjkoontz21)

    Just a terrific theme. I’d like for the large white post date to disappear. I’ve been able to alter the code to get only a small gray box with the date at the top of the photographs. Can you give me a hand?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Autofocus theme: Alt tags coming up blank’ is closed to new replies.