Convert image absolute/relative src link with full URL

[Dominique Da Silva]

Is it possible to convert image src link without hostname with the full URL? The image doesn't display on aggregator.

I have an image like this : <img src="/root/to/my/image.jpg" /> and I want to convert with <img src="https://my.blog.tld/root/to/my/image.jpg" />

I have temporarily modified the script to add the hostname...

ejs.filters.cdata = function(str){
  str = str.replace(/src="+\//g, 'src="https://my.blog.tld/');
  return str ? '<![CDATA[' + str + ']]>' : '';
};

Thanks,

[Xuanwo]

May be we can add it as an option.

[leesei]

@atika Are you intending to replace all links within CDATA?
It could be a boolean option abs_link that replace 'src="/' with 'src="url.resolve(config.url, config.root)'.
Please verify and submit PR.

[Dominique Da Silva]

@leesei I think that in RSS links can't be relative, if you have not an image with an absolute link it doesn't works on aggregator.

I tried to modify the script but I don't know the best way to achieve this, it is a little complicate for me.

// generator.js
var url = require('url');

ejs.filters.absoluteUrls = function(content, blog_url){
  str = content.replace(/(src|href)="(\S+)"/g, "$1=\""+url.resolve(blog_url, "$2")+"\"");
  return str;
};

// atom.ejs
<content type="html"><%-: post.content | absoluteUrls:url | cdata %></content>

The problem here is that outside the replace function, url.resolve works great, but inside as this it append the two variables instead of resolving them:

<p>
<img src="https://domain.tld/../images/relativeimages.png" alt="TEST IMAGE RELATIVE"><br>
<a href="https://domain.tld/http://monsite.com/toto.html" target="_blank" rel="external">TEST EXTERNAL LINK</a><br>
<a href="https://domain.tld/../2009/monsite.html">TEST EXTERNAL LINK</a></p>

[Tomo Bacinger]

@atika did you maybe solve this problem in the meantime?

[Dominique Da Silva]

@bacinger Not really, I tried but in the meantime this repo has been updated to use another system (Nunjucks). I left fell. You can try but ...

• Clone this fork anywhere: https://github.com/atika/hexo-generator-feed
• A this to your package.json: "hexo-generator-feed": "file:///Users/USERNAME/PATH/TO/hexo-generator-feed",
• npm update

[leesei]

@atika I agree that links should be absolute by default.

BTW, you can use GitHub repo directly in package.json.
http://stackoverflow.com/a/19351036/665507

[Thomas Parisot]

Maybe exposing a filter could help?

hexo.extend.filter.register('plugin_generator_feed.item', post => {
  post.content = post.content.replace(...);

  return post;
});

AMA @atika you should create this filter at your blog level because you want to benefit from this for other social cards such as Open Graph images and Twitter Cards images metadata. The RSS feed would benefit de facto from the native filter.

In any case, I would be interested by exposing such a filter in order to move a cover image to the article content – at the moment this is something I do via article layouts + front-matter metadata.

[netop://ウエハ]

@atika Your fork works wonderfully, thanks for creating it!

[Jon Gallant]

@atika - Do you have plans to PR this into upstream? Jon

[Dominique Da Silva]

@jongio Not really, my fork is 3 years old, 40 commits behind, and its was just a temporary workaround I found when I waiting a reply for someone who could know the framework better than me. If you prompt this is that it is not yet resolved...

[oli maia]

I would love to have this available... anyone with enough programming skills interested, maybe?