I've included 2 svg images for my background, one is at top and other at bottom. With my local host (live server) they show up without any problem, but now that is uploaded at github it doesn't show at all. I don't know what's wrong since all the assets (folder with images) are correctly uploaded.
Chrome shows this error:
2 GET https://ruth9403.github.io/assets/images/bg-top.svg 404enter image description here
I'm a noob just doing my first attemps of web pages :'v, and also new at github.
This is my github repository:
https://github.com/ruth9403/pricing-toggle-hamburger.github.io
And this is my github url for the project:
https://ruth9403.github.io/pricing-toggle-hamburger.github.io/
Thanks a lot for your time, and your kind soul!:Denter image description here
You have an issue with your path. Your CSS file is in the folder assets. And your absolute CSS path after resolution points to https://ruth9403.github.io/pricing-toggle-hamburger.github.io/assets/assets/images/bg-bottom.svg which doubles the assets folder.
Hence you have to change the image path for the background to images/bg-bottom.svg. Basically you have an issue with your relative path. For CSS files always the folder where the CSS file is located is used as "starting point" for the traversal.
Should solve it:
body {
background: url("images/bg-bottom.svg"), url("images/bg-top.svg");
}
at least it did for me :P.
A project site is available at http(s)://<user>.github.io/<repository>
In your case: https://github.com/ruth9403/pricing-toggle-hamburger (not https://github.com/ruth9403/pricing-toggle-hamburger.github.io)
Make sure to check the settings of your repository in order to activate the page publication.
Make sure the publishing source is master (it would be the gh-pages branch otherwise by default for a project page).
Related
I cannot find anything on the internet probably because I'm not sure how to ask the question properly, but I cannot seem to figure out why on some images or links to pages i have to put ../ in front of the file name for dreamWeaver to see the file. It's not every file just some of them.
It depends if the pages or images are in a separate folder.
If your page is in root/pages/home/index.html and your image is in root/pages/home/images/image.jpg then you will only need images/image.jpg but if the image is in root/pages/about/images/image.jpg then you require .. because it's outside of the local folder.
This is a good link: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
I have migrated a umbraco site over. Hooked the databse up and everything is working fine but the images are not showing on the site and in the media folder.
I have set the permissions on the folder.
changed authentication on the folder to app pool.
tried changing virtualRoot to rootPath and rootUrl.
none of the above work. The files names are showing in the media window but no images (blank previews).
Funny thing is i can upload images now and there are showing so something to do with path.
hope someone can help. thanks
Perhaps you need to tell Umbraco that it's running in a virtual directory.
There is a setting in the umbracoSettings.config which you can read about here: https://our.umbraco.org/documentation/reference/config/umbracosettings/#notifications (search for ResolveUrlsFromTextString)
Set the following to true:
<ResolveUrlsFromTextString>true</ResolveUrlsFromTextString>
I've this little but annoying issue in my project in Visual Web Developer 2010 Express. I'm developing a website with .aspx files located in a large folder structure i.e. www.domain.com/group1/type1/somefile.aspx, the root folder contains a "styles" (for css), "images" and "js" (for javascripts) folder. I've read a lot about base tag, absolute and relative path today. Finally I realized "absolute path" is the best choice for me.
The main problem is that when I preview (locally) my site in browser the absolute links for image, css, and js are not working, I'm using src="/js/gl.jquery.js" which I believe is correct and will work online.
The source code of the page for the javascript says http://localhost:61700/js/gl.jquery.js, when I switch to relative path script src="../../../js/gl.jquery.js" and preview the website, it works fine, and the source code for the javascript path says http://localhost:61700/ProjectName/js/gl.jquery.js (Notice Visual Studio added the ProjectName in the path) So I'm taking my guess that when the project goes online (on a main domain) it will work correctly, but right now I need to keep developing locally without this issue. Is there a way to fix this in Visual Web Developer? maybe some tag for the web.config file that I can remove when goes online, or some website property?
I know a quick solution will be develop with the relative path, and modify the code when goes online to absolute path, but I'm looking for some cleaner method, as aditional information I didn't choose base tag because I read cause troubles with anchors links (href=xx.html#question3) and I need to use them at some big files. And avoid the relative path because it's possible that the company ask me to move some files in the future and I don't wanna be updating relative paths.
Thanks a Lot!
Problem solved! This is the solution I found Thanks to ScottGu's Blog.
I quote the main thing:
when opened a web-site and run the project, VWD launch and run the built-in web-server using a virtual app path that equals the project’s root directory name. For example: if you have a project named “Foo”, it will launch and run in the built-in web-server as http://localhost:1234/Foo/Default.aspx.
One downside to this is that it makes it hard to fully qualify things like static CSS and image files within your site (for example: using root qualified paths like /images/myphoto.jpg or /css/mycss.css). Note that you can use the “~” app path trick for dynamic resources – but static resources still end up being a pain (js, css, images files.) (This was my issue)
Here is the guy entire post: Click Here
Here is the main solution:
1) Using the solution explorer within Visual Studio, select the web-site project node, (the one with the World icon)
2) There is a properties named "Virtual path" at the bottom. Change the "virtual path" setting it to / to run as a root web-site.
And that's it, setting up the / I can manage my files easily.
I cleaned up someone's style sheet for a Dreamweaver site, by editing the css directly, and now the secretary is having trouble using her old template.
Most of the files in her site reside in subdirectories of the 'upload' directory. For example, I would have expected to see the stylesheet in
../assets/css/ etc.
but in fact I'm finding it in
../upload/assets/css/ etc.
In addition to assets, I am also finding Templates and images as subdirectories of 'upload'.
Do you know why this 'upload' directory was used?
I am considering two possible approaches.
(1) Make sure everything needed is in ../upload/ and remove the subdirectories that are directly in the root directory
(2) Edit the template to remove all references to ../upload/
Note that (2) appeals to me because the file structure will be simpler; but I wonder if the client has some sort of extension in her Dreamweaver that causes everything she ftp's to be put into the 'upload' directory.
Note that so far I have copied my cleaned up css file over to ../upload/assets/ as a short-term solution. But they want to be able to make changes to their template, and add new pages, on their own in future.
Thanks.
The likely problem is how she has her FTP remote settings specified. It appears that it now points to the upload folder rather than the web root. Or, it could be that her FTP user account is tied to the upload folder rather than the web root.
I'm familiar with tools like Deadweight for finding CSS not in use in your Rails app, but does anything exist for images? I'm sitting in a project with a massive directory of assets from working with a variety of designers and I'm trying to trim the fat in this project. It's especially a pain when moving assets to our CDN.
Any thoughts?
It depends greatly on the code using the images. It's always possible that a filename is computed (by concatenating two values or string substitution etc) so a simply grepping by filename isn't necessarily enough.
You could try running wget (probably already installed if you've got a linux machine, otherwise http://users.ugent.be/~bpuype/wget/ ) to mirror your whole site. Do this on the same machine or network if you can, it'll crawl your whole site and grab all the images
# mirror mysite.com accepting only jpg, png and gif files
wget -A jpg,png,gif --mirror www.mysite.com
Once you've done that, you're going to have a second copy of your site's hierarchy containing any images that are actively linked to by any page reachable by crawling your site. You can then backup your source image directory, and replace it with wget's copy. Next, monitor your log files for 404's pertaining to gif/jpg/png files. Hope that helps.
Finding unsed images should be easier than CSS.
Just find *.jpg *.png *gif with glob, put those filenames to dictionary or array and find those filenames againt html, css, js files, remove filename if found and you will get unused list, and move those images to another folder with same directory structure (It will be good for restoring for just in case)
Basically like this, and of course for the file names that encrypted/encoded/obcuscated will not work.
require "fileutils"
img=Dir.glob("**/*.jpg")+Dir.glob("**/*.png")+Dir.glob("**/*.gif")
data=Dir.glob("**/*.htm*")+Dir.glob("**/*.css")+Dir.glob("**/*.js")
puts img.length.to_s+" images found & "+data.length.to_s+" files found to search against"
content=""
data.each do |f|
content+=File.open(f, 'r').read
end
img.each do |m|
if not content=~ Regexp.new("\\b"+File.basename(m)+"\\b")
FileUtils.mkdir_p "../unused/"+File.dirname(m)
FileUtils.mv m,"../unused/"+m
puts "Image "+m+" moved to ../unused/"+File.dirname(m)+" folder"
end
end
PS: I used fileutils, because normal makedirs and mv are not works in my windows version of ruby
And I am not good at ruby, so please double check it before you use it.
Here is the sample results I ran in root folder of sample rails folder in my windows
---\ruby>ruby img_coverage.rb
5 images found & 12 files found to search against
Image depot/public/images/test.jpg moved to ../unused/depot/public/images folder
If your image URLs often come from many computed / concatenated strings and other stuff hard to track programmatically within your source code, and your application is in heavy use, you could try a soft "honeypot" approach like this:
Move all the assets to a different directory, e.g. /attic
Set up an empty /images directory (or what your asset directory is called)
Set up a .htaccess file (if you're on Apache of course) that, using the -f flag, redirects all requests to nonexistent image files to a script
The script copies the requested file from the /attic into the /images directory and displays it
The next request to that image will go directly to the image, because it exists now
After some time and sufficient usage, all needed images should have been copied to the assets directory.
It's a "soft" approach of course because a dialog / situation could have not been opened/entered/used by any user during that time (things like error message icons for example). But it will recognize all used files, no matter where they're requested from, and might help sort out much of the unneeded files.
If your file manager supports it, try sorting your images directory by the files' "last accessed" date. Files that haven't been accessed in a long time most likely aren't used any longer.
Along the same lines, you can also filter or grep through your web server's logs and make a list of the image files that it has served up in the last several months. Any images not in this list are likely unused.