• You are losing out on amazing benefits because you are not a member. Join for free. Register now.
  • Big Two-Day Giveaway - Win an Amazon Kindle, a Mystery Gadget and Branded Gear. Enter Here.
  • Test your broadband speed and win prizes worth R5,000. Enter here.

Tool to convert image links to embedded html images?

Johnatan56

Honorary Master
Joined
Aug 23, 2013
Messages
20,342
#21
Thanks guys, right click on virtually any jpeg you find on the Internet, select "copy link source" or similar and you will have a perfect example of a vanilla image link that will need the html tags I posted in the op.
Just a quick thing I made in 20 min, spent most of the time freshing up on Java lol.
I haven't put in any tool-tips/help function or error messages for empty link/clip tray.

I might make it later so that you can change it to copy-pasting a multitude of links at once instead of singly, but yeah.

Image to link.png
Image to link 2.png

Note Ctrl-Q to quit and Ctrl-D to set window to always be on top (should make copy-pasting easier).

I still want to add resizing as well.
http://www62.zippyshare.com/v/TfldbgwK/file.html

EDIT: Source code https://pastebin.com/BzcDTPns
 
Last edited:

John_Phoenix

Well-Known Member
Joined
Jul 8, 2017
Messages
141
#22
HTML Based Solution

Its dangerous to go alone, take this...

Save this code out as a .html file and paste your list of images on the left hand side.
Paste in as many images as you like, I tested with 1000...

Layout:
Left Panel: input (paste your list here)
Right Panel: Image tags that you can copy paste.
Bottom Panel: Image preview, so you can snipe broken images.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Image Processor</title>
  <style>
    body{margin:0;padding:0;font-family: monospace;}
    section:after{content:'';display:table;clear:both;}
    .col1,.col2{float:left;width:100%;}
    .col1{width:50%}#input{width:100%}
    #input,#output{
      height:400px;box-sizing:border-box;
      overflow:auto;
      padding:1em;border:1px solid #ccc;resize:none;
    }
    img{max-width:100%;}
    #preview img{width:11.5%;margin:1% 0.5%;}
  </style>
</head>
<body>
  <section>
    <div class="col1"><textarea id="input" placeholder="Paste image list here"></textarea></div>
    <div class="col1" id="output">Image codes will display here</div>
    <div class="col2" id="preview"></div>
  </section>
  <script>
    window.addEventListener('load',function(){
      var input = document.getElementById('input');
      var output = document.getElementById('output');
      var preview = document.getElementById('preview');

      input.addEventListener('input',function(e){
        if(e.target.value.split(/\n/).length > 0){
          preview.innerHTML = '';
          output.innerHTML = '';
          e.target.value.split(/\n/).forEach(function(el) {
            var img = document.createElement('img');
            img.src = el;
            output.textContent += img.outerHTML;
            img.title = el;
            preview.appendChild(img);
          }, this);
        }
      },{passive:true});
    },{passive:true});
  </script>
</body>
</html>
 

Johnatan56

Honorary Master
Joined
Aug 23, 2013
Messages
20,342
#23
Its dangerous to go alone, take this...

Save this code out as a .html file and paste your list of images on the left hand side.
Paste in as many images as you like, I tested with 1000...

Layout:
Left Panel: input (paste your list here)
Right Panel: Image tags that you can copy paste.
Bottom Panel: Image preview, so you can snipe broken images.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Image Processor</title>
  <style>
    body{margin:0;padding:0;font-family: monospace;}
    section:after{content:'';display:table;clear:both;}
    .col1,.col2{float:left;width:100%;}
    .col1{width:50%}#input{width:100%}
    #input,#output{
      height:400px;box-sizing:border-box;
      overflow:auto;
      padding:1em;border:1px solid #ccc;resize:none;
    }
    img{max-width:100%;}
    #preview img{width:11.5%;margin:1% 0.5%;}
  </style>
</head>
<body>
  <section>
    <div class="col1"><textarea id="input" placeholder="Paste image list here"></textarea></div>
    <div class="col1" id="output">Image codes will display here</div>
    <div class="col2" id="preview"></div>
  </section>
  <script>
    window.addEventListener('load',function(){
      var input = document.getElementById('input');
      var output = document.getElementById('output');
      var preview = document.getElementById('preview');

      input.addEventListener('input',function(e){
        if(e.target.value.split(/\n/).length > 0){
          preview.innerHTML = '';
          output.innerHTML = '';
          e.target.value.split(/\n/).forEach(function(el) {
            var img = document.createElement('img');
            img.src = el;
            output.textContent += img.outerHTML;
            img.title = el;
            preview.appendChild(img);
          }, this);
        }
      },{passive:true});
    },{passive:true});
  </script>
</body>
</html>
Nice solution
 

airborne

Executive Member
Joined
Jul 13, 2007
Messages
7,864
#26
Just a quick thing I made in 20 min, spent most of the time freshing up on Java lol.
I haven't put in any tool-tips/help function or error messages for empty link/clip tray.

I might make it later so that you can change it to copy-pasting a multitude of links at once instead of singly, but yeah.

View attachment 448150
View attachment 448152

Note Ctrl-Q to quit and Ctrl-D to set window to always be on top (should make copy-pasting easier).

I still want to add resizing as well.
http://www62.zippyshare.com/v/TfldbgwK/file.html

EDIT: Source code https://pastebin.com/BzcDTPns
Thanks man nicely done, that looks promising but I'd need to be able to paste in bulk links, one link per line.

Its dangerous to go alone, take this...

Save this code out as a .html file and paste your list of images on the left hand side.
Paste in as many images as you like, I tested with 1000...

