Skip to main content

Adds Facebook-like tags (or Flickr-like notes) to images

Project description


Adds a ‘Tags’ tab in ATContentTypes with non-empty image fields (News Item, Image) to allow content owners to add Text/URL tags (Facebook-like tags or Flickr-like notes) anchored to a certain position of the image.

Tagged image can then be displayed in:
  • News Items

  • Images

  • Fullscreen images

  • any other template that you want

by means of:
  • custom templates provided with this package, or

  • replacement of images via AJAX.

Showing tagged images with AJAX

A special class for images is added to TinyMCE and kupu settings. If an image with this special class “Show tags (imagetags-show)” is inserted in a text field it will be automatically replaced via AJAX to display not only the tags but also a “Tag this picture” link (available only for content owner).

This behavior can be disabled via “Image tags settings” configlet in control panel.

Showing tagged images with <iframes />

‘Tags’ tab displays a list of several pieces of HTML code to embed the tagged image inside an <iframe /> element. HTML code can then be inserted inside a text field to display the tagged image.

This behavior can be disabled via “Image tags settings” configlet in control panel.



  • Degrades gracefully in non-JavaScript browsers

  • All JavaScript interaction done with jQuery and jQueryUI (dialogs, draggables, etc.)

  • i18n support (English, French, Dutch and Spanish translations)

  • Tested in Plone 4.0.3 and Plone 3.3.5

  • Collage view layout provided with collective.collage.imagetags

Browser support

  • Linux: Firefox 3.6, Google Chrome 5.0

  • Windows: Firefox 3.6, Google Chrome 5.0, Internet Explorer 7, Internet Explorer 8

Known issues

  • Content types with more than one image field are not fully supported. The only missing part is to provide a way of changing the tagging image in @@imagetags-manage browser view.


  • Add collective.imagetags to the list of eggs to install, e.g.:

    eggs =
  • Tell the plone.recipe.zope2instance recipe to install a ZCML slug:

    recipe = plone.recipe.zope2instance
    zcml =
  • Re-run buildout, e.g. with:

    $ ./bin/buildout

You can skip the ZCML slug if you are using Plone 3.3 or if you are going to explicitly include the package from another package’s configure.zcml file.

Plone 3 installation

  • Add this line to the extends parameter in main buildout section:



If you already had collective.imagetags installed prior to 1.5, you’ll need to run an upgrade step to migrate old style tag ids. Go to:

  1. ZMI

  2. portal_setup

  3. Upgrades

  4. Select collective.imagetags:default and press “Choose Profile”

  5. Run required upgrade steps



  • Marcos F. Romero <marcos.romero {at} inter-cultura {dot} com> (developer)

  • Juan Pablo Gimenez <jpg {at} rcom {dot} com {dot} ar> (advisor)

  • Maurits van Rees <m.van.rees {at} zestsoftware {dot} nl> (contributor)

  • Fred van Dijk <f.van.dijk {at} zestsoftware {dot} nl> (contributor)

  • JeanMichel Francois <toutpt {at} makina-corpus {dot} org> (contributor)


  • English (en): Marcos F. Romero

  • French (fr): JeanMichel Francois

  • Dutch (nl): Fred van Dijk

  • Spanish (es): Marcos F. Romero


1.5 (2011-05-11)

  • Remove simplejson dependency (add it in extra require for plone3 compatibility) [toutpt]

  • Update provided buildout to use plone4. old one has been renamed and updated to test-plone3.cfg [toutpt]

  • Add french translation [toutpt]

  • Moved tag management to new adapter [marcosfromero]

  • Changed tag ids with hyphens instead of dots [marcosfromero]

  • Minor improvement in js_labels to avoid translation errors [marcosfromero]

  • Tweaks to improve tag rendering and managing [marcosfromero]

  • Important: Upgrade step to migrate tag ids [marcosfromero]

1.4.6 (2011-04-26)

  • Bug fix in AJAX image replacement and ifrmaes that made no image being displayed at all.

  • Bug fix in improved templates that used to duplicate html and body tags.

  • Better embedding code for iframes.

  • Bug fix in Plone 3 when unprotecting formUnload.

  • CSS tweaks to provide tag hints when entering the tagged area and to re-layout tag labels.

1.4.5 (2011-04-24)

1.4.4 (2011-01-24)

  • Added missing Spanish translations

  • Dropped ajax-form to use regular form improved with jQuery/jQueryUI

  • Moved ImageTagsLabels from old ajax-form to a new browser view

  • Minor bug fixes in JS for Plone 3

  • Improved decimal separator handling in JavaScript (see change 1.4.2)

  • Test updated according to above changes

  • Tested in Plone 4.0.3

1.4.3 (2011-01-12)

  • Fixed JavaScript to also correctly create a tag the second time [maurits]

  • Added internationalization to some missing terms [maurits]

  • Dutch translation [fvandijk]

1.4.2 (2011-01-10)

  • Replace JavaScript (x,y) decimal separator with server expected decimal separator (thanks to maurits)

1.4.1 (2011-01-06)

  • Added imagetags-show class available at paragraph_styles in kupu

  • Added actionicons.xml for Plone 3

1.4 (2010-12-27)

  • Backported to Plone 3

  • Tested in Plone 4.0.2 and Plone 3.3.5

  • Added known good set for Plone 3 installation (read INSTALL.txt)

1.3.3 (2010-11-12)

  • UI improvements when tagging images in @@imagetags-manage

1.3.2 (2010-09-21)

  • Added simplejson dependency, which is used to automatically create JSON from Python objects (thanks to kojiro)

  • Change http headers for JSON responses: added content-length, changed mimetype for application/json (thanks to MacYET3)

  • Test updated according to above changes

  • Tested in Plone 4.0

1.3.1 (2010-07-27)

  • Updated documentation

  • Bug fix in po files and incorrect translation in AJAX form (

1.3 (2010-07-25)

1.2 (2010-07-20)

  • Show tags sorted by title field

  • Added get_sorted_tags to browser/

  • Moved available_sizes, tag_box, tag_title and portal_url from browser/ to browser/ (more sensible)

  • Completed browser.interfaces.IImageTagsImage interface

1.1 (2010-07-16)

  • i18n support

  • Spanish translation

1.0 (2010-07-13)

  • Initial release

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution (103.0 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page