Question How to mark individuals on group photo ?
- joeysun
-
- Offline
- Junior Member
-
- NikitaRus
-
- Visitor
-
8 years 6 months ago #22
by NikitaRus
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?
Replied by NikitaRus on topic How to mark individuals on group photo ?
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.
- Andreas
-
- Offline
- Premium Member
-
8 years 6 months ago - 8 years 6 months ago #23
by Andreas
Both MAUPILLÉ & RAUHUT families are using webtrees V2.1.18
Replied by Andreas on topic How to mark individuals on group photo ?
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.
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.
Both MAUPILLÉ & RAUHUT families are using webtrees V2.1.18
Last edit: 8 years 6 months ago by Andreas.
Please Log in or Create an account to join the conversation.
- joeysun
-
- Offline
- Junior Member
-
- Andreas
-
- Offline
- Premium Member
-
8 years 6 months ago - 8 years 6 months ago #25
by Andreas
Both MAUPILLÉ & RAUHUT families are using webtrees V2.1.18
Replied by Andreas on topic How to mark individuals on group photo ?
Hello Joeysun,
The image I used for my first try is the tree on my homepage of 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
The image I used for my first try is the tree on my homepage of 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
Both MAUPILLÉ & RAUHUT families are using webtrees V2.1.18
Last edit: 8 years 6 months ago by Andreas.
Please Log in or Create an account to join the conversation.
- Andreas
-
- Offline
- Premium Member
-
- fisharebest
-
- Offline
- Administrator
-
8 years 6 months ago #27
by fisharebest
Greg Roach - greg@subaqua.co.uk - @fisharebest@phpc.social - fisharebest.webtrees.net
Replied by fisharebest on topic How to mark individuals on group photo ?
> 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
Because I forgot it
Fixed in github.com/fisharebest/webtrees/commit/f...359b6611add6d9efcfd0
Greg Roach - greg@subaqua.co.uk - @fisharebest@phpc.social - fisharebest.webtrees.net
Please Log in or Create an account to join the conversation.
- joeysun
-
- Offline
- Junior Member
-
- NikitaRus
-
- Visitor
-
- joeysun
-
- Offline
- Junior Member
-
- Andreas
-
- Offline
- Premium Member
-
- NikitaRus
-
- Visitor
-
- bertkoor
-
- Offline
- Platinum Member
-
- Greetings from Utrecht, Holland
- HRN
-
- Offline
- Senior Member
-
- Andreas
-
- Offline
- Premium Member
-
- Andreas
-
- Offline
- Premium Member
-
8 years 6 months ago - 8 years 6 months ago #36
by Andreas
Both MAUPILLÉ & RAUHUT families are using webtrees V2.1.18
Replied by Andreas on topic How to mark individuals on group photo ?
@Greg,
Once I read your message a second time I noticed that it's a reference to github where you fixed it.
Does this mean, that the <map> tag may be or will be allowed in future releases of webtrees ?
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 ?
Both MAUPILLÉ & RAUHUT families are using webtrees V2.1.18
Last edit: 8 years 6 months ago by Andreas.
Please Log in or Create an account to join the conversation.
- fisharebest
-
- Offline
- Administrator
-
- Sodan
-
- Offline
- New Member
-
8 years 6 months ago - 8 years 6 months ago #38
by Sodan
webtrees 2
nginx, PHP 7, MariaDB, HTTP/2
genealorand.com
Replied by Sodan on topic How to mark individuals on group photo ?
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
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 : github.com/davidjbradshaw/image-map-resizer . Download it on you server (in /assets for me), then add this after your closing </map> tag :
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 :
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
Code:
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 : github.com/davidjbradshaw/image-map-resizer . Download it on you server (in /assets for me), then add this after your closing </map> tag :
Code:
<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 :
Code:
<img alt="" src="/mediafirewall.php?mid=M254&ged=genealorand&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
Last edit: 8 years 6 months ago by Sodan.
Please Log in or Create an account to join the conversation.
- Sodan
-
- Offline
- New Member
-
8 years 6 months ago #39
by Sodan
webtrees 2
nginx, PHP 7, MariaDB, HTTP/2
genealorand.com
Replied by Sodan on topic How to mark individuals on group photo ?
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 :
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 :
Now, all you need to write in Ckeditor is :
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 :
Code:
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 :
Code:
class="map"
Now, all you need to write in Ckeditor is :
Code:
<img class="map" alt="" src="/mediafirewall.php?mid=M254&ged=genealorand&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
Please Log in or Create an account to join the conversation.
- NikitaRus
-
- Visitor
-