Layout:
Left Panel: input (paste your list here)
Right Panel: Image tags that you can copy paste.
Bottom Panel: Image preview, so you can snipe broken images.

Code:
  Image Processor
  
    body{margin:0;padding:0;font-family: monospace;}
    section:after{content:'';display:table;clear:both;}
    .col1,.col2{float:left;width:100%;}
    .col1{width:50%}#input{width:100%}
    #input,#output{
      height:400px;box-sizing:border-box;
      overflow:auto;
      padding:1em;border:1px solid #ccc;resize:none;
    }
    img{max-width:100%;}
    #preview img{width:11.5%;margin:1% 0.5%;}
  


  
    
    Image codes will display here
    
  
  
    window.addEventListener('load',function(){
      var input = document.getElementById('input');
      var output = document.getElementById('output');
      var preview = document.getElementById('preview');

      input.addEventListener('input',function(e){
        if(e.target.value.split(/\n/).length > 0){
          preview.innerHTML = '';
          output.innerHTML = '';
          e.target.value.split(/\n/).forEach(function(el) {
            var img = document.createElement('img');
            img.src = el;
            output.textContent += img.outerHTML;
            img.title = el;
            preview.appendChild(img);
          }, this);
        }
      },{passive:true});
    },{passive:true});
Do I save the Html file with notepad?

How exactly do I paste in my image links and get out the resulting links with Html tags?

Apologies I'm a n00b :(
 

Hamish McPanji

Honorary Master
Joined
Oct 29, 2009
Messages
34,790
#27
Thanks man nicely done, that looks promising but I'd need to be able to paste in bulk links, one link per line.



Do I save the Html file with notepad?

How exactly do I paste in my image links and get out the resulting links with Html tags?

Apologies I'm a n00b :(
Make sure you save it as filename.html , and not filename.html.txt
 

Johnatan56

Honorary Master
Joined
Aug 23, 2013
Messages
20,342
#28
Thanks man nicely done, that looks promising but I'd need to be able to paste in bulk links, one link per line.



Do I save the Html file with notepad?

How exactly do I paste in my image links and get out the resulting links with Html tags?

Apologies I'm a n00b :(
I uploaded it to bitballoon: http://chemist-edmund-80262.bitballoon.com/
Just right-click and save as, select the html option (should be default).

I liked his solution, so I tried to make a similar non-html version. UI wise, it's lacking quite a bit (especially resizing and no SVG support (important for logos)), but it works. I might actually upload it to my Github and make it a side project. I added the Separator option, I remember having issues importing on my friends Mac due to how it handles new line.
(Hit Ctrl-L to swap to list window, ctrl-l to get back. Otherwise use File > List View)
 
Last edited:

airborne

Executive Member
Joined
Jul 13, 2007
Messages
7,864
#30
I uploaded it to bitballoon: http://chemist-edmund-80262.bitballoon.com/
Just right-click and save as, select the html option (should be default).

I liked his solution, so I tried to make a similar non-html version. UI wise, it's lacking quite a bit (especially resizing and no SVG support (important for logos)), but it works. I might actually upload it to my Github and make it a side project. I added the Separator option, I remember having issues importing on my friends Mac due to how it handles new line.
(Hit Ctrl-L to swap to list window, ctrl-l to get back. Otherwise use File > List View)
YEAH YEAH YEAH!!
Thanks Johnatan, that works perfectly :)
 

SBSP

Senior Member
Joined
Sep 7, 2007
Messages
622
#31
You could have just used excel.

Put your list of links in Column A and put this in column B1
Code:
="<img src=""" & A1&""" />"
then just drag it all the way down :)
 

airborne

Executive Member
Joined
Jul 13, 2007
Messages
7,864
#32
I uploaded it to bitballoon: http://chemist-edmund-80262.bitballoon.com/
Just right-click and save as, select the html option (should be default).

I liked his solution, so I tried to make a similar non-html version. UI wise, it's lacking quite a bit (especially resizing and no SVG support (important for logos)), but it works. I might actually upload it to my Github and make it a side project. I added the Separator option, I remember having issues importing on my friends Mac due to how it handles new line.
(Hit Ctrl-L to swap to list window, ctrl-l to get back. Otherwise use File > List View)
Hi Johnatan, I've been using your great solution since you posted it, a big time save (thanks alot!) and I picked up a snag in my workflow and was wondering if you or anyone else that knows how could make a little tweak - on the output add a line(empty line) between each image, so that when I paste the code into the destination page each image is separated by one line and are not immediately below each other.

I have attached the original code to this post with a .txt extension, it will only work as intended once you charge the extension to .html
 

Attachments

scudsucker

Expert Member
Joined
Oct 16, 2006
Messages
4,074
#33
If you are copy/pasting from "output", change line 41 to

Code:
output.textContent += "<p> " + img.outerHTML + "</p>"
In the "preview" column, this is handled by CSS; if you want that as well, then change line 19 to something like this:

Code:
#preview img{width:11.5%;margin:0 0.5% 15 0.5%;}
 
Last edited:

airborne

Executive Member
Joined
Jul 13, 2007
Messages
7,864
#34
If you are copy/pasting from "output", change line 41 to

Code:
output.textContent += "<p> " + img.outerHTML + "</p>"
In the "preview" column, this is handled by CSS; if you want that as well, then change line 19 to something like this:

Code:
#preview img{width:11.5%;margin:0 0.5% 15 0.5%;}
Thanks scudsucker, your change to the output worked but not the preview, the preview still doesn't have a line added between the files. Ideally I'd like the preview to be a single vertical column of the images each with a line separating them, is that possible?
 
Top