Displays the title attribute of an image directly on the image without editing the image with the help of JavaScript.

Picture of the recipe

Questions answered by this recipe

How can I have an amazing headline displayed directly on an image without changing the image and just using simply Wiki markup?


This recipe will add the ability to display the title-attribute of an image direct on the page. All you have to do is to attach an image with the min width of 500 px.


  • download from source or via git git clone
  • unzip everything
  • make the following copy-tasks:
    • put headlineimage.php in your cookbook directory (cp pmwiki-headlineimage-recipe/cookbook/headlineimage.php cookbook/)
    • put the headlineimage folder in your public directory (normally pub/) (cp -R pmwiki-headlineimage-recipe/headlineimage/ pub/)
  • add include_once("$FarmD/cookbook/headlineimage.php"); in your config.php
  • make sure to set the $PubDirUrl' variable in your config.php and put it before including the recipe


  • use the normal syntax for Attaching an image, but you have to use a special environment:
  • here is an full example:%headline%Attach:advent.jpg"Headline of the week!"%%
  • if you have a longer headline, then you must add the break-line-tag <br />, e.g. %headline%Attach:advent.jpg"Headline part one<br />and part two"%%
  • here is the code of the demo page: %headline, width=500px%Attach:vierter_advent.jpg"Headline of the week: It's time for christmas - hope you have got all presents"%%


  • I got the idea and code from css tricks.
  • The recipe doesn't work with Mini (if you use it).


See HeadlineImage-Talk - your comments are welcome there!


Feature request, bugs, questions, and so on can be send to If you enjoy the script please leave your comment under Headline Users.


This software is licensed under the MIT license.

© 2011-2017 Matthias Guenther

/ vim: set ts=2 sw=2 textwidth=120: /