Forum Discussion

JCBlanchard's avatar
JCBlanchard
Community Member
6 years ago

Positioning the label in Labeled Graphics

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 ...
rise 360
PhilFoss's avatar
PhilFoss
Community Member
3 years ago

I'd love to get feedback on this theme component for labeled graphics- the customizations include smaller markers, darkmode interface with the semi-transparent popovers flush to the right in a fixed area. Depending on screen size, the popovers barely interfere with the graphic.

  • Tim_'s avatar
    Tim_
    Community Member
    3 years ago

    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?

    • PhilFoss's avatar
      PhilFoss
      Community Member
      3 years ago

      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);
      }