« Getting started with Micrio
Adding markers to your image
Spice up your image by adding text and images
1. Find the image in your dashboard
Click to open the editor
2. Open the marker editor
By clicking "MARKERS" at the top
3. Add a marker
By using the "Create New Marker" button on the bottom right.
Under "Main" you can add text, photos, videos, and even embeds from YouTube or Vimeo.
Under "Settings" you can add a custom image for your marker icon and select additional settings such as whether you want the popup to open.
Under "Custom" you can add custom CSS to style the popup and the markers as you wish
4. Preview & Publish
Click Preview to check out your image with the markers. And Publish to share it with the world.
How to: edit a marker
To edit a marker, first select the marker on your image, and the editable details will appear on the right.
Changing the view Rectangle
The dark view rectangle is the viewport the camera will fly to when the user has opened this marker. This should contain the part of the image that has the detail that the marker is about.
To change this rectangle, simply click to select it, after which you can move and resize it to your needs.
Hint: Make sure the marker main icon is inside this rectangle, otherwise users won't see the (full) popup window when they have opened the marker. It's always a good idea to place the marker itself in the top left of the rectangle, ensuring the popups are displayed fully on many possible different screen sizes.
Markers are incredibly versatile objects. By default, they simply show a popup that has information. But you can do much more with them -- they can also be used as internal links to other Micrio images, or to activate custom behavior inside your own implementation.
- How to use custom CSS styling for markers
- How to use custom JS to change marker behavior