How do I store images in folders?

Glitch - Thimble Help
, ,
1

I have been using Thimble to teach HTML, CSS, and JaveScript. One requirement is that students are able to access images that are in a folder, ie:

src = “cat.png”
src = “images/dog.png”
src = “…/images/mouse.png”

I only seem to be able to store images in the Assest folder. How do I store images in normal folders?

2

You could use the commands wget in your console to accomplish this!

Example:

wget https://wearebounce.net/branding/LogoIconColour.png

This will create the image in the main directory of your project and will be named “LogoIconColour.png” which you can then rename to whatever you would like and add it to a folder!

4 Likes
3

@MrFriendCS, welcome to the Glitch forum!

@Callum-OKane’s suggestion is right on target - one additional thing to keep in mind is that copying the files using wget means that they’ll start taking up space in your project’s disk space, whereas leaving them in assets (currently) means they don’t consume your project’s disk space.

Happy Glitching!

2 Likes
4

Thank you for the replys.

I gave it a go and the console showed that the image had been saved but I can’t find it. I refreshed the project to see if it would appear but no such luck.

I think this would be too involved for my students.

5

Can you share your project name and the exact command you used so we can try to troubleshoot it to see if there’s something missing in the explanation that we can make more clear?

6

The project name is enchanted-burrito.

I exported it from Thimble as a test. I had already created the folders that contain the images before exporting.

7

I used:

wget https://wearebounce.net/branding/LogoIconColour.png

1 Like
8

Aha! The step that was missing was that after running your wget command you also need to run refresh in the console - changes made to your project outside of the Editor (like ones made in the console) do not automatically sync with the Editor’s file tree display; refresh updates the file tree to show the new files.

I know this is a little convoluted, and I’m sorry for the complexity - we’re thinking about changing how the assets drawer and asset uploading work in the future (potentially to start storing those files directly in the project file system) but any changes we would make there aren’t likely to happen in the near term.

1 Like
9

Thanks, refresh did the job.

Being able to store images easily in a project folder would make this much better for me in the classroom :grinning:

10

Add on query

How do I now move the image from the root folder to the images folder?

11

In the Glitch file tree the “folder” is just part of the filename, so if you have an image LogoIconColor.png and wish to move it to the images folder you would select the drop-down arrow next to the filename, select Rename and rename the file to images/LogoIconColor.png.

1 Like
12

That was nice and easy. Thank you. :raised_hands:

1 Like