{% extends "lizard_ui/lizardbase.html" %}

{% block title %}Image scaling{% endblock %}

{% block content %}
<div id="textual">
  <h1>Automatic image scaling</h1>
  <p>
    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.
  </p>
  <div>
    <a href="{{ STATIC_URL }}lizard_ui/logo.png"
       class="replace-with-image">image</a>
  </div>

  <p>
    If the "a href" has a <b>direct parent</b> 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).
  </p>
  <div style="height: 100px; width: 400px;"
       class="img-use-my-width img-use-my-size">
    <a href="{{ STATIC_URL }}lizard_ui/logo.png"
       class="replace-with-image">image</a>
  </div>

  <p>
    The image is always fresh, as we also add an always-new timestamp
    parameter to the image's url.
  </p>

</div>

{% endblock %}