Tiny default image is showing instead of the image i sourced - html

all that's popping up is a little tiny default pic. I want the picture that I sourced image1.jpg to be showing. Spent ages looking for the error so I thought I'd ask. www.shaunstanley.co.uk it's on the portfolio page.
So i am pretty certain i have checked the pathways but i'm pretty bad at coding so any help would be fantastic

The 'Tiny Default Image' is displayed when the image cannot be found where you linked it to.
To fix this, check that you have uploaded the image into http://www.shaunstanley.co.uk/sub-pages/image1.jpg
It looks like you only have the following files in the 'sub-pages' folder:
about.html, contact.html, exhibitions.html and portfolio.html
Next time, use the 'Inspect' menu on your web browser to find the problem - right click and inspect. In the console, you will see the problem. In this case, it says:
Failed to load resource: the server responded with a status of 404
(Not Found)

Related

Content not showing in the 'about' page with css

When i linked the external css to my ABOUT-US page,the only content that shows is my navbar.any help please?.i tried to unlink the css and all the contents displayed but when i linked the css back,it doesn't work
Have you checked if there are any errors with the browser loading the external css, another thing to check is if there are any errors within the css file that may be causing content to not show and also please make sure the external css path location is correct when retreiving the file.
If this is unknown to you to check if any errors are generated in browser please right click on the page and click inspect, a window on the page should popup and then click on console to view any errors.
I hope this helps

Github pages not showing images inside my div

I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.

link with correct href still gives 404

I'm having a bit of trouble figuring out why a link in one of my sites is broken. It gives a 404 even though the href is correct and the page exists.
The site is:
http://www.theawesomecleaners.com/
and the link is the big beige lettering "DFW areas" just below the menu. Here's the exact code for it:
<h2>Serving DFW areas 24/7 year around</h2>
After you see the 404, then visit the page from the url bar or search "our location" in the site, and you'll find the page right there.
What could be the problem?! I've tried excluding "www", adding "/ at the end, and using a relative path. None of them worked. I am really stumped. Please help!
Thanks in advance
This is due to an encoding error. It's a invisible character that is on the end of your url within the code that is creating the "%E2%80%8E" to appear.
Ensure that "http://www.theawesomecleaners.com/dfw-cleaners" is pasted into your html from some plain text location, such as this very post.
This happens when using things such as MS Word or WordPad.
With click:
With Search:
Try to write the link manually, don't copy it from the MS Word or WordPad.

Why is my site showing multiple broken links in tools when they are all working?

We have built a new site warmseal.westserve.co.uk. When we run it through broken link checker tools it is showing that we have multiple broken links which in reality work.
For example the following link in the top-wrapper is showing as a broken link:
<img src="/templates/images/phone.png" class="icon" />Request a call back<img class="arrow" src="/templates/images/arrow-right.png"/>
Any ideas why some links are showing as broken links?
What actions are needed to stop them showing as broken links?
There is also an issue with XML sitemap tools not picking up all of the pages. I think this is related and by solving the broken links issue it will solve the other.
I have tried making all pages on the site have a trailing / on the end as somebody suggested this may help but this makes no difference and still doesn't work.
Testing http://warmseal.westserve.co.uk/callback/ (using postman) shows that your server is responding with a 404 Not Found status code with an HTML document (that appears to be the desired page) as the human readable error message.

Unable to Change Facebook Icon for My Website on Status Updates

I am having trouble getting the proper image to show up when I a link to my website in a status update. It is either grabbing an image from the front page which I don't want it to use (links to the front page) or no image at all (links to specific pages).
I found several tutorials that all gave the same advice about using a meta tag to specify which image to use, which I have done. Example Tutorial. Example:
<link rel="image_src" href="http://URL-TO-IMAGE" />
This had no effect. The article mentions that Facebook caches these lookups and provided a link to a URL Debugger, which was supposed to scrub that cache for me. I used it to verify that my meta tag was inserted properly (it was), but it had no effect on new status updates. Am I missing something? The way the tutorials talk gives me the indication that using this debugger will clear the Facebook cache for the page so that the next lookup will load and re-cache the proper image. Instead it seems that all this does is bypass the cache this one time for the purposes of testing.
Is there a way to actually force clear this cache, or do I just need to wait? It's been several days. How long does this cache take to expire?
Steps to Reproduce:
Visit Facebook News Feed or Timeline
Enter URL of my website in status update (can provide if neeeded)
Expected Outcome
The Favicon of my website is loaded as the icon for the status update
Actual Outcome
An image of a person (appears in the sidebar of our site) is used as the icon (for links to the front page. Links to the inner pages of the website load no icon at all.)
Further:
Visit the URL Debugger
Enter URL for website
Verify proper icon is loading
Post link in new status update.
Expected Outcome
FB's cache will be updated and the Favicon will now be used.
Actual Outcome
Nope... still the person from the sidebar on front page links and no icon at all for inner page links.
UPDATE 2/22/2013:
The image that loads when I post my URL to Facebook has changed! But it's still wrong :(.
I went to test it this morning and I now have an additional image as an option, which means Facebook did update what it's loading from the site, but it's still not the image that I specified in my tag. It's just grabbing another image from one of my other side bars, and I'm still not getting an image at all for my inner page.
It's weird.... the URL Debugger tool grabs the correct image, so I don't think the problem is my Meta tags. That's what the URL Debugger is supposed to help me identify. I think there's some disconnect between the lookup and what Facebook actually posts. I think this is a problem with Facebook, unless I'm missing something huge, but I don't see it....
UPDATE 2/25/2013:
I've made progress, but there's still something weird going on. Martey set me straight on the using the og: meta tags rather than just the tag. The tutorial I had been following said to ignore the Open Graph warnings, but once I started paying attention to them, I got some good information. Like, it actually said that my image is too small and that it will use another image instead. Guess I should have paid attention :)
Anyway, so the issue was that the favicon is too small. According to the Open Graph warning, it needs to be 200 pixels in both directions. So I grabbed the actual header logo and tried to use that. It's 340 pixels wide. Oops, it was only 164 pixels tall.
So I used The GIMP to set it onto a transparent background that was 200 pixels tall and tried again, but it's still telling me it's too small. It's no longer telling me that it needs to be 200 pixels. It just says that it's too small.
I'm stumped again...
Update 2/25/2013: Issue Resolved
The problem was transparency. I filled the background in white and tried again and now it's loading fine.
Thanks for your help, Martey!
Instead of using a third party tutorial, you should refer to Facebook's official OpenGraph documentation. They recommend using an og:image metatag to refer to document images.
As I noted in my comment, issues with data not updating on Facebook is likely to be the result of misformatted or wrong OpenGraph metatags. Without the URL of the troublesome page, or information on the URL Debugger's warnings, it is difficult to recommend solutions.