Please do NOT post requests for help here. Use the Help forum for that.

TOPIC:

How to mark individuals on group photo ? 4 years 1 month ago #21

I am really interested in this topic. A lot has transpired in this thread over the past year. Could someone explain what transpired and what solution was worked out? Maybe a link to one of their examples on their webtrees installation would help, if possible.
I need it explained like I am 5 years old.
Doug
webtrees v2.0.x at Our Family Jiapu 家譜/家谱
PHP Version 7.3x | Home ISP w/ Raspberry Pi 4 Debian 10.x

Please Log in or Create an account to join the conversation.

Last edit: by joeysun. Reason: clarity

How to mark individuals on group photo ? 4 years 1 month ago #22

  • NikitaRus
  • NikitaRus's Avatar
  • Visitor
  • Visitor

fisharebest wrote: Fixed - github.com/fisharebest/webtrees/commit/a...79671f07271428467f4e

I tested this using the image map on my own site fisharebest.webtrees.net/

Andreas wrote: Thank you for the answer. I'm late to reply.

But only today I tried to fix my small problem.

And it works. :-))

Thank you.....



Hello! Please tell us in detail how to make changes ? Unfortunately I am not an expert in programming :( Or tell us where there are similar examples . If I 'll take care of take off video lesson for everyone. Are you going to implement your changes to the main distribution webtrees?

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #23

So let me try to resume.

First I'm not an expert in programming neither, but I found it neccessary to use the <map> tag in my HTML code.

The solution is to modify a core file of the webtrees installation. So this need to be readjusted after each version release of webtrees.
I suppose that it will not become a basic feature in future webtrees installation.

I agree with this because this kind of editor had been attacked frequently. So I prefere that we stay careful.

All was explained clearly in github.com/fisharebest/webtrees/commit/aa4af7e4b5d8515c758179671f07271428467f4e
You need to modify one file app/Module/CkeditorModule.php
by adding two lines and modifying one other line. After uploading the modified file to your server you will be able to insert <map> tags to your HTML-code everywhere in webtrees.
And this code will not be removed. :-))

The image map code itself has to be created by online or offline tools. These can be found easily by a google search.

---

An enhancement would be to add <map> functionality to CKEditor by adding a plugin.

But as I told above, I'm not a programmer.

Please Log in or Create an account to join the conversation.

Last edit: by Andreas.

How to mark individuals on group photo ? 4 years 1 month ago #24

Andreas,

Can you share a link or screen print on what you have done? You had mentioned in another thread that your former home page has these map tags. Have you've updated your home page yet? I might have navigated incorrectly on your site as I cannot find your images with the map tags.
Doug
webtrees v2.0.x at Our Family Jiapu 家譜/家谱
PHP Version 7.3x | Home ISP w/ Raspberry Pi 4 Debian 10.x

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #25

Hello Joeysun,

The image I used for my first try is the tree on my homepage of http://wt.rauhut.eu


So feel free to have a look on my webtrees installation .
Try the links behind the text. They ar not jet full functionally.

And feel free to ask

Please Log in or Create an account to join the conversation.

Last edit: by Andreas.

How to mark individuals on group photo ? 4 years 1 month ago #26

Greg,

before I explain it to others, please tell me, why the title property of <area> isn't used in your code example.

I added the property title to the list to obtain descriptions on mouseover beside the choosen topic.
And this works fine.

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #27

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13196
> why the title property of <area> isn't used in your code example

Because I forgot it ;-)

Fixed in github.com/fisharebest/webtrees/commit/f...359b6611add6d9efcfd0
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #28

Andreas,

That link helps. A picture is worth a thousand words. The tags nicely maintain their position when the screen is resized and on mobile platforms.
Doug
webtrees v2.0.x at Our Family Jiapu 家譜/家谱
PHP Version 7.3x | Home ISP w/ Raspberry Pi 4 Debian 10.x

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #29

  • NikitaRus
  • NikitaRus's Avatar
  • Visitor
  • Visitor

Andreas wrote: Hello Joeysun,

The image I used for my first try is the tree on my homepage of http://wt.rauhut.eu


So feel free to have a look on my webtrees installation .
Try the links behind the text. They ar not jet full functionally.

And feel free to ask

joeysun wrote: Andreas,

That link helps. A picture is worth a thousand words. The tags nicely maintain their position when the screen is resized and on mobile platforms.



I'm sorry, but I have not found the photos with marks on people. You could not write a person's name for whom this function is used ? Or give a link to the page in your tree .

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #30

Andreas,

