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.
Related
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
I've recently created a Jekyll/Github pages site in the hopes of starting a small blog to share thoughts and side projects. After writing my first post, I've realized that some but not all of my images within the post are not working. I have been trying for hours to figure out why in vain. Below is my assets/images folder. Images suffixed with 3, 4, and 5 display correctly, but images 1 and 2 do not. Is it possible that Jekyll/Github only takes images of a certain size threshold?
I believe my _config.yml is configured appropriately. It is at least able to find images 3-5.
url : "https://selfawarelemon.github.io/evil-lemonade"
For reference, here is how I am referring to all the images within the blog post. Again, this logic works for images 3-5 but not images 1-2.
<img src="{{ site.url }}/assets/images/101820_1.png" width="250px">
The only difference in each tag is the width I supply to make the images appropriately sized with the width argument. I'm not sure what the issue is here. I've additionally tried waiting a while after a commit to see if it simply takes time to load the images but that didn't work. Is there something super obvious I am missing or simply a property of Jekyll/Github pages I am ignorant to?
The quick solution is to keep the case of asset extension (uppercase/lowercase) as it is e.g. https://whoami-shubham.github.io/assets/img/earth.jpg and https://whoami-shubham.github.io/assets/img/earth.JPG would give a different result. In your image path extension of the image is png in lowercase however in actual it is PNG uppercase. so changing it to uppercase would solve the issue.
<img src="{{ site.url }}/assets/images/101820_1.PNG" width="250px">
Domain names are case insensitive according to RFC 4343.
The rest of the URL may or may not be case sensitive.
for e.g.
https://stackoverflow.com/Tags
https://stackoverflow.com/tags
above two URLs give the same result it seems StackOverflow URLs are not case sensitive, However, the following GitHub page URLs are case sensitive.
https://whoami-shubham.github.io/hello-world
https://whoami-shubham.github.io/Hello-world
As you can see in the image provided, the filenames are capitalized:
101820_1.PNG
101820_2.PNG
101820_3.PNG
// ...
However, in your image tag, the filename is not capitalized:
<img src="{{ site.url }}/assets/images/101820_1.png" width="250px">
Capitalizing the filname should fix the issue:
<img src="{{ site.url }}/assets/images/101820_1.PNG" width="250px">
Paths in URLs are case-sensitive according to the standard. Depending on the operating system Github Pages is running on, case sensitive image paths may or may not matter. This is probably what is causing the inconsistency in rendering the images.
This answer was suggested by #shubhamjha in a comment. I created this small answer for future visitors with the same problem
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>
Hey guys so I been looking into making a site and was going to learn php for it but after a lot of research I saw how I can use Django for the backend of the site so I already started creating a site with HTML/css/js before I decide to use Django. Is there any possible way you can connect HTML/css to Django or do I need to re write everything in Django. I did look at some tutorials and saw how all the HTML was in django and I also did try looking it up too but couldn't find the right answer I'm looking for. If anyone could tell me I'll be very appreciated!! Thanks!
You can connect it. Django is a backend framework, all it does in the frontend is print data.
Read about templates in Django. Templates are basically html files with dynamic content.
Take the template my_template.html:
My first name is {{ first_name }}.
You render it like this:
from django.template.loader import render_to_string
rendered = render_to_string('my_template.html', {'first_name': 'Cesar'})
It will output:
My first name is Cesar.
Make sure to read the whole intro tutorial to Django.
Note: There are many ways to use a template, this was just a little example.
All you need to move from your old project to new one created with django-admin startproject are:
HTML templates adapted to django template language configured as described here: https://docs.djangoproject.com/en/1.10/topics/templates/
css/img/js files to static folder
After it you need to replace old href attributes to something like <a href="{% url "Index" %}"> and insert correct paths (includes static url) of css/img/js files to hmtl
Question: what software should I use to achieve a static site generator like described below?
I'm looking for a static blog generator, which... generates static blogs, of course :). However I need something more, like a nice set of themes to choose from, and, what is even more important, a specific way of managing assets.
When I write articles/posts/text, I create a new directory. Then inside I have a file like article.md, or article.textile. I also have files with code, and pictures, and charts etc. Everything is inside this one directory. Then I used to run a tool to convert it to html, and copy the html to a website for publishing. However there was always a problem with images. I had to copy the images somewhere e.g. to Wordpress and then change the image urls in the html. This is not the best way to do it.
I'd like to have a static blog generator, which would let me keep my normal structure: one directory per post, and keep all the images from the directory in generated structure, so I can have relative paths to the images.
I really don't like the idea to keep all articles in one global directory, and all images in another global one.
I've checked jekyll, and pelican so far, and read about couple others, but I haven't found any solution to that problem. I know that, as usually, you will have many nice ideas to check.
And of course I know that most probably this post will be "closed and not constructive", or with any other funny explanation, but maybe someone will manage to post any solution before that.
Hugo can do this. cd to empty folder of your choice, then
create the scaffolding:
hugo new site .
After that you can put your content in content, example:
content
post
alpha
index.md
1.jpg
2.jpg
bravo
index.md
1.jpg
2.jpg
Build site:
hugo
Result is generated in public folder:
public
post
alpha
index.html
1.jpg
2.jpg
bravo
index.html
1.jpg
2.jpg
Jekyll does not explicitly enforce a rule about where to put your assets like images with the exception that Jekyll will not copy files directly in a folder beginning with an underscore. Although the general practice would be to put all images in the \assets\ directory, you can put it anywhere else other than the _posts\ directory, which is what you wanted.
This is the default behavior, but there are ways to get around this:
Have your posts live outside the _posts directory
Put all your posts outside the default _posts folder along with the images (this will copy all the files without any YAML frontmatter, and preprocess all the files with the YAML frontmatter). However, any other function you can do with posts automatically in Jekyll won't work anymore. This may or may not be an issue.
Plugins
Here's a plugin (link to SO question) written specifically for making Jekyll copy files in the post directory. If you do use this you can definitely just write the following Markdown and it'll link relative to the post as it should. :
Jekyll asset path plugin is another robust plugin that does something similar, but does not keep your images in one directory, it does however link images relative to your post title though.
Jekyll asset pipeline is another another plugin that handles CSS and JS, which might be something you want to have in conjunction with plugin 1.
Do note however that the use of third party plugins is not supported with GitHub Pages site generation, meaning you will have to generate them in another branch or locally, and then pushing the static HTML files to master. This might be an issue for you if you're planning to host with GitHub Pages, else on your own server instance you're good to go.
I also want my posts to be "self contained", text content and image assets being in one single folder. I'm using Jekyll.
I have made this possible with a Pull Request on the great jekyll-picture plugin.
I can then use the simple {% picture my-image.png %} syntax to show the image in my post that is in the same folder.
Here is an example: https://github.com/nhoizey/nicolas-hoizey.com/tree/master/_posts/2015/06/19-mon-jeu-esviji-integre-a-framagames
One year after my previous answer, I have now developed a Jekyll plugin that helps keep posts assets alongside the Markdown file, it might fill your needs: https://nhoizey.github.io/jekyll_post_files/