1

I want to take any url on a page, mainly for the sake of fixing images that aren't displaying, and change it from relative to absolute, if it's relative.

Example:

From <img src="/folder/folder/image.jpg" />

To <img src="http://<?php echo get_option('domain'); ?>/folder/folder/image.jpg" />

Since the domain portion I'll be inserting is a PHP snippet, whichever approach is best for that is more so desired. Thanks.

user1729506
  • 975
  • 4
  • 15
  • 28
  • 2
    The HMTL `` tag might be useful, but research it first: http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag – showdev Jun 04 '13 at 19:33
  • 1
    Use php. Create a variable or constant like DOC_URL which contains the absolute path, then use it throughout your application. – David Sherret Jun 04 '13 at 19:42

4 Answers4

4

You can just get all the img elements and change the src to document.url + img.src. Should be pretty simple, in JavaScript. I think the bigger question here is why are you having trouble with the relative URL? If you want to load images dynamically from a different domain or something like that then yes that is fine.

If you need to do this on page load then you are better off building the url server side in whatever you are using to render your html.

More information and code examples on how to do it in JS here. Getting an absolute URL from a relative one. (IE6 issue)

Community
  • 1
  • 1
recneps
  • 1,285
  • 5
  • 16
  • 27
  • Would this do a bunch of requests for the dead links before your javascript has time to change the image sources? – David Sherret Jun 04 '13 at 19:35
  • @dhsto No using javascript to do this would not be good if you are trying to fix dead links on page load. Because the browser has to parse the page before the JavaScript can edit those elements. However if you are trying to get the complete URL to images that you are loading in via JavaScript or doing it for each image load then yes I think JavaScript is a very good way to go. – recneps Jun 04 '13 at 19:52
  • That's what I thought as well. So Javascript would not be a very good solution for this problem because he/she is trying to fix image sources that are dead. Javascript would only be good to use in this case if they were generating the content dynamically with javascript or setting the source with javascript from the start... otherwise the browser makes a bunch of dead requests with each page load. – David Sherret Jun 04 '13 at 20:06
1

Using jquery:

$(function () {
    $('img').each(function () {
        if (this.src.indexOf('http://') === -1) this.src = "http://mysite.com" + this.src;
    });
});
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • Almost the same solution I posted. The challenge I think would be what if the image source didn't use http:// but was https://. There could be multiple ways to have the image source that could result in changing sources that would break the link instead of fixing them. Perhaps a better thing to test for is if the string starts with /. – AxGryndr Jun 05 '13 at 18:03
0

With JQuery you could use the .attr() to change the src string. Without an ID attribute it could become difficult trying to capture the correct img tags. You would have to check each src string for "www." to see if there is already a site reference before appending the current site.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/lib/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("img").each(function(){
      if($(this).prop("src").toLowerCase().indexof("www.") != -1){
           $(this).attr('src', document.domain + $(this).prop("src"));
      }
 )};
 </script>

I think the hardest part is identifying which img tags need to be changed.

AxGryndr
  • 2,274
  • 2
  • 22
  • 45
0

use a regular expression for this:

$text = '<img src="abc" /> asiodn <img src="dev" />'; //e.g.
$regex = '/<img src="([^https?:\/\/][^"]*)" \/>/';
$result = preg_replace($regex, '<img src="http://' . get_option('domain') . '$1" />', $text);

this should fix all relative urls in image src

http://codepad.viper-7.com/TsHGbE

luk2302
  • 55,258
  • 23
  • 97
  • 137