Ruub
Ruub

Reputation: 629

Replace empty alt tag on <img> tag

I would like to replace my empty alt tags on images in a string. I have a string that contains all the text for a curtain page. In the text are also images, and a lot of them have empty tags (old data), but most of the time they do have title tags. For example: <img src="assets/img/test.png" alt="" title="I'am a title tag" width="100" height="100" />

What I wish to have: <img src="assets/img/test.png" alt="" title="I'am a title tag" alt="I'am a title tag" width="100" height="100" />

So: I need to find all the images in my string, loop trough the images, find title tags, find alt tags, and replace the empty alt tags with the title tags that do have a value.

This is what i tried:

preg_match_all('/<img[^>]+>/i',$return, $text);
if(isset($text)) {
            foreach( $text as $itemImg ) {
                foreach( $itemImg as $item ) {
                    $array = array();
                    preg_match( '/title="([^"]*)"/i', $item, $array );
                    if(isset($array[1])) {
                        //So $array[1] is a title tag, now what?
                    }
                }

            }
        }

I don't know have to complete the code, and I think there must be a easier fix for this. Suggestions?

Upvotes: 1

Views: 1370

Answers (5)

StreetCoder
StreetCoder

Reputation: 10061

Please try it below:

function img_title_in_alt($full_img_tag){

    $doc = new DOMDocument();
    $doc->loadHTML($full_img_tag);
    $imageTags = $doc->getElementsByTagName('img');

    foreach($imageTags as $tag) {

        if($tag->getAttribute('src')!==''){
            return '<img src="'.$tag->getAttribute('src').'" width="'.$tag->getAttribute('width').'" height="'.$tag->getAttribute('height').'" alt="'.$tag->getAttribute('title').'" title="'.$tag->getAttribute('title').'" />';
        }
    }
}

Now call the function with your full html tag of image. See the example:

$image = '<img src="assets/img/test.png" alt="" title="I\'am a title tag" width="100" height="100" />';

print img_title_in_alt($image);

Upvotes: 0

Sahil Gulati
Sahil Gulati

Reputation: 15141

Using Regex is not a good approach you should use DOMDocument for parsing HTML. Here we are querying on those elements whose alt attribute is empty which is actually asked in question.

Try this code snippet here

<?php

ini_set('display_errors', 1);

$string=<<<HTML
<img src="assets/img/test1.png" alt="" title="I'am a title tag" width="100" height="100" />
<img src="assets/img/test2.png" alt="" title="I'am a title tag" width="100" height="100" />
<img src="assets/img/test3.png" alt="" title="I'am a title tag" width="100" height="100" /> 
HTML;

$domDocument = new DOMDocument();
$domDocument->loadHTML($string,LIBXML_HTML_NODEFDTD);

$domXPath = new DOMXPath($domDocument);
$results = $domXPath->query('//img[@alt=""]');
foreach($results as $result)
{
    $title=$result->getAttribute("title");
    $result->setAttribute("alt",$title);
    echo $domDocument->saveHTML($result);
    echo PHP_EOL;
}

Upvotes: 2

Milan Chheda
Milan Chheda

Reputation: 8249

You can use DOMDocument to achieve your requirement. Below is one of the sample code for your reference:

<?php
$html = '<a href="http://example.com" rel="nofollow external">test</a>';
$dom = new DOMDocument;
$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$nodes = $xpath->query("//a[contains(concat(' ', normalize-space(@rel), ' '), ' external ')]");
foreach($nodes as $node) {
    $node->setAttribute('href', 'http://example.org');
}

?>

Upvotes: 0

Kyle Smith
Kyle Smith

Reputation: 2332

What you want here is an HTML parser library that can manipulate HTML and then save it again. By using regular expressions to modify HTML markup, you're setting yourself up for a mess.

The DOM module built into PHP offers this functionality: http://php.net/manual/en/book.dom.php

Here's an example (cribbed from this article):

$dom = new DOMDocument;
$dom->loadHTML($html);
$images = $dom->getElementsByTagName('img');
foreach ($images as $image) {
        $image->setAttribute('src', 'http://example.com/' . $image->getAttribute('src'));
}
$html = $dom->saveHTML();

Upvotes: 2

fxlacroix
fxlacroix

Reputation: 567

maybe you could use Javascript for this kind of things with jquery like:

$('img').each(function(){
    $(this).attr('alt', $(this).attr('title'));
});

hope it helps

Regards.

Upvotes: 2

Related Questions