Jump to content
TNG Community

hoverbox from thumbnail cuts off text


jeff g

Recommended Posts

😄

Hi!

I have a number of hover boxes that have the text running off the box, 

and as far as notes they are cut off.

I have attached a screenshot to show you what I mean.

Is there a .php or code to add to mycustomconfig or mytemplatecss

that would make the hoverbox a little bigger in width and length?

 

Thanks for the help with learning on this!

Jeff  :)

imagehoverissue1.jpg

Link to comment
Share on other sites

16 minutes ago, Hemar said:

jeff g,

put a <wbr> tag in the long word in the note to force word wrap.

Hendrik

Thanks Hendrik,

I tried that by editing the photo in TNG and adding the tags to the title, but still it runs off the holder.

Link to comment
Share on other sites

You probably can't change this because your title is just one long single word - caused by using the underscore character multiple times in the string.

To fix this you need to not use the File Name as the description of the file - back in your desktop software.

This is what it looks like if you have a "proper" Title and Description for a media item

Screen Shot 2018-08-19 at 8.38.38 PM.png

 

Roger

Link to comment
Share on other sites

13 minutes ago, theKiwi said:

To fix this you need to not use the File Name as the description of the file - back in your desktop software.

I believe TNG uses the file name if NO description is entered.  So you need to enter descriptions for your media items or live with this issue

Link to comment
Share on other sites

Thanks everyone!  :)

I will figure out the number of characters for the file name that is acceptable and add "see note" to the end of it.

and add that note as well into the description.

Then keep a txt file for the description with the longer note on what or who the photo concerns.

I guess changing the size of the hover box would affect to many other things in TNG?

Now using Rootsmagic/TNG

Previously I had FTM with photos, headstones, census records with only numbers for titles

which is of no value to future generations looking at them.

So i have needed a labeling system to keep the media intact.

So I have been redo-ing 10,000 media files 1 by 1 to relabel.

I will go back and relabel again, unless someone has an idea how to change the size of the hover box 😁

:)  Jeff

Link to comment
Share on other sites

Try this in mytngstyle.css:

.image-caption {
display:
none !important
}

 

Downside: this will affect all the TNG image files

Link to comment
Share on other sites

6 hours ago, jeff g said:

I will go back and relabel again, unless someone has an idea how to change the size of the hover box 

Jeff,

Would it not be easier to just add the Description to the TNG media records.  You should be able to export the tng_media table as a csv file,  add the descriptions and then re-import the table

Link to comment
Share on other sites

5 hours ago, klooster said:

Try this in mytngstyle.css:

.image-caption {
display:
none !important
}

 

Downside: this will affect all the TNG image files

Hi Cees,

Tried that in both the template12/css and the /css  folders for mytngsytle.css.

no effect either way i wound not mind hiding the file name and keeping the description.

Thanks for thinking of that.  :)

 

Link to comment
Share on other sites

1 hour ago, Ken Roy said:

Jeff,

Would it not be easier to just add the Description to the TNG media records.  You should be able to export the tng_media table as a csv file,  add the descriptions and then re-import the table

table

Thanks Ken,

For the idea, much easier to work in bulk so to speak.

if i were to do it that way, the file name would still be there, and i believe i would still need to edit down all the files?

i would need to copy and paste them first into description field before I edited them down,

except for where i had  created a note for large family photos already.

Link to comment
Share on other sites

In the showmedia.php, there must be a fix to only hide  the filename for display,

or expand the hover box such and such pixels beyond the padding it now uses?

Link to comment
Share on other sites

Jeff,

As I said previously, the reason the file name is used is that you did not enter a Description for your media records.

If you use the tng_media.bak file, which is also a csv file, you should be able to enter Descriptions for your media records using your favorite csv file editor.

If you provide Descriptions, there is no need to modify the hover box nor to change your file names.  You should learn how to use TNG with its built in functions before wanting to modify it.

Also opening a 2nd forum post for the same problem is not helpful to those who are trying to help you.

Link to comment
Share on other sites

1 hour ago, Ken Roy said:

You should learn how to use TNG with its built in functions before wanting to modify it.

 

Hi Ken,

 

I appreciate your concern.

From my standpoint my setup and research requires me to modify, because it is not performing what I need it to do.

I am looking for those who understand my need,

and know simply how to add code to the php or css or javascript

to be able to simply modify the hover box or hide the text file name just on the hoverbox.

When I worked with simply html/css design, hoverboxes were not an issue;

but being TNG is a little different than your simple website design, 

I am asking those veterans who can help me who can envision the goal I am trying to reach.

 

Jeff :)

Link to comment
Share on other sites

jayat1familytree

Jeff, 

Ken's point is valid. 

Unless you are documenting each and every change you make to TNG core code with Mod manager  MOD cfg files,

you will have to recode everything each time TNG upgrades.

 

And if you are regularly importing gedcoms to update the entire database the problem becomes more complex,

