mcmacey Posted March 3, 2021 Report Share Posted March 3, 2021 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> </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"> </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> </o:p></span></p> <p class=MsoNormal><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'><o:p> </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. Quote Link to comment Share on other sites More sharing options...
theKiwi Posted March 3, 2021 Report Share Posted March 3, 2021 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 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 Quote Link to comment Share on other sites More sharing options...
Ken Roy Posted March 3, 2021 Report Share Posted March 3, 2021 If you are using TNG v13, you can create media records for PDFs that TNG will display directly. See Media Enhancements in TNG v13 Quote Link to comment Share on other sites More sharing options...
mcmacey Posted March 3, 2021 Author Report Share Posted March 3, 2021 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. Quote Link to comment Share on other sites More sharing options...
theKiwi Posted March 3, 2021 Report Share Posted March 3, 2021 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 Quote Link to comment Share on other sites More sharing options...
mcmacey Posted March 4, 2021 Author Report Share Posted March 4, 2021 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. Quote Link to comment Share on other sites More sharing options...
mcmacey Posted March 5, 2021 Author Report Share Posted March 5, 2021 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. Quote Link to comment Share on other sites More sharing options...
mcmacey Posted March 6, 2021 Author Report Share Posted March 6, 2021 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.