I want to post an image onto my blog (yes that simple!)
My website is hosted on GitLab Pages and uses the Hugo framework (v0.23). I forked my webpage from here, https://gitlab.com/pages/hugo (thus my blog folder structure is the same).
My content publishes fine and is stored here: home/content/post
I created a folder which stores images here: home/content/post/images
When I insert an image into a post the image won't publish. I've tried using the relevant short code in the post (below) with no luck:
{{< figure src="image/image_name.png" title="image title" >}}
{{< figure src="/image/image_name.png" title="image title" >}}
where:
the image is stored here: home/content/post/images/image_name.png
the post is stored here: home/content/post/post_title.md
I suspect the problem is the new images folder I added is somehow not "seen".
Please help!
The problem was easily fixed, I was pointing to the wrong pathway. D'oh!
{{< figure src="../image/image_name.png" title="image title" >}}
Related
Here is my repository
I read some people has problems with the file being in capital(i.e PNG) or .. and //, however mine does not have any of these. I even changed my image to jpg from png.
Your file is trying to access the images from the wrong place, if you look in the devtools you can see that the website is trying to find images here:
https://mfried95.github.io/images/illustration-dashboard.jpg
instead of here:
https://mfried95.github.io/Ping-validation/images/illustration-dashboard.jpg
You can change your image tags to no include the leading slash, so like this
<img src="images/illustration-dashboard.jpg" alt=""> instead of <img src="/images/illustration-dashboard.jpg" alt="">
I'd do a google search on how to configure relative paths with github pages, but for now this should do it.
I created a website using Github pages, which uses jekyll as far as i'm aware. And I'm trying to find a way to embed PDFs into a post.
I've read through a bunch of posts such as this one.
Recommended way to embed PDF in HTML?
and there seems to be a ton of different methods on doing this.
I'm very new to html and jekyll, so I've just been trying to follow what others are doing and match the format as best I can.
Right now in my repository I have a directory called "_pdfs" where I uploaded one of my pdfs to test out. In "_posts" I created a new markdown file and after the frontmatter, I inserted the following line
<object data="{{ site.url }}/_pdfs/Algebra_I_Reference_Sheet.pdf" width="1000" height="1000" type="application/pdf"></object>
I heard that using seemed better than or but what I get on my website is just a large blank space appearing. It seems to create space as if it were about the embed a pdf, but then it just leaves it blank. Scrolling to the bottom still shows the data, categories,tags, etc.
Sorry if my inexperience is making me miss something obvious in the formatting, but I've tried a lot of other things and it doesn't seem to work out.
All you need to do is add {{ site.baseurl }} to your code and it should work. So the total code would look like:
<object data="{{ site.url }}{{ site.baseurl }}/_pdfs/Algebra_I_Reference_Sheet.pdf" width="1000" height="1000" type="application/pdf"></object>
I have just started to learn about coding today. I'm learning from a video on Skillshare, which isn't probably the best but I guess it will work for the basics. I know that I am supposed to type this: <img src="image link"> but when I do it and refresh it it doesn't show up on the webpage. If I do it on this website it works. Tips?
Thank you in advance
First advice is to clear your browser cache, then try opening the broken image in a new tab or view source and check the image link to see if you have the path to your image entered correctly. Also sometimes the extension needs to be exact on some browsers jpg or png won't work if the file is written JPG or PNG.
Maybe you could post your code on the image link but I suspect the image path is incorrect or missing. <img src = "flower.jpg"> will look for the flower.jpg file in the same folder as where your html file is being stored. Browswer will look for different locations for the flower.jpg file for these examples : <img src = "\images\flower.jpg">, <img src = "http://www.nat.com/flower.jpg">, the former it will look for a sub-directory called images from the current directory. The final example allows you to get the image file directly from a URL if you know such a file exists.
Hi as stated <img src="image link"> is not working due to several reason such as incorrect path. Normally the html will look to the direct path for html stored location to find the image.
Example will be <img src="test.png"> if file does not exist named test.png it will return broken image such as like this now back to your question you have stated that
If I do it on this website it works
this is because the website have already have a image in the server name according to your <img src="image link"> that is why it is working inside the website. Hope this explanation answered your question good luck.
I am fairly new to Bolt CMS and CMSs in general. I am getting the hang of twig and things like that and have implemented a lot of dynamic content now. I am however having an issue on my timeline page in linking image assets.
I have a content type called news which has an imagelist field. I need to be able to pull the image path from the content type but when I get the raw path (ie. "files/2018-06/image-name.png") and do nothing shows up. Is something wrong here? Is this an .htaccess issue?
I am open to any and all solutions. Let me know if you need more info.
If you have an imagefield in your record you usually can show the image with
{{ record.image|showimage() }}
or
<img src="{{ record.image|thumbnail(320, 240) }}">
For more information see: https://docs.bolt.cm/3.5/templating/twig-functionality#showimage and https://docs.bolt.cm/3.5/fields/image
You can also look how it is done in one of the example themes.
I read adding image to eclipse web project which should be the same problem as I do.
But the solution is not working for me.
I also have the same folder called images inside WebContent, and i have a jpg image inside it. And in the html web page, i use <img src="images/qrcode.jpg" /> . The page does not show the image, I also tried, <img src="/images/qrcode.jpg" /> <img src="../images/qrcode.jpg" /> but they not work either.
Can any body help me with this?
PS: I use the below code to to go to my page(wodinow is the project name, the html is inside the folder of pages)
response.sendRedirect("/wodinow/pages/userhelp.html");
have you checked given extension is correct? may be JPEG, jpeg. If nothing is work post your folder structure.