Finding contents of img src and using it for a prefix to the img tag

ShaneLangley · March 10, 2014, 9:16am

Hey guys,

I have a string that is for a blog, potentially it could have an unlimited number of images in this string, what im trying to do is get the value of the src=“” and use it as the hyperlink that happens before the img
so currently they might show up

<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />

etc
what im trying to turn this into is the following

<a href="images/image1.jpg"><img src="images/image1.jpg" /></a>
<a href="images/image1.jpg"><img src="images/image2.jpg" /></a>
<a href="images/image1.jpg"><img src="images/image3.jpg" /></a>

basically trying to integrate lightbox into our blog dynamically so our user doesn’t need to manually type code she doesn’t understand.

ive tried countless things, the closest is the following, tho it gives them all the same href


preg_match_all('/&lt;img[^&gt;]+&gt;/i',$qryblog[content], $imgTags); 
for ($i = 0; $i &lt; count($imgTags[0]); $i++) {
  // get the source string
  preg_match('/src="([^"]+)/i',$imgTags[0][$i], $imgage);
  // remove opening 'src=' tag, can`t get the regex right
  $origImageSrc[$id][] = str_ireplace( 'src="', '',  $imgage[0]);
}
$src = $origImageSrc[$id][$count];
$yourprefix = "&lt;a href=\\"$src\\" data-lightbox=\\"image-2\\" title=\\"Gallery\\"&gt;";
$yoursuffix = "&lt;/a&gt;";
$content=preg_replace("#(&lt;img[^&gt;]*&gt;)#s",$yourprefix."\\${1}".$yoursuffix,$qryblog[content]);

im really struggling to find a way to make this dynamically do it on the fly… does anyone have any ideas?

ive also tried using simple dom html paraser but didn’t have much luck with it


$html = str_get_html($qryblog[content]);

foreach($html-&gt;find('img') as $element)
	echo $element-&gt;src . '&lt;br&gt;';

This happily outputs all the src’s but I cant make it do the rest

phpMyDirectory · March 10, 2014, 2:10pm

Hello,

Something like this? Replace $text with your blog content.

<?php
$test = '
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />';

$new = preg_replace('/(<img src="([^\\"]+)" \\/>)/','<a href="\\2">\\1</a>',$test);
echo $new;
?>

http://phpfiddle.org/main/code/mn6-5fe

ShaneLangley · March 10, 2014, 5:31pm

phpMyDirectory:

Hello,

Something like this? Replace $text with your blog content.
<?php
$test = '
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" />';

$new = preg_replace('/(<img src="([^\\"]+)" \\/>)/','<a href="\\2">\\1</a>',$test);
echo $new;
?>
http://phpfiddle.org/main/code/mn6-5fe

hey Ben… thanks for that
I really wish I didn’t suck with those regexp’s

The only thing I forgot to mention is that there can be other tags before and after the src=“”, how would we be able to make it work no matter what is before or after that?

Mittineague · March 10, 2014, 5:54pm

Do you have to use regex for this?

Seems it should be possible to get all img tags, get the src attribute value. create the anchor tag, give the href attribute the value of the img src.

Or am I missing something?

ShaneLangley · March 10, 2014, 6:12pm

Hey,

nope it can be anything… im just struggling to find a way to make it work reliably…

phpMyDirectory · March 10, 2014, 6:35pm

You could try:

<?php

$test = '
<img test="test" src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" anothertest="test" />';

$new = preg_replace('/(<img[^\\>]+src="([^\\"]+)"[^\\>]\\/>)/','<a href="\\2">\\1</a>',$test);
echo $new;
?>

I suggest testing this on a wide range of content and also making sure it doesn’t pose any problems on malformed input, etc.

Mittineague may be right that another method may be easier and possibly faster for you instead of regex.

ShaneLangley · March 10, 2014, 6:57pm

phpMyDirectory:

You could try:
<?php

$test = '
<img test="test" src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" anothertest="test" />';

$new = preg_replace('/(<img[^\\>]+src="([^\\"]+)"[^\\>]\\/>)/','<a href="\\2">\\1</a>',$test);
echo $new;
?>
I suggest testing this on a wide range of content and also making sure it doesn’t pose any problems on malformed input, etc.

Mittineague may be right that another method may be easier and possibly faster for you instead of regex.

Thanks for that… tho I think I must be missing something… it doesn’t seem to be putting anything before or after the img tags, below is the output of $test

<div style="width: 29.63%; height: 0%; float: left;">
<table border="0" cellpadding="0" cellspacing="0" style="height:471px; width:100%">
	<tbody>
		<tr>
			<td>
			<p>text goes here.</p>

			<p>&nbsp;</p>

			<p>More text goes here.</p>

			<p>&nbsp;</p>

			<p>&nbsp;</p>
			</td>
		</tr>
	</tbody>
</table>
</div>