if you make changes to content in TNG and havent gone back to change them in the desktop software so that the next gedcom contains the changes. 

Just sounding a TNG veteran's experience.

 

 

Link to comment
Share on other sites

20 minutes ago, jeff g said:

Hi Ken,

 

I appreciate your concern.

From my standpoint my setup and research requires me to modify, because it is not performing what I need it to do.

I am looking for those who understand my need,

and know simply how to add code to the php or css or javascript

to be able to simply modify the hover box or hide the text file name just on the hoverbox.

When I worked with simply html/css design, hoverboxes were not an issue;

but being TNG is a little different than your simple website design, 

I am asking those veterans who can help me who can envision the goal I am trying to reach.

 

Jeff :)

Jeff,

You do NOT need to modify the code to make this work.  You need to modify your database table!!!

Link to comment
Share on other sites

😄 Ken and Jay,

 

Thank you both for your patience!

If I understand you correctly,

the file name information can be moved to the description field

thru my database tables.

 

Where the descriptor is empty. (In most cases my file names contain the brief description);

If I move it to the description field

still

each of those 5000+ filenames will have to be truncated, if I want them to fit within the hoverbox?

Or some else happens with the filenames in TNG when I populate the description field?

 

With great Thanks,

Jeff 

:)

Link to comment
Share on other sites

22 hours ago, jeff g said:

each of those 5000+ filenames will have to be truncated, if I want them to fit within the hoverbox?

 

The current filenames extend outside the hover box because they are considered to be a single word, and so won't wrap because there's nowhere to wrap due to the underscores.

What I would be looking to do is in your desktop genealogy software go through the media and give them a Title and Description if your software allows for both, and then on each import in to TNG the ones you've processed will get updated - as long as the filename hasn't been changed.

Yes, it will take a while, but it will eventually tidy up what is quite unpleasant and unreadable at the moment, and replace it with 2 separate field (Title and Description) that are much more informative to your viewers.

Roger

Link to comment
Share on other sites

jayat1familytree

Jeff,

Sometimes for me its easier to see the example. 

Here is a media picture in my file.

First, see how it looks in my desktop software (so you can see what the gedcom content would look like when exported) 

On my systems, TNG is installed in the genealogy folder, so that is the ROOT.

 

medi_path_name_example1 - Copy (2).jpg

 

Filename is                   z_cen_1930_wi_outagamie_kaukauna_ed34page05a.jpg

Path is                          genealogy/census/census1930/

Picture Title (or Captian)   1930 Census kaukauna ED34 Page 05a

Description             Outagamie County, Wisconsin

 

When imported by TNG it looks like this record in the tng_media table

 

medi_path_name_example2.jpg

 

 MedaitypeID - census  (the collection name the item belongs to) 

mediakey  (path within the collection folder group, including the filename) = census1930/z-cen_1930_wi_outagamie_kaukauna_ed34page05a.jpg

Description (picture Title or caption) =  1930 Census kaukauna ED 34 page 05a 

 

notice there is not the second line of the photo 'description' in the tng_media table 

for that you need to see the tng_medialinks  table

medi_path_name_example1 - Copy.jpg

 

So all I did was to clean up my media item (Title and Description)  in my source desktop genealogy program. 

TNG did all the rest of the hard work during import. 

And I am prepared for a variety of changes in the future should I decide to go a different way with my genealogy data. 

Trust me, with over 65,000 media items linked to over 75,000 persons, places, sources or events, I do not want to have to re-do thing in the future.

Hope that helps.

Jay 

 

 

 

 

 

 

 

Link to comment
Share on other sites

Hi Jay!,

 

Thanks very much for your time to show me this and explain somethings.

As well, Thanks so much for the the visual, and knowing everything is not in the tng_media..haha

I spent hours trial and error changing elements to see what showed up in TNG.

the title is within the mediakey in the TNG_media

and the description is altdescription i assume in the TNG_medialinks.

 

I am using rootsmagic , but is it possible to edit it faster say in csv?

 Downloading the TNG_media files  to edit the title and description as has been suggested.

If I am editing the filename and description from the same media in 2 windows or 2 different go's,

I fear I would  make a mistake that way. Any thoughts?

 

If I edit 1 by 1 within rootsmagic, 

i will have to click thru a number of buttons and levels to get to the media screen and edit each person.

 

There is some mention to edit the rootsmagic database with sqllite or other sql software (similar use to myphpadmin)?  

i believe it make major global changes, but is it difficult to edit each media file in a similar csv format with sql software? 

 

I am trying to figure if I can edit in a bulk format to jump to next lines to edit for quicker edit.

2 connected files such as TNG_media and TNG_medialinks is scary if i end up on the wrong lines correcting and save i am in trouble lol.

I can follow directions well if shown. I am slowly learning about databases and their edit. I understand the myphpadmin => csv edit => reimport.

just worried about editing 2 tables that rely on each other independently,

UNLESS there is another way or something someone is kind enough to show me.

 

