I'm trying to learn how to use Jekyll along with Bootstrap; while studying them, I decided that I'd like to have an image carousel on my homepage.
Since I'm really lazy I don't want to hard-code the paths needed to display every image inside the layout, and I wouldn't either prefer to use an array to store the list of images.
I was wondering if there's any tag that could ask Jekyll to do these two steps:
Basically what I'd like to write is something that vaguely resemble this piece of (imaginary) code:
{% for file in directory %} <img src="{{ file.url }}" /> {% endfor %}
So if, for example, I have a folder with three files named image01.jpg, image02.jpg, image03.jpg, I'd like that jekyll could build this HTML code for me:
<img src="folder/image01.jpg" /> <img src="folder/image02.jpg" /> <img src="folder/image03.jpg" />
So I had a look at this reference page but I haven't found anything useful for my purpose.
Please, could you give me any suggestion, and if possible, one that doesn't involve the use of a plugin?
Thank you in advance.
Use os.listdir() function The os. listdir('path') function returns a list containing the names of the files and directories present in the directory given by the path .
Using COMPUTER or WINDOWS EXPLORER navigate to the folder containing the files you want to make a list of. o Do not open the folder– you should be 'one level' up so you see the folder itself and not the contents. Press and hold the SHIFT key and then right-click the folder that contains the files you need listed.
You can use this plugin. Copy and paste this code in a file inside the _plugins
directory at the root of your Jekyll project.
https://gist.github.com/jgatjens/8925165
Then to use it just add the lines below
{% loop_directory directory:images iterator:image filter:*.jpg sort:descending %} <img src="{{ image }}" /> {% endloop_directory %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With