how to set alt or title tag for ImageSurface?

Question

The image generated using the following example Famo.us example: ImageSurface generates an <img> tag without alt or title attributes.

Is there a built-in function that allows adding HTML attributes?

Answer 1

There are currently no built in functions but by looking at the source code I figured out a way to do such a thing. Keep in mind though, I think the better alternative would be to just use a Surface and inject and img tag with all the attributes you want into the content attribute..

Here is what I had to do using the ImageSurface. Note that the function is in a Timeout, and this is only because the image tag needed time to load for me to access it via the Surface..

var Engine       = require("famous/core/Engine");
var Modifier     = require("famous/core/Modifier");
var ImageSurface = require("famous/surfaces/ImageSurface");
var Timer        = require("famous/utilities/Timer")

var mainCtx = Engine.createContext();

var image = new ImageSurface({
    size: [200, 200],

});

image.setContent("content/famous_symbol.svg");

mainCtx.add(new Modifier({origin: [.5, .5]})).add(image);

add_title_alt = function(){
  if (image._currTarget) {
    image._currTarget.alt = "my-alt";
    image._currTarget.title = "my-title";
  } else {
    Timer.setTimeout(add_title_alt,100);
  }
}

Timer.setTimeout(add_title_alt,100);

Again though, to make things less sticky.. I would just do something like this..

image = new Surface({
    content:"<img alt='my-alt' title='my-title' src='content/famous_symbol.svg' />"
})

Hope this helps!