Positioning the label in Labeled Graphics

Aug 29, 2020

The Graphic Labeled Block is a nice feature but I rarely use it because there is no way to position the labels precisely and, most of the time, they end up hiding the part of image they're supposed to explain.

When the marker is on the right, part of the image is hidden.

Same thing when the marker is on the left.

It would be nice to have some control over the position and size of the labels.

19 Replies
Jeffrey Roden

Another +1, please. When the thing you want to explain is in the center of the graphic, you have to mess around with the placement so that the caption doesn't cover the thing you're trying to explain. I'm having to keep moving the marker further and further over, so much so that it doesn't even appear to be related to the thing it's explaining.

Being able to override auto placement of the caption -- with an option of above, below, left, and right -- would be great. 

Ken Turner

Still not control over where media is placed within a marker. This was brought up 4 YEARS AGO! Why would you put media above the description especially when the media takes up the entire marker window? How would a learner know to scroll down? Obviously learning designers were not in charge of this. Horrible design and not expecting this to be a priority making this block useless.

Tim St. Clair

Hi Phil, as always love your stuff. I've used Embed (iframe) for the same sort of thing in many cases (mostly svg image maps, e.g. click on a state to see legislation). This way the interaction works within the Rise editor/Review. I then have a script to copy the file into the zip after you publish it, so that it is part of the package. How do you edit your hotspots?

Phil Foss

Hi Tim thanks, the css I used for the hotspot markers is below. 3 styles- the first makes the icon transparent, the second scales down the size of the marker, the third scales the active/clicked marker back up. I have a browser extension that applies the styles while working in Rise, but then I need to add the css to the exported package. Kind of a manual process but I like that tool you mentioned, I wish I knew how to code something like that.

.labeled-graphic-marker__pin i::before {
color:transparent
}

.labeled-graphic-marker__pin {
transform: scale(.3);
}

.labeled-graphic-marker--active .labeled-graphic-marker__pin {
transform: scale(.7);
}