Image Tags
TNG version: | ≥ 13.0.0 |
TNG v13 adds an Image Tagging capability to replace the HTML image maps.
- 43. Media: Image tagging is now vastly improved. No more HTML image maps (although existing image maps will still work).
- CAUTION: You may not want to run the convert step if you use Tooltip mod with Image Maps
- since image maps are only converted if the image map contains a URL pointer to a gerperson.php page.
- all image maps will be deleted by the conversion utility whether they are converted or not
- The Tooltip mod allowed you to
- display person names from image maps for persons not in your database in group photos. These image maps will be not be converted since they do not contain a getperson.php URL
- display additional text when hovering over an image without having a URL that pointed to a person. These image maps also will not be converted since they do not contain a getperson.php URL
- Since only image maps that point to a getperson.php will get converted. Image tags are only a replacement for image maps in photos, and only if that person is also in your database. Image tags do not support tagging a person in a photo that is not in your database
- Behavior change: Image Tags are saved when created whether you save the edit media record
- since they are in a different database table and not in the media record like the image maps
- CAUTION: You may not want to run the convert step if you use Tooltip mod with Image Maps
Conversion of Image Maps
If you use the Tooltip Mod, you may not want to convert your image maps as part of the upgrade but only convert them after you install the updated Tooltip Mod, which will change the TNG conversion script to only convert image maps associated with the Photos collection and not those associated with documents or other user media collections, like census or historical maps.
Converting Only Photo Image Maps
To convert only the photo image maps, you must first install the Tooltip Mod
The first time you install the Tooltip Mod after upgrading to TNG v13, you should click the Convert Photo Image Maps button.
|
The Tooltip Mod will have updated the upgrade_convert_image_maps.php to only convert image maps for the photos collection. That will then allow you to continue to use the Image Maps for census, historical maps, and other documents where you want to display additional text tooltips.
Adjusting Image Tags Values
Darrin did a super job converting the old circle image maps which were no longer supported in TNG to rectangle image tags.
Re-positioning the Rectangle
You can click on image tag rectangle and drag it to re-position it as shown in the following screen capture where the image tag for Alphonse Roy was clicked and dragged to re-position it. You cannot however change the dimensions of the rectangle. If you need to make the image tag rectangle larger or smaller, you will need to edit the values in the tng_image_tags database table.
|
Editing the Image Tags Table
If you have very large group photos that contained image maps of people who were partially hidden, you might need to adjust the values for the new Image Tags (tng_image_tags) table using phpMyAdmin, if you are not able to drag the image tag rectangle to re-position it. You should probably not delete the image tag since you may not be able to re-create the image tag because you cannot click the top left corner where it needs to be anchored that is hiding behind another image tag
|
Adjusting the Rectangles
The following are some examples of image tags adjustments made or remain to be made for the above image values in the TNG Image Tags table.
Person Name | Results from | rtop | rleft | rheight | rwidth | gedcom | persfamID |
---|---|---|---|---|---|---|---|
Sylvio Roy | after conversion | 546 | 440 | 50 | 50 | T0001 | I1476 |
phpMyAdmin adjusted | 535 | 435 | 55 | 55 | T0001 | I1476 | |
Albert Ouellette | after conversion | 567 | 477 | 62 | 62 | T0001 | I2426 |
phpMyAdmin adjusted | 550 | 477 | 62 | 56 | T0001 | I2426 | |
Fernando Roy | after conversion | 568 | 375 | 42 | 42 | T0001 | I2267 |
to be adjusted in phpMyAdmin | 540 | 365 | 65 | 65 | T0001 | I2267 |
The following rules were used to adjust the image tag rectangle
- to raise the image tag, lower the rtop number
- to move image tag left, lower the rleft number
- to make the rectangle bigger, increase the size, either rwidth or rheight or both
- to make the rectangle smaller, decrease the numbers
Manually adding the Image Tags
The following is an example of how I will manually added the image tags after deleting them and not being able to create the Image Tag within Admin > Edit Media for Joseph Ouellette in the photo
Person Name | Results from | rtop | rleft | rheight | rwidth | gedcom | persfamID |
---|---|---|---|---|---|---|---|
Joseph Ouellette | manually add table row | 558 | 330 | 80 | 50 | T0001 | I2151 |
|
Creating New Image Tags
When creating Image Tags in group photos where people are close to each other and might hide behind an image tag once it is created, means that you may need to look at the image and decide which image tags need to be created first. Since you must click in the upper left corner to start the rectangle, the upper left hand corner of an image tag cannot be hiding behind another image tag.
So you might need to create them going right to left in the group photo.
Note that the following is a Behavior change: Image Tags are saved when created or deleted when you click the X to remove an image tag, whether you save the edit media record or not since they are in a different database table and not in the media record like the image maps
Overriding CSS
If you have mainly black and white or sephia photos, you may want to override the imagetag CSS classe in your mytngstyle.css, for example
/* overrides for Image Tags */ .imagetag { color:black; background-color:rgba(255,255,153,0.9); |
} |