{% extends "lizard_ui/lizardbase.html" %} {% block title %}Image scaling{% endblock %} {% block content %}
Add an "a href" with class "replace-with-image" and it'll get replaced with an image. For example, the logo below. Do a comparison between what you get with "view source" and "firebug, that's the best way to see what happens. A width and height are added automatically, but they're empty by default.
If the "a href" has a direct parent with a "img-use-my-size" class, that parent's height/width is used. The below div is 100px high and 400px wide. Both a height and width parameter are added to the image url. The example only uses a static image, so it doesn't react to the height/width parameters. You can check with firebug, though, that the parameters have been set. (Note that we don't set the height/width attributes on the image as we cannot fully control matplotlib's generated images to the last pixel, strangely).
The image is always fresh, as we also add an always-new timestamp parameter to the image's url.
If you want the image to link to something, add a "data-href-click" attribute with the target url.
If the image fails to load, we remove the "loading..." spinner and display a generic error message:
If you want a customized error message, add a "data-errormsg" attribute on the "a href":