connected-web / html-asset-generator

A utility that converts HTML and CSS templates into rendered Image assets, and can also produce Text and JSON assets.
2 stars 0 forks source link

Generate a specific template/asset #3

Closed playground closed 8 years ago

playground commented 8 years ago

Is it possible to only generate asset for a specific template?

johnbeech commented 8 years ago

You can pass in a glob string, or a specific file name, for example: hag generate specific-instruction.json - does that do what you need?

playground commented 8 years ago

yes, thanks. Will let you know how it goes once I start playing with it.

playground commented 8 years ago

One more question, what about referencing external image file as a background image from the template?

Markavian commented 8 years ago

To bring images into your HTML templates you can either put them in data or templates and refer to them using an absolute relative path, e.g./data/images/myimage.png or /templates/images/myimage.png.

Here's a worked example:

The false-contact.json data:

{
  "title": "False Contact",
  "instructions": ["As you approach the location of the blip, your scanner stops making noise. Must have been a false positive."],
  "background": "/data/images/false-contact.png",
  "theme": {
      "primaryCardColour": "#002C67",
      "secondaryCardColour": "#333333"
  },
  "asset-type": "contact",
  "asset-id": "false-contact"
}

Is fed to event-contact.html template by the instruction in card-contacts.json:

{
    "asset": "images/cards/contact/false-contact.png",
    "template": "/cards/event-contact.html",
    "renderer": {
        "$ref": "data/renderer/standard-card.json"
    },
    "data": {
        "$ref": "data/contacts/false-contact.json"
    }
}

When rendering, background-image: url('{{background}}'); in event-contact.html is replaced with /data/images/false-contact.png, which is served up from the local file system via hag generate.

playground commented 8 years ago

Thanks, this is very helpful. Can you point me to the documentation?

johnbeech commented 8 years ago

Will have to write some documentation first; have raised #4 - watch that space.

playground commented 8 years ago

@johnbeech is it possible to pass in string of instructions instead of the instructions file name in the command? My data is dynamic, so want to be able to load /instructions/test.json into memory and set data.$ref such as this: Can this be supported?

test = [{ "asset": "test.png", "template": "/test.hbs", "renderer": { "type": "webshot", "size": { "width": 400, "height": 500 } }, "data": { "$ref": "data/test.json" } }]

test[0].data.$ref = "{some dynamic data};

hag generate [{"asset":"test.png","template":"/test.hbs","renderer":{"type":"webshot","size":{"width":400,"height":500}},"data":{"$ref":{"title":"Current 天氣 你好","backgound":"/templates/images/test.jpg","data":{"location":"亚特兰大, GA","icon":"/templates/images/wxicons/test.png","current":"82°F","phrase":"CLEAR","hi":"98","lo":"69"},"theme":{"primaryCardColour":"#002C67","secondaryCardColour":"#333333","fontColor":"#999"},"author":"someone"}}}]