Image map with widgets for popup windows

Adis A asked on January 26, 2017 15:34

[Sorry for posting same question multiple times, there were some error when first question was submitted]

Hello to everyone.

I need to make the following page (example is shown on the image bellow):

Kentico Image Map

Of course, this is an image map and creating image map is simple. But the content of the pop-up windows should be edited by the user in the CMS and this pop-up windows should be Kentico widget (fields: headline, text and image).

Creating this widget is simple, but how should I make this thing to work in order that the user has possibility to "add" this widget (from CMS) to the page (on red circle marks on the image)?

If would be very helpful even if someone point me to which topic/direction I should go (investigate).

(I'm using Kentico 8.2.42)

Thanks in advance. Adis

Correct Answer

Ilesh Mistry answered on January 26, 2017 16:59

Hello Adis

I would tackle this using a custom widget using a similar approach to what Dev User suggested.

One way to do this is to create a widget that holds all the information. In there add in the fields for :-

image url
image map 1 (placement of this)
popup 1 title
popup 1 image
popup 1 description
image map 2 (placement of this)
popup 2 title
popup 2 image
popup 2 description
etc...

Now using this, you can get all the details you require from the CMS user and then within your custom web part/widget code you can create the HTML markup.

Once you have this, using CSS and potentially some JS, you should be able to overlay the different popups using this approach when someone clicks on the '+'.

Now if you have lots of these different image scenarios on different pages with different image maps. I would go down a more flexible route to handle this requirement. Maybe even custom page types to house this information and then a custom widget with a selector to select the page types created by the CMS user.

Hopefully this all makes sense :)

Thanks Ilesh

1 votesVote for this answer Unmark Correct answer

Recent Answers

Dev User answered on January 26, 2017 16:04

I say this is all in the page type. For instance you create a page type with the fields you need:

Name
Image URL
Map 1
Map 1 text
Map 2
Map 2 text
Map 3
Map 3 text

Then in your transformation, apply your map to the image and apply the text to those points. This way the content editor only needs to enter content on the form tab vs. adding a widget and the rest is handled automatically.

1 votesVote for this answer Mark as a Correct answer

Adis A answered on January 26, 2017 16:16

This is a great answer. Thanks!

I must do it using widgets, so I'm still looking a solution.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on January 26, 2017 16:49

I'd recommend the first approach as well, simple easy solution to work with.

Regarding a widget, you'd have to custom create a widget to do this. How does the image get added to the page? How do the red dots get added to the image? If you want to do this all through editable text and images, you might want to rethink your process because there is nothing dynamic or flexible about that. I'd take another look at the page type approach and not using the widget, there's no need for the widget.

1 votesVote for this answer Mark as a Correct answer

Adis A answered on January 27, 2017 08:33

Dev User, Brenden and Ilesh,

thank you very much for your help. You have helped me a lot with your ideas.

When I implement this, I will write down my approach in this question in order if someone else in future have the same problem.

Adis

0 votesVote for this answer Mark as a Correct answer