<div style="width: 70%; height: 100%; float: left;">
<table border="0" cellpadding="0" cellspacing="0" style="height:462px; padding-left:50px; width:533px">
	<tbody>
		<tr>
			<td>&nbsp;
			<table border="0" cellpadding="1" cellspacing="1" style="width:500px">
				<tbody>
					<tr>
						<td><img alt="" src="/path/ckeditor/fileman/Uploads/Images/img.jpg" style="height:360px; width:490px" /></td>
					</tr>
					<tr>
						<td>Comment 1</td>
					</tr>
					<tr>
						<td><img alt="" src="/path/ckeditor/fileman/Uploads/Rocketman.png" style="height:354px; width:489px" /></td>
					</tr>
					<tr>
						<td>Comment 2</td>
					</tr>
					<tr>
						<td><img alt="" src="/path/ckeditor/fileman/Uploads/Valentino.png" style="height:589px; width:486px" /></td>
					</tr>
					<tr>
						<td>Comment 3</td>
					</tr>
					<tr>
						<td><img alt="" src="/path/ckeditor/fileman/Uploads/Mischka.png" style="height:563px; width:489px" /></td>
					</tr>
					<tr>
						<td>Comment 4</td>
					</tr>
					<tr>
						<td><img alt="" src="/path/ckeditor/fileman/Uploads/Chaika Cali and Sibi.png" style="height:534px; width:486px" /></td>
					</tr>
					<tr>
						<td>Comment 5</td>
					</tr>
					<tr>
						<td><img alt="" src="/path/ckeditor/fileman/Uploads/Cali.png" style="height:569px; width:483px" /></td>
					</tr>
					<tr>
						<td>Comment 6</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>
</div>

ShaneLangley · March 10, 2014, 7:05pm

on testing that example $test above it appears that one works with tags that are before the src but if theres any after it doesn’t

<a href="images/image1.jpg"><img test="test" src="images/image1.jpg" /></a>
<a href="images/image2.jpg"><img src="images/image2.jpg" /></a>
<img src="images/image3.jpg" anothertest="test" />

…edit

it appears adding a + after the [^\>] was what was missing to make that one work

$new = preg_replace('/(<img[^\\>]+src="([^\\"]+)"[^\\>]+\\/>)/','<a href="\\2">\\1</a>',$test);

Seems to work correctly… will keep testing but it looks perfect… the lucky thing about this is its all added using a wysiwyg editor so the input will generally be pretty standard thank you so much for the help

phpMyDirectory · March 10, 2014, 7:08pm

Sorry there was a typo in my last post. Try:

<?php

$test = '
<?php
$test = '
<img test="test" src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" anothertest="test" />';

$new = preg_replace('/(<img[^>]+src="([^\\"]+)"[^>]+\\/>)/','<a href="\\2">\\1</a>',$test);
echo $new;
?>

ShaneLangley · March 10, 2014, 7:10pm

phpMyDirectory:

Sorry there was a typo in my last post. Try:

<?php

$test = '
<?php
$test = '
<img test="test" src="images/image1.jpg" />
<img src="images/image2.jpg" />
<img src="images/image3.jpg" anothertest="test" />';

$new = preg_replace('/(<img[^>]+src="([^\\"]+)"[^>]+\\/>)/','<a href="\\2">\\1</a>',$test);
echo $new;
?>

perfect… thank you so much for the help

Mittineague · March 10, 2014, 11:41pm

If you’re happy that that regex will do the job, then this might be moot. But here it is anyway

<?php
$test_dom = <<< EOTEST
<html><head><title>Test HTML string</title></head>
<body>
<img src="./images/image0.png" alt="image0 alt" /><br />
<img src="./images/image1.png" alt="image1 alt" /><br />
<img src="./images/image2.png" alt="image2 alt" /><br />
<img src="./images/image3.png" alt="image3 alt" /><br />
<img src="./images/image4.png" alt="image4 alt" /><br />
<img src="./images/image5.png" alt="image5 alt" /><br />
<img src="./images/image6.png" alt="image6 alt" /><br />
<img src="./images/image7.png" alt="image7 alt" /><br />
<img src="./images/image8.png" alt="image8 alt" /><br />
</body></html>
EOTEST;

$doc = new DOMDocument();
$doc->loadHTML($test_dom);

$body_tag = $doc->getElementsByTagName('body');
$img_tags = $doc->getElementsByTagName('img');
$num_imgs = $img_tags->length;
for ($i = 0; $i < $num_imgs; $i++) {
    $img_src = $img_tags->item($i)->getAttribute('src');
	$anchor_tag = $doc->createElement('a');
	$anchor_tag->setAttribute('href', $img_src);
	$anchor_tag->appendChild($img_tags->item($i)->cloneNode());
	$body_tag->item(0)->replaceChild($anchor_tag, $img_tags->item($i));
}
echo $doc->saveHTML();
?>

ShaneLangley · March 11, 2014, 12:01am

Thanks for that ill keep that in mind if I have any issues… the one I tried with using the dom stuff was no where like that which explains why I wasn’t succesfull

Topic		Replies	Views
Extract the src attribute from an img tag PHP	6	15460	October 8, 2014
PHP to get all img src="" in a block of html? PHP	1	443	January 17, 2010
Regular expression help PHP	6	613	June 8, 2010
Regex question PHP	9	604	December 16, 2011
URL regex PHP	8	868	September 13, 2011

Finding contents of img src and using it for a prefix to the img tag

Related topics