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

PHP
1

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

2

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

3

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

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?

4

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?

5

Hey,

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

6

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.

7

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>
8

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 :slight_smile:

$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 :slight_smile: thank you so much for the help

9

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;
?>
10

perfect… :slight_smile: thank you so much for the help

11

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();
?>
12

Thanks for that :slight_smile: 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 :slight_smile: