I coded a custom site and I am trying to host it on GitHub to allow for version control and beta testing before launching it.
For some reason, the website isn't displaying my images - anywhere. Even though it works great locally.
My Github
Your portfolio_final website serving the files from (austinmrobinson.github.io/) not from portfolio_final/ directory. So, to show your images perfectly use relative path (just add . before image source) instead of absolute path.
Change image source:
src="./images/service_Development.svg" instead of
src="/images/service_Development.svg"
N.B. Adding a ./ means current directory.
Related
What is the correct way, in a Markdown document, to reference images that are stored in the /asset folder, so they can be rendered locally (Visual Studio Code) but also deployed in a Jekyll site?
Right now I include my images like this:
This works only when the site is rendered with Jekyll and if site.url is correctly set, which means that _config.yml has to be changed depending on the location the Jekyll project is deployed (on root of domain vs. in subfolder).
But this does not work at all if I render the document in e.g. Visual Studio Code. There I haev this option:
which will of course not work when deployed with Jekyll in a subfolder.
Or I can use a fully relative reference:
which is very impractical as image paths depend on where I have my content files. Moving a file from one folder to another changes the image URL.
Is there a way to make both Jekyl and local rendering (e.g. Visual Studio Code) work?
The following way misses the baseurl, i.e. it doesn't handle subdirectories:
To fix that, have baseurl in _config.yml and use it in your links:
Even better, use absolute_url that will include url and baseurl generating full paths:
![alt text]({{"/assets/image.png" | absolute_url}})
Update
As discussed in comments, the above solution won't work in VSCode but having images with relative paths does.
So putting the mages in each post/collection folder and loading them with relative paths should make VSCode able to render images in each file - while also keeping Jekyll happy and render the image as it should.
I downloaded a binary via docker for the Gogs project (https://github.com/gogits/gogs), set it up (via docker pull gogs/gogs) and the server works as expected. Now I'm trying to customize the html a bit to look consistent with our company's other tools. When looking at deployed project, the assets of interest are in the following directories:
public/img/*.png
public/css/*.css
templates/*.tmpl
When I update the css, changes take effect right away, when I update tmpl, I need a container restart (implying that html is generated at server start time), when I update anything in public/img/ directory, however, I can't seem to get those assets used at all and I'm clueless about what's happening since most web servers/frameworks treat public/img/ as a static directory with all of its contents publicly visible by default.
Here is what I've tried so far and the outcomes:
Action: copied a new favicon image (my_favicon.png) into public/img/ and changed /templates/base/head.html to point to it (/img/my_favicon.png) instead of the original (/img/favicon.png), left original untouched and restarted the container.
Result: page loads with broken image icon, DOM inspector says that it's pointing to /img/my_favicon.png but doesn't show the image, going to that URL directly doesn't show the image either.
Action: change .tmpl back to point to original image (/img/favicon.png), overwrite original with the new image. I tried this with the main lg-gogs.png logo too.
Result: page loads with broken image icon just like before.
A grep search for image name revealed that only the .tmpl I modified and config.codekit are mentioning it (and I'm not at all familiar with CodeKit, but the instructions claim that it's only relevant for git, not me, and to leave the file alone, although it seems to profile names and sizes of all images - however I don't see anything else on the server reference this codekit file).
I have no idea why changes to css and tmpl work fine, but images cause this unexpected result. Does anyone have an idea of what's going on, why the server isn't accepting the images?
I would like to download all images in full quality from this blog: http://w899c8kcu.homepage.t-online.de/Blog.
I have access to server, but I can not find the directory where the images lie. When I use Firebug on the first picture, it shows me http://w899c8kcu.homepage.t-online.de/Blog;session=f0577255d9df9185d3abe04af0ce922d&focus=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702&path=image.action&frame=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702?id=34877331&width=1000&height=2000&crop=false.
How can I find the file paths like /dirname/image.jpg?
According to its HTML output the page obviously uses the CM4all content management system (CMS).
I don't know how precisely this CMS is working, though generally CMSs normally either save the files under cryptic names within a folder specified in the CMS's configuration or not in the file system at all but within a database.
Also, CMS may only save compressed or resized versions of the original files.
So, if you don't want to or are not able to dig into the server-side script code to find out if and where the images are saved, you should contact the company behind CM4all about this.
My images' relative paths do not work locally, instead they only work online when I push a commit to github and open the page with the web URL. My repository is synced with my dropbox folder which is mounted to my local disk, so the relative paths are supposedly same like following:
#container {
background-image: url(/media/image.jpg);
}
the images just show up blank when I test view the page from my local disk :( so that I have to change them to absolute paths each time. super time consuming.
Any idea as to why this happens?
This is most likely because your paths are relative. If you run your site through WebMatrix or Visual Studio locally, it will pick up the image files as they will be present at:
localhost:xxxx/media/image.jpg
But when you open a html page in the browser, it is not running on a server so it will look for:
/media/image.jpg
One option to do this without installing bulky editors is use your local IIS and point it to your files. This way when you run it through localhost, your image paths will be understood by the browser.
I'm trying to see what a certain webpage would look like if I replaced a certain image with another. Rather than upload the image, edit the site, etc, each time I tweak it, I'd like to know if there's a way to change the image in the page to my local version while viewing the remote page.
I use Firebug for debugging web development usually, but I'm open to any other tool that might do this.
(It is absolutely impossible to search for this and find anything but questions about dynamic image swapping on a deployed website, so sorry if this is a duplicate.)
Added: I just tried substituting a file:/// URI pointing to the image (copied and pasted from the address bar after manually opening the image), and alas, it did not work — the image fails to change.
It seems to only work with the http[s] protocols (likely for security reasons). You can store your images on service like Dropbox, share the image or folder, then use the public URLs.
Really, you can use any web accessible images, so a local server would work too.
If your image is in a localhost server(not as file mind you) i think you can still put that localhost url in the firebug inspect element and it'll work.
Tried an absolute file path but it doesn't work apparently. So I guess you just have to make do with a localhost server image. That works for me
Quick and Lowtech Answer: Take a screen shot of the page open it in photoshop and drop the local image on a layer above the webpage image.
Hi if you are serving from a webserver, u probably can't point it to a file on ur local drive. Even if its localhost, u can't point to a local file c:/test.jpg for example. Its because the browser sorts of sandbox ur page so that scripts can't access local files.
One way is to upload the new file (new_file.jpg) to the webserver, give the image link an id
<img id="something1" src="test.jpg"/>
Using jQuery in the firebug watch window do
$("#something1").attr("src","new_file.jpg");
You should see the image change. If you are not using jQuery, you can use document.getElementById("something1") and get the element to modify.
Another way is to use http://makiapp.com/
You can overlay an image from you computer onto any website you look at with this. Very cool tool for lining up a comp with your code.
You can:
Drag your test image into Google Drive
Open it in a browser
Go to the actual image path
Use this path as a substitute in Firebug
It's almost as fast as working from a local drive.