Need the right code or path to have images show on site

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Just upgraded to Silver. How do I write code to have a photo show on my webpage? I need the correct path & can't seem to get it right. I had no trouble when I was in Bronze status. Can you help me? Lost.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
  • confused

Posted 7 years ago

  • 1
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hi there Jan,

Firstly you can add an image to your site a lot easier that having to write code for it.

All you need to do is drag and drop an image widget onto your page and then select your image from your file manager or upload it.

Though, if you do want the URL of your image you can use this naming procedure:

First - the URL of your site. eg http://janswebsite.com

Then - "resources" (because your file is one of your resources

Then - the name of your file. eg, picture5.jpg

So it will look like this: http://janswebsite.com/resources/pict...

This link will take you to that file.

I hope this helps. If you need any further assistance, please let us know.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Thanks Jeremy,
This helps some, but I am still seeing a red x where my photo should be. I was using a little program called PZ3 to smoothly magnify a photo. (it automatically loads the same photo larger by sliding out to the left of the thumbnail) I thought maybe it wasn't working since my test site is NOT published. So I tried it on my regular published website, but using a Premium style template... but still the same problem. I also tried adding into your sample the file the photo resides in... no help. So I am at a loss as to why the red x still shows. A little overwhelmed right now. Many thanks.
Any more thoughts??
Thanks, Jan.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Jan

If you are seeing a red x on your photo, please check that you have no special characters in the photo's file name, for example, jan's photo (1).jpg. This can cause the problem.

If the photo's file name has characters, you can rename the photo. Here are the steps to follow:

  1. Open the site in the Sitebuilder.

  2. Go to Site > File Manager.

  3. Find the picture that is having the problem. Right-click on the picture. This will bring up a menu.

  4. Select "Rename". You can then change the photo's name, making sure you remove the special characters.



I hope this helps. Let us know if you need more help.

Nazlie
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi Nazlie,
thanks so much ... I double checked and there are no special characters. I tried a different jpg photo that I know shows on our regular website pages, our apples logo you see on this forum in fact. It won't show either Still only a red X.
I am really lost and can't figure what is wrong. I wish someone could go into my sitebuilder and see if there is anything abvious that you would recognize but I might miss. I have spent hours without success. The site is named FHLM Menu Test Site using the Vibrant Canvas Premium Style... Originally I was using the 'Butterfly Days of Summer' photo which is in the File Manager as well ... both are in the Note Cards file. I was trying to use the PZ3 program as seen in the custom CSS part of the Style. Thanks a million.
Jan.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Jan
If you place your apples logo on a page in your published site and post the url here we can then take a look.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Jan,

The problem could be that the images have a CMYK color mode attached to them - which is not web friendly. You should be able to set your color mode to RGB-16bit and you will then be able to upload them and view them on your site. An easy way to do this is instead of just selecting "save", choose "save for web" in Photoshop. The image will then be automatically saved in the correct format.

Please give that a shot and let us know how this goes!
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi Sanja, Thanks I will try to change that and see if that helps. I did try to think to save it to RGB on some of them... maybe these are ones I missed. Blessings, Jan.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi Sanja... I tried it on a photo called Juilas Rose .... save for web and checked of the RGB box as well. Nothing works. Sorry. Maybe it is the same problem with the code you were going to look at Thurs for the problem where the arrows won't show up either on my other test site for multi level menu project. Blessings, Jan. Feeling discouraged but will wait for your verdict.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi David, I can't put the url to my published site since I was only testing it on my published preview window since I wanted to iron out all the bugs first and rearrange the items to look better on the wider real estate than what I have now on my old free Style temlate....and I haven't published my Test Site at all. If I give you what I have will that help at all? I hope so. Thanks for taking a look. Jan.

I put this in my Custom CSS box first:

/* Photo-Caption PZ3 CSS v080630
* copyright: http://randsco.com/copyright
* www.randsco.com
*/

.PZ3-l { float:left; margin-right:10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
html>/**/body .PZ3-r { position:relative; }

.PZ3zoom { border:1px solid #369; }
.PZ3zoom a,.PZ3zoom a:visited { display:block;
padding:0; overflow:hidden; text-decoration:none;
height:100%; width:100%; }
html>/**/body .PZ3-r a { right:0; }

.PZ3zoom a:hover { position:absolute;
z-index:999; padding:0; background:none;
cursor:default; height:auto; width:auto;
overflow:visible; border:1px solid #369;
margin:-1px 0 0 -1px; }
html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }

.PZ3zoom a img { border:0; height:100%; width:100%; }
.PZ3zoom a:hover img { height:auto; width:auto;
border:0; }

a:hover .PZ3cap,
a:hover .PZ31cap { display:block;
direction:ltr; font:10pt verdana,sans-serif;
margin-top:-3px; background:#369; color:#fff;
text-align:left; }
a:hover .PZ3cap { padding:3px 5px; }
.PZ3inr { display:block; padding:2px 5px; }

.noCap a:hover .PZ3cap,
.noCap a:hover .PZ31cap { display:none; }
.noBdr,.noBdr a:hover { border:0; }
.Lnk a:hover { cursor:pointer; }

/* End Photo-Caption Zoom CSS */
------------------------------------------------------------
Then this code went in my HTML widget on my webpage I was testing:

<!-- start PZ3 code -->


<!-- end PZ3 code -->
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Sorry I will try the second part of the code again with my web address for the blank page part. .. It probably won't work because this in not currently published on my published website... Maybe this won't help at all. Sorry. Here it is anyway in case...
<!-- start PZ3 code -->


<!-- end PZ3 code -->
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Jan
I'm nor familiar with the PZ3 program, where is the path to your image in your post above?. If you publish your site and to keep them private for now, password protect every page except the one with the problem I may be able to understand the issues.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi David, Here the direct link to the PZ3 code... I was using the cut & Past link on that page for Version 3. http://www.randsco.com/index.php/2005...
It shows how the photos work right at the top of their page as well. My code works exactly like theirs except the photo is a red X.

Sorry I can't publish my test site since it will charge me to do so. It is a Silver Premium Style so can't... Hope you can see the code below. This is what I substitued for randsco's image link ... all I get is a red x though everything else in the code works.



Jan.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
P.S. I see the code just shows a red x to you... the only way you can see this code is to go to View right click and choose Source for this very same page you are on. If you go almost all the way down the page I think you will see the code I used ... however it was for my apples logo at the time... It is the exact same code but now for Butterfly Days of Summer.. Hope this helps.
Jan.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Jan
I recreated the affect using the code and html from your link and your image path (took some finding) and achieved the same issue as you, I then swapped your image for one of mine and it worked, from that I can only conclude that the path to your image is incorrect in some way.
I would change it so it ends up looking something like this

<!--
http://www.hislambsonline.org/resourc... Menu Test Site/Butterfly Days of Summer.jpg
-->
without the <!-- -->

and try that, it also could be because your site is yet to be published the path is not yet valid
To conclude, I'm sure your path name is at fault which will give you something to work on.

Not sure why you can't publish, if you are a silver member all styles including premium are free.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi David, Thanks so much for all your work... I have tried everything you suggested here.. Still a red X shows. I tried again to publish the test site, but a window comes up wanting me to pay for the site... and when I try to make it a sub domain of my already published site I get completely lost! I had already put in a support request but I have not heard in several days ... so I wait.
But I really do appreciate all your efforts. I will try to send a follow up request to see if it has fallen between the cracks. Blessings, Jan.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Jan
Just as an afterthought and assuming your image is now called Butterfly Days of Summer.jpg, try this as your path and see if it works, if it doesn't it must be because you are unpublished as I have just double checked and it worked again with my image so the coding is correct

resources/FHLM Menu Test Site/Butterfly Days of Summer.jpg

If you have upgraded to silver status I'm not sure what they are asking you to pay for.
Please post back when resolved as I'm interested in the outcome.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi Dave, I tried this updated suggestion... no go ....Still a red x showing. I also tried adding the file that the photo resides in as well (Note_Cards) ... that didn't help either. So I have sent in a further update to my support request with several related questions on this issue and will gladly let you know how it turns out and what the solution is. Thanks again for all your amazing and kind help with my problem here.
Blessings, Jan.
Photo of Jan

Jan

  • 36 Posts
  • 0 Reply Likes
Hi Dave, We finally resolved my PZ image issue.. it was in the path all right, but it took a Yola rep to see after a long while... so you were correct. As far as the request to pay again for a free sight was a simple Silver Status notation missing on Yola's file... all is well now. Again thanks for all your time and effort to help. Appreciated it... Have a great day, Blessings, Jan.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
That's great Jan, I'm please its sorted for you now