CODEWITHSUNDEEP
phpjquerypathurl-rewriting
Vikram Rao
Vikram Rao

Reputation: 1078

how to rewrite image path

Hi guys I am seeking help in re-writing the image path.

Let me explain.....

Lets say I am running 2 applications. APP-A and APP-B. My APP-A has a plug-in installed which generates it's menu's output in plain HTML format and saves as an HTML file.

I now want to import this HTML file into my APP=B and use it as the Menu for it. The HTML file looks something like this.....

<div class="menu">
<li class="item27 parent root" >
    <a class="daddy item image subtext" href="/xyz/cms/index.php>
    <span>
        <img src="tmpl/abc_template/images/icons/icon.png" alt="icon1.png" />
        Link 1 <em>subline</em>
    </span>
    </a>
    </li>
    <li class="item27 parent root" >
    <a class="daddy item image subtext" href="/xyz/cms/index2.php>
        <span>
        <img src="tmpl/abc_template/images/icons/icon.png" alt="icon2.png" />
        Link 2 <em>subline</em>
        </span>
    </a>
    </li>
    <li class="item27 parent root" >
    <a class="daddy item image subtext" href="/xyz/cms/index3.php>
    <span>
        <img src="templ/abc_template/images/icons/icon.png" alt="icon3.png" />
        Link 3 <em>subline</em>
    </span>
    </a>
    </li>
</div>

I am importing this file into my APP-B by using require_once('../../app-a/menu.html');

File is coming up fine but I am having issues with the image paths. These paths are generated relative to the APP-A and I want to change them so that my APP-B gets them from the right location.

For Example, after I import the file in APP-B,

I want to my APP-B to read add ../../ before the image paths so that these paths:

<img src="tmpl/abc_template/images/icons/icon.png" alt="icon1.png" />
<img src="tmpl/abc_template/images/icons/icon.png" alt="icon2.png" />
<img src="tmpl/abc_template/images/icons/icon.png" alt="icon3.png" />

become like these paths

<img src="../../tmpl/abc_template/images/icons/icon.png" alt="icon1.png" />
<img src="../../tmpl/abc_template/images/icons/icon.png" alt="icon2.png" />
<img src="../../tmpl/abc_template/images/icons/icon.png" alt="icon3.png" />

Kindly help. I am using a template which Supports jQuery. Hence even a jQuery solution will do.

Upvotes: 1

Views: 573

Answers (3)

65Fbef05
65Fbef05

Reputation: 4522

Hmm... I always enjoy jQuery solutions...

$(function() {
    $('.menu img').each(function() {
        img_path = $(this).attr('src');
        $(this).attr({'src': '../../' + img_path});
        });
    });

Tested and works.

Upvotes: 1

Andrew
Andrew

Reputation: 1357

If you just want a quick solution, you will probably have more success reading the menu html file into a string:

$menuString = file_get_contents('../../app-a/menu.html');

Then you can use a regular expression to add your relative path to the beginning of every src tag.

preg_replace('%"tmpl/%is', '"../../tmpl/', $menuString);

This regular expression is not very robust, but it should give you a starting point.

Upvotes: 1

Tony Maro
Tony Maro

Reputation: 1939

Probably the easiest way would simply be create a symbolic link on the server.

ln -s tmp1 ../../tmp1

Assuming it's a Linux / Apache server. Or you could also do an alias define in your Apache configs, or the same thing using .htaccess.

Otherwise you have to start hacking up HTML and recreating it on the fly, which I'm sure there's several libraries to do that with, but likely have their own caveats and security issues.

Upvotes: 1

Related Questions