Topic Closed
stober
11 Posts

Hello,

I have again a problem with pictures

I have a small map and I want to place an arrow on this map to show some special places. I have a lot of places and I don't want to draw for each place a new map.
In Netobjects fusion this was very easy, but I do not find a way, how to do this in GPEASY/CKEdit.

I tried this with WIDGET, but no chance. If I install WIDGET, I have no functions in CKEditor. After removing, everything is ok - strange.

Greetings from Austria

frank

Edited: 2 years ago#8042

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

Have you installed Widgets 4.4.8 (gpEasy currently implements CKEditor 4.4)?
The Widgets plugin depends on Line Utilities (also use ver 4.4.8)

Not as convenient as a CKeditor draggable widget but you could also use some CSS classes and CKEdiors Source view to place the map markers by hand.
In his case I'd recommend the following approach using percent as units - which would also make your map responsive.

Create some classes in your theme's style.css that look similar to this:


CSS

div.mapwrapper {
position:relative;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
width:auto;
height:0;
padding-bottom:[your map image's height divided by it's width * 100]%;
margin:0.5em 0; /* some margins for the map wrapper, only if you need them */
overflow:hidden;
}

div.mapwrapper>img {
width:100%!important;
height:auto!important;
/* !important will force the map image to fill the wrapper regardless of the width and height attributes CKEditor automtically sets */
z-index:0;
}

a.mapmarker {
width:0;
height:0;
position:absolute;
top:50%;
left:50%;
overflow:visible;
z-index:10;
}

a.mapmarker:before {
content:"";
position:absolute;
background:url([path to your mapmarker image relative to the style.css file]) 0 0 no-repeat;
width:[your mapmarker image's width]px;
height:[your mapmarker image's height]px;
bottom:0;
left:-[your map marker image's width divided by 2]px;
}

Don't forget that minus sign!


In the content of your page insert sth. like this:

HTML

<div class="mapwrapper">
  <img src="[your_map_image]" />
  <a style="top:25%; left:25%;" class="mapmarker" href="[mapmarker link or JS action]" title="[title if needed]">&zwnj;</a>
  <a style="top:50%; left:50%;" class="mapmarker" href="[mapmarker link or JS action]" title="[title if needed]">&zwnj;</a>
  <a style="top:75%; left:75%;" class="mapmarker" href="[mapmarker link or JS action]" title="[title if needed]">&zwnj;</a>
</div>

Use the top and left inline styles to place the mapmarkers. When using Firebug or your browser's Web Developer Tools/Inspector you can change the values and see the mapmarkers move on-the-fly.
FYI: The &zwnj; HTML entities (zero width non-joiner) are needed to prevent CKEditor removing the otherwise empty <a> tags.



HTH
Juergen (also from Austria ;^) 

Edited: 2 years ago#8043

stober
11 Posts

Vielen Dank für die ausführliche Antwort.

Werde das so einbauen.  Klasse!

 

Frank

2 years ago#8068

juergen
1.1K Posts
41.8K Downloads
17 Plugins
design, web development & visual effects

oops, forgotten: also add display:block to the mapmarker class

CSS

a.mapmarker { 
display:block; 
width:0; 
height:0; 
position:absolute; 
top:50%; 
left:50%; 
overflow:visible; 
z-index:10; 
}
2 years ago#8074

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): Konzeption, Planung und Erstellung Ihres Internet-Auftritts, Betreuung und Aktualisierung Ihrer Website, Programmierun...

Find out more about our Provider Spotlight

Log In

  Register