How can I automatically add the "alt" attribute of an image using the image file name if it is missing using php?

Question

I need to add an alt image tag to hundreds of images. The problem is that it will take a long time, and in any case, it seems to be a simpler solution.

I managed to achieve this 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, for example, if I have this image:

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

then javascript will automatically add alt like this:

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

Well, this is all fine and dandy, but now I want to do it with PHP instead, because the problem is that it is only adding tags to the interface, which means that it does not appear from the page source (only a validation element), which means that the search engine will not see the alt label, which means that the only way to do this is to translate it directly to the page using php.

So, how can I execute my javascript solution above using php?

Answer 1

Is the file name consistently rich mucus? If not, you'd better just have empty alt tags. Web crawlers already get the image file name, so adding the last bit will only help if it really describes the image. (This is also not 100% true, it will not be indexed via JS, some bots, especially Google, have parsed JavaScript to some extent.)

If the file name is not descriptive, it is likely to do more harm than good (for SEO and screen reading). I assume that you will either give descriptive file names if you plan to use this scheme to move forward.

I assume that the images are not controlled by the content in any way, what could you extract from the title or description of the alt attribute (and / or longdesc)?

If this is a one-time fix, again depending on the quality of the naming, this might be ok. A few hundred images are not so long, and always [ad removed] :)

The alternative text performs several functions:

• It is read on the screen of readers instead of images that allow content and functions to be accessible to persons with visual or certain cognitive disabilities.
• It is displayed instead of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides semantic meaning and description for images that can be read by search engines or used to subsequently determine image content from a page context.

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

Answer 2

You do not indicate how you display your html content and, more specifically, image tags.

But I assume, based on your question, that you have an html file with a lot of img tags, and you want to add the alt attribute, where it is absent without pain, by doing it manually.

If so, try to parse your HTML file using PHP and save the result in a new HTML file with all img tags containing the required alt tag.

You can read the contents of an HTML file using the PHP file_get_contents () method.

Then parse the resulting preg_replace () content to find img tags that don't have an alt attribute and add them.

Finally, save the parsed content using file_put_contents() back to the HTML file, which you can use later.

A PHP implementation may 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 );