I have a better idea of what you are doing. I am still looking forward to more details. I will need to read up on map tags their use in CKeditor. Maybe if you can be a bit more explicit on how you are doing this, especially for the noob I am.
Doug
webtrees v2.0.x at Our Family Jiapu 家譜/家谱
PHP Version 7.3x | Home ISP w/ Raspberry Pi 4 Debian 10.x

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #31

NikitaRus,

if you want to see persons tagged have a look at this Picture and pass the mouse over the persons.

Joeysun,

an image map consists in a picture in a <img> tag and a <map>tag describing what to do on mouseover or click.

The code for the above example in Picture is easy. -have a look:
<p>an example for webtrees with image map</p>

<img alt="" src="http://wt.rauhut.eu/mediafirewall.php?mid=M4933&amp;ged=GAC.ged&amp;cb=335c5780" usemap="#Hotel" />

<map name="Hotel">
<area alt="Auguste François Maupiler" coords="548,334,604,548" href="http://wt.rauhut.eu/individual.php?pid=26887I" shape="rect" title="Auguste François Maupiler" /> 
<area alt="Berthe Maupiler" coords="650,405,701,553" href="http://wt.rauhut.eu/individual.php?pid=24217I" shape="rect" title="Berthe Maupiler" /> 
<area alt="Roland Maupiler" coords="704,391,755,556" href="http://wt.rauhut.eu/individual.php?pid=26922I" shape="rect" title="Roland Maupiler" /> 
<area alt="Bernard Maupiler" coords="606,416,651,529" href="http://wt.rauhut.eu/individual.php?pid=26898I" shape="rect" title="Bernard Maupiler" /> 
<area alt="Eugénie Marie Mellanger" coords="332,352,404,546" href="http://wt.rauhut.eu/individual.php?pid=95I" shape="rect" title="Eugénie Marie Mellanger" /> 
<area alt="inconnu" coords="69,363,147,551" shape="rect" title="inconnu" /> 
<area alt="inconnu" coords="409,341,468,541" shape="rect" title="inconnu" /> 
<area alt="inconnu" coords="474,338,540,541" shape="rect" title="inconnu" /> 
<area alt="" shape="default" />
</map>

Please Log in or Create an account to join the conversation.

Last edit: by Andreas.

How to mark individuals on group photo ? 4 years 1 month ago #32

  • NikitaRus
  • NikitaRus's Avatar
  • Visitor
  • Visitor
Andreas,
thanks for the clarifications ! But when I open your link I see a picture when I navozhu on her arm , there is not any reaction. I tried to press everywhere! I expect that will be active links such as the face area . Everything is up and running ? Maybe this feature is available only Authorizing users ?


Attachments:

Please Log in or Create an account to join the conversation.

Last edit: by NikitaRus.

How to mark individuals on group photo ? 4 years 1 month ago #33

  • bertkoor
  • bertkoor's Avatar
  • Offline
  • Gold
  • Gold
  • Greetings from Utrecht, Holland
  • Posts: 1934
@NikitaRus: judging on the absence of text above the picture you're not viewing the correct page. Should be this one:
wt.rauhut.eu/individual.php?pid=26887I&ged=GAC.ged#stories
If you hover over a face, a tooltip will show the name of the person and if you click it will navigate to that person's page.
stamboom.BertKoor.nl runs on webtrees v1.7.13

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #34

@NikitaRus

The Stories tab and HTML blocks on Andreas' fronpage are not available in all languages.
Try choosing another language to see the images
webtrees 2.0.6 at visitusinmaputo.com/webtree PHP 7.2.9
webtrees 2.0 dev on local WampServer PHP 7.3.1

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #35

@NikitaRus

HRN is right. I didn't think about different languages.

HRN wrote: The Stories tab and HTML blocks on Andreas' fronpage are not available in all languages.
Try choosing another language to see the images



But that's the reason, why you can't see the example in your personal language.
Try one of the languages proposed by the system.

By the way it is very curious, that you are able to open the website in a language which isn't in the list.
In which language do you try ?

Please Log in or Create an account to join the conversation.

Last edit: by Andreas.

How to mark individuals on group photo ? 4 years 1 month ago #36

@Greg,

Once I read your message a second time I noticed that it's a reference to github where you fixed it.

fisharebest wrote: > why the title property of <area> isn't used in your code example

Because I forgot it ;-)

Fixed in github.com/fisharebest/webtrees/commit/f...359b6611add6d9efcfd0


Does this mean, that the <map> tag may be or will be allowed in future releases of webtrees ?

Please Log in or Create an account to join the conversation.

Last edit: by Andreas.

How to mark individuals on group photo ? 4 years 1 month ago #37

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 13196
> Does this mean, that the <map> tag may be or will be allowed in future releases of webtrees ?

