Jump to content
TNG Community
Newark

Histories how to Add Image

Recommended Posts

Newark

I am writing a history of someone on my tree (version 10) and want to add an image half way through the blurb. How do I do this? Clicking on the, 'Add Image' icon brings up a box in which I need to add an http address and then, 'Submit Query'. I'm afraid I just don't understand what is being asked. Why am I submitting a query, I expected to get a, 'Browse' button from which I would browse to the particular photo on my hard drive and upload it. The photo is also on Google Drive as well but the  link there starts - https rather than http. I have tried putting that in but nothing happens anyway, so that isn't correct.

The Help page doesn't seem to mention this specific button so I would be grateful if someone could explain what I'm doing wrong/need to do.

Thank you in anticipation.

Share this post


Link to post
Share on other sites
Merv

Are you writing your blurb

  • on a TNG extra page,
  • on the persons TNG personal page
  • writing it as a media item that you will insert into the persons TNG personal page or
  • on another website (like Wordpress)?

Share this post


Link to post
Share on other sites
Newark

Hi Merv, thanks for replying. As a media item, which I classify as History - And which shows like this on his page -http://www.ourancestralheritage.com/getperson.php?personID=I1276&tree=tree1

This allows me to either upload a media item or write body text. I have done the latter. For the body text there are various buttons to alter the style, font size, colour, etc of the text, insert links etc. It is the button to insert a picture into the text that I can't grasp.

I am still relatively new to TNG and you will see from the link I provided above that I am still experimenting with the best method of showing information, for instance details about the clock I have done as an uploaded photo (I will change this to a history I think but I will also wish to insert a couple of pictures into the text there too) and to show the ship's log, I have provided a link to the scanned and uploaded PDF document on Google Drive as it runs to many pages. The details of his Will just shows as notes because that was the way it uploaded when I imported my gedcom and I haven't got round to changing it. 

Are you writing your blurb

  • on a TNG extra page,
  • on the persons TNG personal page
  • writing it as a media item that you will insert into the persons TNG personal page or
  • on another website (like Wordpress)?

 

Share this post


Link to post
Share on other sites
Merv

html img tag examples would be (image centered / text unwrapped)

<center><p style="font-size:9pt;text-align:center;width:200px"><img src="http://www.ourancestralheritage.com/histories/18c%20brig.jpg" style="width:200px" border="0">Image Description Here</p></center><br> Your text continues here

(image left aligned  / text wrapped)

<p style="float:left;font-size:9pt;text-align:center;width:200px;margin-right:4%;margin-bottom:0.5em"><img src="http://www.ourancestralheritage.com/histories/18c brig.jpg" style="width:200px" border="0">Image Description Here</p><br> Your text continues here

these may not be the tidiest examples of coding but they will hopefully help to keep your blurb tidy :)

Share this post


Link to post
Share on other sites
Newark

Thank you Merv for that coding. I have just tried your first example above and it has worked a treat. Now, I'm sorry if this is a really stupid question but where did you get the http:// address for the picture from? Please just humour me!

Also thank you Ken for the wiki link. I think that I have tried to get my head round this before and I must persevere, I know. I would say that TNG is the best family history software I have ever come across but being very unsure of making drastic changes, I have stuck to the standard template. I am full of admiration for the wonderful pages that others create but I find the help pages sometimes assume a certain level of understanding especially on terminology.

Share this post


Link to post
Share on other sites
Merv

The easiest way I find is to right click on the picture and (depending on what browser you are using) there should be an option to copy the image location/url. If you select this option, then the address will be copied to your clipboard. You can then paste it in your code.

The only thing you need to be careful of is that if you click on a thumbnail picture, then the thumbnail address will be copied and the thumbnail will appear in your blurb or it may appear in poor resolution. If you want the full size pic/or full resolution, then you need to find the full size version to copy the address.

 

 

Share this post


Link to post
Share on other sites
Newark

The easiest way I find is to right click on the picture and (depending on what browser you are using) there should be an option to copy the image location/url. If you select this option, then the address will be copied to your clipboard. You can then paste it in your code.

The only thing you need to be careful of is that if you click on a thumbnail picture, then the thumbnail address will be copied and the thumbnail will appear in your blurb or it may appear in poor resolution. If you want the full size pic/or full resolution, then you need to find the full size version to copy the address.

 

 

​​Ha! I'm not thick at all! That is what I was trying to do but using the new Microsoft Edge browser with Windows 10, 'copying the url' isn't an option by right clicking on the full size photo. You can only, 'Inspect element', or 'View source'. However, you can 'copy link' from the thumbnail, so I will have to experiment with what sort of quality image that produces.

Switching over to Google Chrome, hey presto! I can 'Copy url'. So it is a Microsoft Edge issue. I used to use Chrome all the time but switched to Edge when I got Windows 10 as Chrome does seem to have quite a few issues with 10, particularly regarding speed.

I have it working as I want therefore by switching to Chrome. Why it doesn't work in Edge, I will leave other to fathom.

Many thanks for all your help everyone.

Share this post


Link to post
Share on other sites
toreohn

I've used the historytemplate.php to create histories. And I have used the img src tag to insert images, like this: <img scr="http://mysite.com/histories/image.jpg">. The page shows fine, but the image does not show. The images file and the php file is located in the histories folder. 

I'm doing something wrong, but I can't figure it out. 

-Tore (new user)

Share this post


Link to post
Share on other sites
theKiwi

It should be "img src" not img scr" as you wrote above - just in case that wasn't a typo...

Have you tried just using 

<img src="imageName.jpg" alt="alternatetext">

if the image is in the same directory as the file created from historytemplate.php?

Roger

Share this post


Link to post
Share on other sites
toreohn

 

I'm embarrassed. I typed it wrong. Thanks.

Tore

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×