Photoshop Question posted in
The official user guide can be found here.

Automatically generate html code – Photoshop

I am not sure how to frame the title, hope you guys will understand my question. I am looking for something easy alternative instead of manually replacing text in the HTML code of a banner.

For example- Here’s the code

<a class="fragment" href="https://applink" target="_blank">
    <div>
    <img class="imgbor" src ="https://static.geenapp.com/appromo/1250-100.png" alt="some description"/> 
    <span class="styleraise">App Name</span><span class="styleraise1">Price 0.99$</span>
    <div class="textpara">
        
App description</div>
</div>
</a>

I am looking for something like this (I have created this in photoshop)
enter image description here

So whenever I fill some text in the boxes, it changes in the HTML code. I need to create 100’s of these banners and it would be a lot easy this way.
Maybe any online service or script that could help me in achieving this.

Tags:

3

Answers


  1. 0

    I suggest you to build a little web app with this tiny tool in the backend:
    https://docs.python.org/2/library/htmlparser.html

    Basically, what you’d want to do is updating the wanted values accordingly and then save the file stream to a new file. (You can append an incremental id, doing this you’ll get “file-1.html”, “file-2.html” and so on)

    Login or Signup to reply.
  2. 0

    UPDATE-
    JSFiddle

    this is a great use-case for React! Visit their docs and follow along the tutorial

    React is especially effective when you want to create thousands of similar looking Components.

    For e.g. your code would look like this-

    class Fragment extends React.Component {
  render() {
    return (
      <a class="fragment" href="https://applink" target="_blank">
        <div>
          <img class="imgbor" src={this.props.src} alt="some description" /> 
          <span class="styleraise">App Name</span>
          <span class="styleraise1">Price 0.99$</span>
          <div class="textpara">App description</div>
        </div>
      </a>
    );
  }
}

    You can repeat this component in a parent component for as many times as you want. React is great for reusability.

    Login or Signup to reply.
  3. 0

    Here is simple HTML form, which reacts to change in each input and generates your desired html:

    $(function() {
	$("input[type=text]").on("input", function() {
  	var app = $("[name=app]").val();
    var desc = $("[name=desc]").val();
    var imglink = $("[name=imglink]").val();
    var applink = $("[name=applink]").val();
    var price = $("[name=price]").val();
    $("#output").get(0).innerHTML = $('<div/>').text('<a class="fragment" href="' + applink + '" target="_blank"> 
        <div> 
          <img class="imgbor" src="' + imglink + '" alt="some description" /> 
          <span class="styleraise">' + app + '</span> 
          <span class="styleraise1">' + price + '</span> 
          <div class="textpara">' + desc + '</div> 
        </div> 
      </a>').html();
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
App name<br>
<input name="app" type="text"/><br>

App description<br>
<input name="desc" type="text"/><br>

Image link<br>
<input name="imglink" type="text"/><br>

App  link<br>
<input name="applink" type="text"/><br>

Price<br>
<input name="price" type="text"/><br>

<code id="output"></code>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search