Yes
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #38

Hi,

I always wanted something like this is webtrees, but I never thought to use CKeditor to achieve it.
Thank you for the idea, your code, you examples and your fixes :-)

I set it up on my site, but the image was too big. I didn't want to set a fixed width for the image, it had to scale to every screen. To do this, in the <img> tag add
style="max-width:100%"

But now the coordinates of the image map were all but accurate. So I found a JS library that update the coordinates as the image is scaled : https://github.com/davidjbradshaw/image-map-resizer . Download it on you server (in /assets for me), then add this after your closing </map> tag :
<script type="text/javascript" src="/assets/imageMapResizer.min.js"></script>
<script type="text/javascript">
		imageMapResize();
</script><

To keep the <script> tags in CKeditor, I had to add "script[type,src]" in CKEDITOR.config.extraAllowedContent (file CkeditorModule.php)

You can see the result here : www.genealorand.com
Every face has a name at hovering, some have a link.


The full source code is :
<img alt="" src="/mediafirewall.php?mid=M254&amp;ged=genealorand&amp;cb=3c115930" style="max-width:100%" usemap="#map_M254" />
<map name="map_M254">
<area coords="140,1161,257,1304" shape="rect" title="Raymond Leroy" /> 
<area coords="763,1144,870,1303" href="/individual.php?pid=I0088" shape="rect" title="Armandine Lefort" />
....
</map>
<script type="text/javascript" src="/assets/imageMapResizer.min.js"></script> 
<script type="text/javascript">
		imageMapResize();
</script>
webtrees 2
nginx, PHP 7, MariaDB, HTTP/2
genealorand.com

Please Log in or Create an account to join the conversation.

Last edit: by Sodan.

How to mark individuals on group photo ? 4 years 1 month ago #39

I've added a highlight around the faces when hovering them. Thanks to maphilight jQuery plugin (I downloaded it in /assets).
You can see the result in the attachment or on my site.

To achieve this, I made something ugly (Greg, or anyone else, if you have a better way to do this just let me know) : I modified app/Controller/PageController.php by adding 3 lines :
public function pageFooter() {
                echo
                        Theme::theme()->footerContainer() .
                        '<!--[if lt IE 9]><script src="' . WT_JQUERY_JS_URL . '"></script><![endif]-->' .
                        '<!--[if gte IE 9]><!--><script src="' . WT_JQUERY2_JS_URL . '"></script><!--<![endif]-->' .
                        '<script src="' . WT_JQUERYUI_JS_URL . '"></script>' .
                        '<script src="' . WT_WEBTREES_JS_URL . '"></script>' .
                        '<script src="/assets/imageMapResizer.min.js"></script>' .  // New line
                        '<script src="/assets/jquery.maphilight.min.js"></script>' .  // New line
                        '<script> $(document).ready(function() { $(\'map\').imageMapResize(); $(\'.map\').maphilight(); });</script>' .  // New line
                        $this->getJavascript() .
                        Theme::theme()->hookFooterExtraJavascript() .

This way images map work on the Home page, as well as on the Story pages, and, as far as I know, with every theme.

Since all the scripts are handled by the function pageFooter(), it is no longer necessary to add "script[type,src]" in CKEDITOR.config.extraAllowedContent (file CkeditorModule.php).

To make the highlight works, just add this to your <img> tag :
class="map"

Now, all you need to write in Ckeditor is :
<img class="map" alt="" src="/mediafirewall.php?mid=M254&amp;ged=genealorand&amp;cb=3c115930" style="max-width:100%" usemap="#map_M254" />
<map name="map_M254">
<area coords="140,1161,257,1304" shape="rect" title="Raymond Leroy" /> 
<area coords="763,1144,870,1303" href="/individual.php?pid=I0088" shape="rect" title="Armandine Lefort" />
...
</map>
webtrees 2
nginx, PHP 7, MariaDB, HTTP/2
genealorand.com
Attachments:

Please Log in or Create an account to join the conversation.

How to mark individuals on group photo ? 4 years 1 month ago #40

  • NikitaRus
  • NikitaRus's Avatar
  • Visitor
  • Visitor

bertkoor wrote: @NikitaRus: judging on the absence of text above the picture you're not viewing the correct page. Should be this one:
wt.rauhut.eu/individual.php?pid=26887I&ged=GAC.ged#stories
If you hover over a face, a tooltip will show the name of the person and if you click it will navigate to that person's page.

Bert хор, Thank you! Your link works! I understand how it works .

Andreas wrote: @NikitaRus
In which language do you try ?



I automatically open a window in Russian (probably based on data from cookies)

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum