Image Tags

From TNG_Wiki
Jump to: navigation, search
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

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.

Image Tags after conversion

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.

Image Tags after conversion


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

Image Tags after conversion

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
Image Tags after conversion

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

Image Tag behavior

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);

CSS imagetag class overrides

}