As far as a manual approach within rootsmagic:

1A. all the media (photos, doc, etc.) on my server still needs to have several thousand at least added to the rootsmagic "scrapbook" for each

person which requires 7-8 button click thrus to get to the media then 3 or so to get it attached to the person. Once they are all in =>

1B. I can just open the media menu and select each of the offending files, go to their properties menu screen and edit the title and description.

OR

2A. edit the properties of what is currently in the rootmagic media folder the =>

2B. use an editor to edit all the media files not yet attached, then bring them into rootsmagic.

 

Either way i think requires me to use easythumbs to remake thumbnails,

ftp all the new name media and thumbs, clear my tree,

clear some TNG tables, and import a new gedcom.

Forgive the lengthy post and Thanks again for everyone's clarity on this! 

😄

Jeff

 

 

Hi Jay!,

Thanks very much for your time to show me this and explain somethings.

As well, Thanks so much for the the visual, and knowing everything is not in the tng_media..haha

I spent hours trial and error changing elements to see what showed up in TNG.

the title is within the mediakey in the TNG_media

and the description is altdescription i assume in the TNG_medialinks.

 

I am using rootsmagic , but is it possible to edit it faster say in csv?

 Downloading the TNG_media files  to edit the title and description as has been suggested.

If I am editing the filename and description from the same media in 2 windows or 2 different go's,

I fear I would  make a mistake that way. Any thoughts?

 

If I edit 1 by 1 within rootsmagic, 

i will have to click thru a number of buttons and levels to get to the media screen and edit each person.

 

There is some mention to edit the rootsmagic database with sqllite or other sql software (similar use to myphpadmin)?  

i believe it make major global changes, but is it difficult to edit each media file in a similar csv format with sql software? 

 

I am trying to figure if I can edit in a bulk format to jump to next lines to edit for quicker edit.

2 connected files such as TNG_media and TNG_medialinks is scary if i end up on the wrong lines correcting and save i am in trouble lol.

I can follow directions well if shown. I am slowly learning about databases and their edit. I understand the myphpadmin => csv edit => reimport.

just worried about editing 2 tables that rely on each other independently,

UNLESS there is another way or something someone is kind enough to show me.

 

As far as a manual approach within rootsmagic:

1A. all the media (photos, doc, etc.) on my server still needs to have several thousand at least added to the rootsmagic "scrapbook" for each

person which requires 7-8 button click thrus to get to the media then 3 or so to get it attached to the person. Once they are all in =>

1B. I can just open the media menu and select each of the offending files, go to their properties menu screen and edit the title and description.

OR

2A. edit the properties of what is currently in the rootmagic media folder the =>

2B. use an editor to edit all the media files not yet attached, then bring them into rootsmagic.

 

Either way i think requires me to use easythumbs to remake thumbnails,

ftp all the new name media and thumbs, clear my tree,

clear some TNG tables, and import a new gedcom.

Forgive the lengthy post and Thanks again for everyone's clarity on this! 

😄

Jeff

 

 

 

Link to comment
Share on other sites

12 hours ago, theKiwi said:

The current filenames extend outside the hover box because they are considered to be a single word, and so won't wrap because there's nowhere to wrap due to the underscores.

What I would be looking to do is in your desktop genealogy software go through the media and give them a Title and Description if your software allows for both, and then on each import in to TNG the ones you've processed will get updated - as long as the filename hasn't been changed.

Yes, it will take a while, but it will eventually tidy up what is quite unpleasant and unreadable at the moment, and replace it with 2 separate field (Title and Description) that are much more informative to your viewers.

Roger

Thanks Roger for helping me see the end goal 😄

Link to comment
Share on other sites

Ok 😄

so in the tng_medialinks,

I only had to edit the "altdescription" for the text in the hoverbox to change.

if thru .csv or .phpmyadmin

I guess this is great for those who use TNG as their sole desktop software.

I use rootsmagic, so it would write over the changes,

so I can see why you have all suggested to edit from within my desktop software, even if time consuming.

 

A gracious THANK YOU to everyone who help me understand!

God Bless,

Jeff  :)

Link to comment
Share on other sites

  • 4 weeks later...

Can I get  help please. I just uploaded one photo and let TNG create the thumbnail. I would like my image to show the way pics show on Darrin's site with the title and description under the photo. Mine shows the text as I hover over the thumbnail but I would like it to show in the white box under the photo (as it does for Darrin's pic). What am I doing wrong?

thumb-w-legend-darrin.png

thumb-wo-legend-mary.png

Link to comment
Share on other sites

I think the text that you're missing is a feature added in TNG 12 - since you're on TNG 11 you just get the image in the hover box.

So you'd need to upgrade to TNG 12 if you want this feature

Roger

Link to comment
Share on other sites

Thanks -- I will upgrade.

 

Can you tell me if I should add tags, description, and title to my photos using Adobe PS before I upload the pics? and would that information be available as search criteria?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...