Uploaded Images don't show in HTML widget

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I uploaded images so i could make an image sprite using the html widget, but the images don't show. If i add the images using the image widget they do. Is this a bug? My site is www.pixelfix.co.nz but the changes I made are not published yet because they don't seem to work. (the html code and the css sprite work for older images I have already uploaded, so I know the code is right.)
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like

Posted 7 years ago

  • 1
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hi there Pixelshaw.

What code are you using to add the images to your site? Please make sure that you use the right code for your images. It should look something link http://www.pixelfix.co.nz/resources/i...

Would you please be able to tell us what page your code is so that we can take a look at your site and see if we can find out what is wrong.

Many thanks for working with us on this.
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
ok the page where is on my 'restoration' page. But like i said this ISN'T published so i don't know if you are able to see that.

I have also used the same code on a page called 'comments' and the code works for OLD images already up loaded. Also on the 'comments' page is one of the images i uploaded yesterday, but i achieved this using the image widget not html.

This is the HTML and CSS I am using within the HTML widget.

(#REMOVE
{
display: block;
width: 298px;
height: 380px;
background: Url(http://www.pixelfix.yolasite.com/reso...) no-repeat 0px 0px;
border-style:solid;
border-width:10px;
border-color:#FFFFFF;
}

#REMOVE:hover
{
background-position: -300px 0px;
}

#REMOVE span
{
display: none;
}

REMOVE)
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
please ignore the first and last brackets. Just wanted to make sure the code showed up on the page properly.
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
Hmmm notice it is missing the last part here it is again:

(#REMOVE
{
display: block;
width: 298px;
height: 380px;
background: Url(http://www.pixelfix.co.nz/resources/R...) no-repeat 0px 0px;
border-style:solid;
border-width:10px;
border-color:#FFFFFF;
}

#REMOVE:hover
{
background-position: -300px 0px;
}

#REMOVE span
{
display: none;
}

REMOVE)
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
(#REMOVE span
{
display: none;
}

REMOVE)
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
I can't seem to post the whole code on here! the last part of the code will not post.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Pixel Shaw. Please wrap your code in <!-- and --> like this:

<!--

Code goes here

-->

Also, for the background in the CSS you must use
background-image: url('http://www.pixelfix.co.nz/resources/R...;

Also I have an idea why it is not working. It is because you have not published your site after you uploaded the image. Take out the domain part and just leave in resources/REMOVEsprite.jpg and then it should work. So the background-image in CSS should look like:

background-image: url('resources/REMOVEsprite.jpg');

So it will work properly.

I hope this helps.

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Pixel Shaw. Please wrap your code in <!-- and --> like this:

<!--

Code goes here

-->

Also, for the background in the CSS you must use background-image: url('http://www.pixelfix.co.nz/resources/R...;

Also I have an idea why it is not working. It is because you have not publiched your site after you uploaded the image. Take out the domain part and just leave in resources/REMOVEsprite.jpg and then it should work. So the background-image in CSS should look like:

background-image: url('resources/REMOVEsprite.jpg');

So it will work properly.

I hope this helps.

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Nathan, I believe you've hit the nail on the head! I was about to suggest the same thing :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah :) Thanks. Hopefully it works.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Pixelshaw

Can you please give Nathan's last suggestion a try which is to remove the domain URL from your image path? Please let us know if that resolves the issue!
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
Well thanks guys the solution was to publish! Mu pages www.pixelfix.co.nz/restoration.php and www.pixelfix.co.nz/manipulation.php So please have a look and see the sprite effect.

This make using images in HTML a little long winded. The domain name structure doesn't need changing because even though i have my own domain it is still published to 'yolasites' domain as well.

So in summary if you upload an image and then reference that in HTML widget it will not 'preview' until published. If you upload and then publish and then do your HTML widget it will preveiw.

Preview is essential for WYSIWYG editing. so perhaps that is something you can resolve in your next build.

Thanks
Richard
www.pixelfix.co.nz Photo Restoration from $15
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
If you reference the full URL in any code on your site and have yet to publish with the image in your file manager you will not be able to see the image until you publish. BUT if you upload your image to your file manager and use the shortened URL in your code then you will be able to see the image when you preview your site.

Always use "resources/myfile.jpg" instead of the full image URL that way you can see your images in the preview window...

I only reference the full URL if it is in a JS file.

Happy site building
Ed

If the lady bears don't find you handsome they should at least find you handy... You can find me with my head in the honey pot here...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ed - you are on a roll today with great answers! Thanks for explaining this so well!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Nothing like the 16 hour a day 7 days a week rolls when I first got here. That was when I spent a great deal of time under the weather you could say and had little energy to anything else. I kind feel like that lately... LOL I remember it was like a contest to see if I could answer before a company rep could... LOL what memories. ;)

I'm a little lazy these days though.
Photo of pixelshaw

pixelshaw

  • 27 Posts
  • 1 Reply Like
Thanks Ed. I can confirm that removing the domain part does indeed show the image for preview, without the need to publish. But I just need to point out that the CSS code needs to be:

background: url('resources/REMOVEsprite.jpg');

not

background-image: url('resources/REMOVEsprite.jpg');

Otherwise I get no show again. But thanks for the lesson. Hope you can now enjoy my website www.pixelfix.co.nz just in case Google missed it the first 6 times :)