Jump to content
TNG Community

adding media to Body Text


mcmacey

Recommended Posts

This newbie is still struggling. I am trying to add media to a history which I created using Body Text, but I can't get the images to display.

I am following the instructions in the Wiki on Creating histories. Having added the relevant photos to my newly created folder history images, I then tried to edit the html, which looks like this. In the first case I tried to use the long file path; in the second I went for the short one in case it made any difference but it doesn't seem to. 

 

<img src="https://mcmacey.com/historyimages/Joseph Charles Dyson Mercer.jpg" height="311" width="463">

<p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'><o:p>&nbsp;</o:p></span></p>

<p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'><span style="mso-spacerun:yes">&nbsp;</span></span><span
style='font-size:11.0pt;font-family:Helvetica;color:#1F497D;background:white'><o:p></o:p></span></p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'>Joseph Charles Dyerson Mercer, b 1848<o:p></o:p></span></p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'>Coxswain of the Walmer Lifeboat<o:p></o:p></span></p>

<img src="historyimages/Walmer Lifeboat crew - including Richard Mercer.jpg" height="400" width="279" >

<p class=MsoNormal><span style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'><o:p>&nbsp;</o:p></span></p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'><o:p>&nbsp;</o:p></span></p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'><o:p>&nbsp;</o:p></span></p>

<p class=MsoNormal><span style='font-size:11.0pt;font-family:Helvetica;
color:#1F497D;background:white'>The Walmer Lifeboat and crew, 1898. Joseph
Charles Mercer is 5<sup>th</sup> from right, and his brother Dick 7<sup>th</sup>
probably from right.</span><span lang=EN-US style='mso-ansi-language:EN-US'><o:p></o:p></span></p>
 

The resulting screenshot shows slightly different blanks. Is it my html? I have also tried using the filenames with the %20 for spaces but that doesn't seem to work either.

Screenshot 2021-03-03 at 16.36.44.png

Link to comment
Share on other sites

A couple of things:

1 - that looks like it's pasted in from Microsoft Word - if you have any other way to do this, I'd suggest doing that - Word makes very ugly HTML code

2 - where is the folder "historyimages"  located on your computer?

3 - there's something odd about the links in the document - when I copied the first one

https://mcmacey.com/historyimages/Joseph Charles Dyson Mercer.jpg

it became this

https://mcmacey.com/%EF%BB%BFhistoryimages%EF%BB%BF%EF%BB%BF/Joseph%20Charles%20Dyson%EF%BB%BF%20Mercer.jpg%EF%BB%BF%EF%BB%BF%EF%BB%BF%EF%BB%BF

in my browser bar. The strange characters are messing it up - they looked like this when pasted into the Code box of this post

image.png

probably also a Microsoft Word problem?

4 - spaces in file names "should" get handled, but it's always better to avoid them

5 - can you create a guest login and post the details here - it will be much easier to figure out what's wrong seeing the actual page(s).

Roger

 

Link to comment
Share on other sites

1. I used Mac textedit to edit a file I’d created in Word. 
 

2. I created history images in public_html.

3. I have set up guest user on mcmacey.com - just demo and demo if you want to look.

4. I guess you’re right about renaming the image files without spaces but I won’t do anything tonight; it’s getting late in the UK.

Thanks guys.

Link to comment
Share on other sites

The first image is linked correctly it seems, but it isn't apparently in the historyimages folder? It should be at this URL

https://mcmacey.com/historyimages/Joseph Charles Dyson Mercer.jpg

but it gives a not found. The source code part of it is correct - it should find it

<img src="https://mcmacey.com/historyimages/Joseph%20Charles%20Dyson%20Mercer.jpg" height="311" width="463">

- or you could just use

<img src="/historyimages/JosephCharlesDysonMercer.jpg" height="311" width="463">

to give it a relative path to the website, not with the entire URL

The second image isn't linked correctly - the webpage is looking for it on your computer 

<img src="file:///Users/BettyMacey/Documents/Family%20history/Macey/Narrative/historyimages/Walmer%20Lifeboat%20crew%20-%20including%20Richard%20Mercer.jpg" height="400" width="279">

that's what the file:///Users/BettyMacey/etc is telling you the file is in that path on your local computer.

Change that to be either the same as the top one with a full URL, or like I suggested with a relative URL

Roger

Link to comment
Share on other sites

21 hours ago, Ken Roy said:

If you are using TNG v13, you can create media records for PDFs that TNG will display directly.  See Media Enhancements in TNG v13

Thank you. It's a lot less time consuming! I think I will stick with PDF to get the site up and running and play around with creating extra pages etc at a later date!

 

17 hours ago, theKiwi said:

The first image is linked correctly it seems, but it isn't apparently in the historyimages folder? It should be at this URL

 https://mcmacey.com/historyimages/Joseph Charles Dyson Mercer.jpg

but it gives a not found. The source code part of it is correct - it should find it


<img src="https://mcmacey.com/historyimages/Joseph%20Charles%20Dyson%20Mercer.jpg" height="311" width="463">

- or you could just use


<img src="/historyimages/JosephCharlesDysonMercer.jpg" height="311" width="463">

to give it a relative path to the website, not with the entire URL

The second image isn't linked correctly - the webpage is looking for it on your computer 


<img src="file:///Users/BettyMacey/Documents/Family%20history/Macey/Narrative/historyimages/Walmer%20Lifeboat%20crew%20-%20including%20Richard%20Mercer.jpg" height="400" width="279">

that's what the file:///Users/BettyMacey/etc is telling you the file is in that path on your local computer.

Change that to be either the same as the top one with a full URL, or like I suggested with a relative URL

Roger

A bit of a mystery still; the image files are definitely on the server but I guess maybe the spaces are messing things up. I also noticed on the second image I was missing a leading forward slash in the line of code, so that won't have helped. Never mind, I've reverted to PDF files for the time being. 

Link to comment
Share on other sites

On 3/3/2021 at 6:27 PM, Ken Roy said:

If you are using TNG v13, you can create media records for PDFs that TNG will display directly.  See Media Enhancements in TNG v13

The pdf files display ok on the Mac. However on the iPad or iPhone only the first page is shown. It’s squashed, and doesn’t scroll to next page. Losing the will to carry on. 
 

 

A507922C-0EA1-4BA3-A7EE-D26D35860A18.png

Link to comment
Share on other sites

I seem to have solved this, but for anyone else, here are a couple of  lessons learned.

1. The Wiki https://tng.lythgoes.net/wiki/index.php?title=Media_Enhancements_in_TNG_v13 mentions that PDFs may not display in some browsers. I found they displayed in Safari on my laptop, but I could not get them to display properly in Safari on my iPad or iPhone.

2. If you are adding images to a subdirectory such as '/historyimages" so that you can create pointers to them from Body Text,  DO NOT leave any spaces in the file name of your media object. The spaces destroy the file path name within html.

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...