How can I automatically add the image "alt" attribute using image filename if it is missing, using php?

Question

I need to add an image alt tag to hundreds of images. Problem is this would take forever and anyway there seems to be an easier solution.

I have been able to achieve this somewhat using javascript, as follows:

<script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
    if (typeof attr == typeof undefined || attr == false) {
        $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    }  
  });  
 });  
 //]]>  
</script>

What this does is exactly what I want, so for example if I have this image:

<img src="http://mywebsite.com/images/the-image1.jpg" />

then the javascript will add the alt automatically like this:

<img src="http://mywebsite.com/images/the-image1.jpg" alt="the-image1" />

Well, that is all fine and dandy, but now I want to do it with PHP instead, because the problem is that this is only adding the tags into the front end which means it isn't visible from page source (only inspect element), which means that the search engine won't see the alt tag, which means that the only way to do it is to put it right into the page using php.

So how can I do my above javascript solution using php?

Klinger

Where is your php that generates the image links? – Mccracken

The easiest solution would be add it in the PHP.... which I'm not seeing here. – Gamesmanship

I don't see any attr variable in the code, but you're using it in the if statement o.O – Ozzy

@Mccracken image links aren't generated, they are written with html inserted manually into posts. – Klinger

@Gamesmanship I'm not sure what you mean. – Klinger

@Ozzy can you please elaborate on the problem you're referring to? The javascript above does work.. – Klinger

@Klinger Not a problem, but an observation. You have attr variable in the if statement which isn't declared. Since it isn't declared typeof attr will return undefined and you compare it to undefined which will always return true. This makes the use of if statement pointless. About your actual problem, you should show how you're outputing the images. Solutions depend on how you output them. – Ozzy

images are output using basic html in a php webpage i.e. index.php and the image is <img src="" /> manually typed into the webpage via a post such as wordpress blog post. – Klinger

Answer 1

Does the filename consistently provide a meaningful slug? If not, you are better off just having empty alt tags. Web crawlers are already getting the image filename, so adding the last bit is only going to help if it is actually descriptive of the image. (It's also not 100% true it won't be indexed via JS, some bots, notably Google, do parse JavaScript to some degree.)

If the filename is not descriptive, it's probably going to do more harm than good (for SEO and screen readers). I assume you either are or will give descriptive filenames if you plan to use this scheme moving forward.

I'm assuming the images aren't content-managed in some way that you could pull from a caption or description for alt (and/or longdesc) attribute?

If it's a one-off fix, again depending on the quality of the naming, it might be ok. A few hundred images might not take that long, and there is always [advert removed] :)

Alternative text serves several functions:

• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
• It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

http://webaim.org/techniques/alttext/

Vintager

Yes, actually all the images on my site all have a meaningful name because I always make the filename the appropriate descriptive name, so using the filename for alt would actually be very useful and descriptive. The reason for adding the alt is because the search engine specifically told me i needed to add the missing alt tags and told me the missing alt tags were harming my ranking. – Klinger

Answer 2

You don't specify how you are outputting your html content and more specifically you images tags.

But I'm guessing, based on your question, that you have a html file with a lot of img tags, and you want to add an alt attribute where it's missing without the pain of doing it by hand.

If that's the case, the way to go is to parse your HTML file with PHP, and save the result to a new HTML file with all img tags containing the required alt tag.

You can read the HTML file content with the PHP method file_get_contents().

Then parse the retrieved content with preg_replace() to detect img tags missing the alt attribute, and add them.

And finally save the parsed content with file_put_contents() back to a HTML file that you can use later on.

A PHP implementation could be :

// Retrieve the HTML content to be parsed
$html = file_get_contents( "path_to_html_file" );

// This regexp select all img tags not already containing an alt attribute
$pattern = '#<img(?!.*alt=")(.+src="(([^"]+/)?(.+)\..+)"[^ /]*)( ?\/?)>#i';

// Add alt attribute to img tags lacking it
// put the filename without extension as a value to the alt attribute
$parsed_html = preg_replace( $pattern, '<img$1 alt="$4"$5>', $html );

// Save the parsed content to a new file
file_put_contents( "path_to_parsed_html_file", $parsed_html );

Trollope

The images are output through html such as in a blog post. There is no php adding the images. It's in wordpress, so I'm not sure if your solution is possible. let me know. – Klinger

The idea behind what I'm suggesting is to create a script taking the HTML datas containing your img tags as input, parsing the datas adding the missing alt attributes and outputting the result so you can use this new HTML code as you would do with the old one. In short, the script only do what you would do by hand. – Trollope

I just edited my answer. I wasn't saving the result of the parsing, but the untouched input o_O" – Trollope

You shouldn't be using regex to parse a HTML file. Beter of with a dom parser, what if the image has a class, data attribute, width, height, .. – Weintrob

@Weintrob This regexp only check if the img tag has an alt attribut or not. If it doesn't, it just adds the desired alt attribut at the end of the tag, keeping all the other attributs intact as well as the self-closing slash if it was there in the first place. – Trollope

would I just insert this into my header.php and it would automatically work? – Klinger

Nope, it would not work. What I'm proposing is a one time processing, where you end up with a new HTML code that you can use to update your code in Wordpress. – Trollope

@MattMusia So what if the image does have an alt tag, but behind the source tag... – Weintrob

@Weintrob Any alt attribute will prevent the regexp to match the img tag containing it. Whatever its location inside the tag. – Trollope

Seems to me the regex is not working, see here at a regex tester – Weintrob

You're right. It's not working with images in the same directory. I've edited it to make the path optional. And here is an updated version of the regex tester (check the preg_replace tab to see the result) – Trollope

That works indeed, minor comment. OP could use ob_start and ob_get_clean to get the output HTML and apply the regex on that HTML – Weintrob

ok so does it work now if i put this code into my header.php file in wordpress? – Klinger

I'm sorry to ask, but are you trying to understand what I'm saying and what the above code does ? – Trollope

yes i just want to paste in some php into the header which will automatically seek and img on page load and if alt is missing then add it in, without messing with any existing site code. – Klinger

Answer 3

This will get it done

jQuery(document).ready(function () {
  jQuery("img").each(function () {
    var img_src = jQuery(this).attr('src');
    if (typeof img_src !== typeof undefined && img_src !== false) {
      var img_alt = jQuery(this).attr('alt');
      var str = img_src
      var pieces = str.split('/');
      var imgName = pieces[pieces.length - 1];
      var imgnameArray = imgName.split('.');
      var alt = imgnameArray[0];
      if (img_alt == '' || typeof img_alt === typeof undefined || img_alt === false) {
        jQuery(this).attr('alt', alt);
      }
    }
  });
});

Soapberry

Answer 4

I use this function to replace all images with no or empty alt with a filenname in the $content:

 $content = preg_replace_callback('~<img(.*?)>~', function ($matches) { //Search for all images
        if (!preg_match('~alt="\S+"~', $matches[1])) { // if alt with any characters not exists
            $img = preg_replace('~alt="\S*"~', '', $matches[0]); // remove empty alt
            preg_match('~src="(?:(?:[^"]+/)?(.+)\..+)"~', $img, $src); // get filename from src
            $alt = preg_replace('~-|_~', ' ', $src[1]); //replace '-' and '_' symbols with space symbol
            return preg_replace('~<img~', '<img alt="' . $alt . '"', $img); // put new alt into tag
        } else {
            return $matches[0];
        }
    }, $content);

Emmery