How it works...

If we go to the root URL for the quotes app, we should see the list of current quotes, with thumbnail images and the first four words of the quote, both linked to the detail page. Clicking through to the detail, we should see the full-size image masked by our watermark, similar to this:

Let's examine how this was done. In the detail template, the src attribute for the <img> tag uses the inspirational quote's photo URL, as usual, but with the watermark filter applied. Within this filter is where all of the magic happens, as dictated by the options passed to it through its string argument, as copied here:

"Basic Two-Tone,opacity=35,tile=1,position=BL,rotation=30"

Let's examine each of these options to see how it was done:

  • First is the required name of the watermark, as was entered into the administration area; Basic Two-Tone in this case. This tells the filter what watermark image to apply.
  • Additional options are separated by commas, all of which have defaults, and can come in any order or be omitted entirely. The first of these optional configurations used here sets the opacity of the applied watermark to 35%.
  • We want the watermark to be repeated across the entire image, so we tell the filter to tile it by setting the associated option to 1 (True) next.
  • To have the best result, the starting position for each watermark may differ, and may be set to any of the corners (BL for lower-left, TR for upper-right, and so on), centered (C), or at a specific point using percentages or pixels (for example, 50%x100 to center horizontally 100 px below the top edge).
  • Finally, the original watermark here is rotated by 30 degrees to give it a slightly more active effect.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.207.129