Skip to content
This repository has been archived by the owner. It is now read-only.
A tool to show and add tags to images
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src Make UMD and ES2015-specific exports Feb 6, 2017
tests
.coveralls.yml
.doclets.yml
.eslintignore Don’t lint dist or tests Jul 23, 2016
.eslintrc.json
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE.txt Add LICENSE Jul 18, 2016
README.md
bower.json
gulpfile.js
karma.conf.js
package-lock.json
package.json

README.md

DEPRECATED - Taggd Build Status Coverage Status Library Size cdnjs

Example of Taggd, showing an image with markings where one of them shows a tooltip

Taggd is a tool that allows you to tag pictures with additional information.

Deprecation Notice

This project isn't actively maintained. This means issues will not be answered and pull requests will not be accepted.

If you are reading this, please consider inheriting the repository. Please let me know by opening an issue.

Installation

Usage

You need to include the stylesheet in the <head>-tag, and the script in the <body>-tag. Both files are in the dist directory.

<link rel="stylesheet" href="/path/to/taggd/dist/taggd.css">

The stylesheet has no default theme, so they will be dull default buttons ready for you to style!

<script src="/path/to/taggd/dist/taggd.js"></script>

Finally, you can initialise taggd:

const image = document.getElementById('my-image');
const options = {};
const tags = [];

const taggd = new Taggd(image, options, tags);

The options parameter is a list of options. The tags parameter is a list of Tags. These are the buttons and popup that will render over your image. You can generate these using the Taggd tags generator.

Note on image styles

Taggd wraps the image the element in an element so the DOM Taggd adds is contained in a single element. Be cautious applying styles on the image that is used for Taggd.

<img src="cat.jpg" alt="A cat playing piano">

Would change into:

<div class="taggd">
  <img src="cat.jpg" alt="A cat playing piano">
  <!-- Elements generated by Taggd go here -->
</div>

If you want to position your element and use Taggd as an enhancement, you can style your image like so:

/*
Apply image styling to the Taggd container as well.
*/
img, .taggd {
  display: block;
  float: left;
  width: 50%;
}

/*
Reset images that are in a Taggd container.
*/
.taggd img {
  display: initial;
  float: initial;
  width: initial;
}

Note on import strategy

If you’re importing Taggd via the ES2015 syntax with a bundler that respects the module field in package.json, Taggd and Tag are exported separately:

import { Taggd, Tag } from 'taggd';

new Taggd(image, options, [
  new Tag(...),
]);

If you include the UMD bundle, Tag is part of the Taggd class:

new Taggd(image, options, [
  new Taggd.Tag(...),
]);

The former allows ES2015+ environments to use imports as intended. The latter prevents having to expose multiple classes.

If you have better ideas to have best of both worlds, please create an issue.

Documentation

For more information, check out the documentation.

License

The code is released under the MIT license.

You can’t perform that action at this time.