ImageMarker

Freely positioned markers inside a wrapper, preferably with an image as background. Shows a tooltip on mouseover/click/touch.
Markers are draggable while editing, tooltips are WYSIWYG editable text/HTML.

get ImageMarker 1.0b1

Installation:
Unpack the ZIP into your /addons directory and install it via
Admin Toolbox → Plugins → Manage → Available → Install

 

Cool addons from the south

 

Where great CMS come from!

 

Nice plugins and
themes here, too!

 

You’re here right now!

 

Media Department

 

Our nothern outpost

 

QA Department

 

Essential addons
from France

 

Long time no see ;-(

Found a bug? Have suggestions or feature requests?

Join the discussion in the Typesetter CMS Forum

Marker Sections

Once installed you will have 2 new Content Types (Sections) to be added to the content: A) the sole ImageMarker and B) a Section Combo preset consisting of Wrapper +  Background Image + ImageMarker. ImageMarker sections are in fact pimped-up generic gpEasy/Typesetter Editable Text sections. They consist of the Marker Icon and a Tooltip container.  Once you start editing an ImageMarker, you will get the familiar WYSIWYG editor (CK Editor). Since we’re  dealing basically with generic Editable Text sections, the tooltip may contain any content. Cool? cool!

The toolip will show/hide upon mouse hover, click and mobile touch events.

Positioning

By default, a new ImageMarker is placed in the center of the surrounding wrapper. While editing, the Marker becomes draggable, so you can position it freely using the Marker Icon as the drag handle. The position is saved along with the tooltip content .

ImageMarkers are designed to work in Responsive Designs. To accomplish this, marker positions are converted to percent values upon dragging. The Image Section inside the Wrapper, which acts as the background, will scale to 100% width while keeping it’s proportional height, thereby defining the height of the wrapper. Sounds complicated? Well, it is not—just try it.

Tooltip Positions

Tooltips appear at different positions relative to the Marker Icon ⇒ as combinations of below, above, left and right. The tooltip position is set automatically when you drop a marker. It will align below+left when the marker is in the top left quarter of the wrapper, below+right in the top right quarter and above+left/right in the lower quarters accordingly.
This automatism will prevent tooltips to go ‘off-canvas’ in most situations, at least with larger wrappers and moderate tooltip sizes.

Currently you may not manually override this mechanism but I will most likely implement something in the final version or later.

 

 

I’m leaving this picture!
Will hopefully get me this
stupid red disc off my head.

 



I urgently need some HTML5.
Where was that shop again?

 

 

Hey, I'm not a dustbin!
I’m a suitcase.
Suiiitcaaase – got it?

… umm… and no – you currently cannot change colors and shapes of the marker icons and tooltips unless you edit or overrule the plugin CSS. I will probably add some kind of theme/skin selection but I'm uncertain how to do it best. Stay tuned ;^)
 

Found a bug? Have suggestions or feature requests?

Join the discussion in the Typesetter CMS Forum