**Created**:: [[2024-01-01 Monday]] **Link**:: https://youtu.be/XBGhqlxlr00 **Duration**:: 30:49 ![Excalidraw Script Engine Coding Example: Building a Gallery View](https://youtu.be/XBGhqlxlr00) # Summary In the video, Zsolt demonstrates how to use Excalidraw's scripting capabilities to automate the process of creating a gallery view for his YouTube video thumbnails. He explains the organization of his files within Obsidian and walks through the creation of a script that fetches thumbnails and storyboards from his vault, ultimately displaying them in a visually appealing layout. Throughout the video, he encounters and resolves several technical challenges, showcasing the flexibility and power of Excalidraw and Obsidian for visual knowledge management. # Key Takeaways - Zsolt explains how to set up an automated script using Excalidraw to create a gallery view for video thumbnails. - The importance of file organization within Obsidian is emphasized for effective automation and retrieval of assets. - Technical experimentation and troubleshooting are integral aspects of scripting in Excalidraw, demonstrating the learning process involved in coding. # Content Hello there, I'm Zsolt. Today's video is going to be about Excalidraw automation using scripting. This is going to be extremely technical. A bit of a background story: this morning, I decided to work on my YouTube videos for this year, coming up with themes and organizing my videos so I have a plan for what I want to publish on this channel this year. As I was thinking about this, I thought it would be great to place all of my videos on a mind map. So normally, I use this Kanban board to manage my videos, and you can see I have a couple of columns here. Frankly, I don't use it as often as I should, and I'm not disorganized, that's just the truth. So today I want to create a mind map that includes all of these thumbnails, but I want to automate this process. I don't want to drag and drop each of them one by one onto my Excalidraw canvas; I want to create a script. So how do I do that? Disclaimer: I haven't planned this video or done this script upfront, so we're going to be experimenting together. Of course, I might cut some parts out to make this watchable, but overall, you're going to see me in action trying to create this simple script. [* ](https://youtu.be/XBGhqlxlr00) To get us started, I'm going to create an empty Excalidraw drawing by right-clicking here, and that is going to be where I want to place our mind map. I'm going to close the Kanban board, and for you to understand how this script is going to work, I need to explain just a little about how my vault is organized. You can see that in my vault, under hobbies, I have my YouTube channel, and in the YouTube channel, I have all these folders. Within those folders, I have files; typically, I have two files at minimum for each video: a thumbnail and a storyboard. The thumbnail is the thumbnail of the video, and the storyboard is the storyboard I have if I have one. Sometimes I don't have a storyboard, but this is where I put together a mind map of all the things I want to talk about. So I'm going to be using this structure to automatically bring in all my thumbnails here, with a link to the storyboard. How do I do this? I'm going to open the Obsidian developer console. So this is Control Shift I on Windows and Command Option I on Mac. I’m going to just close this here. I'll start by declaring the Excalidraw automation object. This is just shorthand, and it seems that I wasn't in the right scope, so let's try again. I create this object right here, and then I want to continue on with setting the view. Setting the view attaches Excalidraw to the open window right here. Now I want to get the folder path of this view, so I'm going to call this file EA target view, for shorthand. Now I have F, and then you can see that F path includes the path of this file and F name is the file name of this file that I'm going to use as my mind map. So that's useful. Now I want to create a list of the thumbnails. So how do I do that? I'm going to create this variable called thumbnails, just like that. What I'm going to do here is I'm going to use app WT and then I'm going to press Shift Enter so I can continue on in the next line, and I'm going to write here "get markdown files" and then I'm going to continue with filter. I want to filter the files that are in my folder. That reminds me that we first need to create the folder path. So how do I get the folder path from F? It's easy; the folder path is F path split F name. What this does is it splits the F path value at the position of F name so I get in the first part of this array the name of the folder. So if I now add zero here, I get the folder path. This is great. [* ](https://youtu.be/XBGhqlxlr00) Now, thumbnails, I'm going to write app WT get markdown files, and then we're going to actually— I'm going to come up here and press Shift Enter; this is better, and now this gets all the markdown files from the vault. Then I want to filter this in such a way that I want two things: I want the F path to start with the folder path, and I want the F base name—actually the lowercase value—because sometimes I might not be so consistent on the casing of thumbnails, to contain the word "thumbnail" like that. And hopefully, I need to close the bracket there; I need to close this, and if I press enter, then I get the list of 145 files in my vault. Now let's just take a step further. I'm going to again write thumbnails, and let's just continue this logic. So now I have my list of thumbnails; I want to sort this list. So I'm going to sort this using function F1 F2, and I want it sorted such that—maybe let me show you first this—that if I take my file name up there, then files have a statistics, and it has this variable called C time, which I can convert into a meaningful date and time using moment.js. So moment is included in the Obsidian plugin, or Obsidian environment, and I can format this and say this should be year, year, month, month, day, day, for example. Then I can see that the file I'm looking at right now, of course, was created on the 1st of January 2024—that's today. But to use this C time in our logic, I'm going to continue here with the next line. I'm going to sort F1 F2. Sort gets two functions and compares them, and I want to sort it such that FUB1.stat.Ctime is greater than F2.stat.Ctime. If that's the case, this should return minus one; otherwise, it should return one. Well, if it's minus one and one, I never know, but it's easy just to test and then look at thumbnails. So the sort order is actually the wrong order because this is the newest, and I want the oldest to be first. So I'm now going to change the logic such that it should return minus one. Anyway, I never have the energy to think through the logic of sort; I just do the experimenting. But now if I check this, indeed the first element of my thumbnails array is my oldest video in my vault, which is from October 3rd, 2021. So that's great. Now let's continue on with this because there's still something I want to do here. I'm going to just pull this so it sorts better. I want to also include the storyboard here. So I'm going to map the files such that—this is going to be a bit of a longer piece of text—first of all, I'm going to reuse this part, this short script, so I'm again getting the folder path. I'm just going to call it folder like this. I'm going to be splitting F path with F name, but this is now, of course, the F is the thumbnail, and then I want to repeat this one right here. So I'm going to take this code, and I'm going to say storyboard equals app WT get markdown files filter, and here I want to put in "storyboard" and here I want to just reference folder like that. So within here, I'm looking for the storyboard file, and then it's pretty simple now. I just need to return; I'm going to return F, which is the thumbnail, and I want to return the storyboard. It might be that I don't have a storyboard for a file, so sometimes I only have a thumbnail. So I'm going to put here a question mark because I don't know if the storyboard exists, and then if the storyboard exists, then I want to take the first element of the array and return it like this. Now I can just finish this right here and press enter. You can see here now I have all of these arrays, and if I think take thumbnails, it will include two values. And this didn't have a storyboard, but let's take—maybe it seems none of them includes a storyboard, which is getting to be suspicious. So something's up with my code; let's just look at this once more. So storyboard app markdown files get filter—oh, because I didn't include here zero, so this was an error and not the right value. So now let's look at thumbnails—let's say thumbnails—and now there are two files already. So you can see here that the base name is the storyboard. It seems that early on I didn't have storyboards, but later on I did. Anyway, I have my thumbnails, and now I want to add these to Excalidraw. What I'm going to do here is I'm going to use the EA help function to help me with the EA add image function. It seems that for some reason console.log has stopped working. That happens sometimes; it's a very frustrating issue, and I don't have a solution for it, unfortunately. So we are not going to look at the help. My only solution at this time when this happens is to restore defaults and restart Obsidian, but then I lose all my work. Frankly, if you know how to fix this in another way, help me because this happens to me often, and it's super frustrating. The only solution I found on the internet was to come here to settings, restore defaults, and reload, but then everything is lost. So I'm not going to do that; instead, we are going to just write our function. I'm going to define find a value which is the column, and then I'm going to go through all the thumbnails for each, and I'm going to take the thumbnail and the index. For each iterates in a way that you get the thumbnail first and then the index of which element you're working on, and this is going to be my function right here. Actually, I'm going to start with column minus one. So what I'm going to do here is, first of all, I'm going to calculate the row, such that I take index and do the modulo of 12 because I have 145. I think 12 by 2, I'm just going to import all of the thumbnails into this block, and I'm actually going to write here async; you'll see why because I'm going to be awaiting the loading of images, and I need to make this function asynchronous for that. If the row equals zero, then I'm going to move to the next column, and this is why I started with column minus one, because right in the beginning, I'm going to increase the column to get us started. Now it's going to be pretty simple because all I need to do is add EA add image. I'm going to add my image to the x value, which is the top left of the—so the values here are XY top X, top Y, width, and height, and then some formatting values, which we are not going to use. Image ID equals—and this function returns an ID of the image, which I want because I want to group elements; you’ll see in a second. I want to reference this image, so I'm going to add the image, and I'm going to do it such that the proportions of the images are 16 by 9, because these are all designed to be YouTube images. So I'm going to make these, let's just be simple, so width is going to be 16 multiplied by 200; I know only 20; and height is going to be 9 multiplied by 20. So that's just going to be the two values; this maintains the aspect ratio, and I'm going to have a padding that is going to be equal to, I don't know, 50. There's going to be plenty of space between the items. So column times padding plus column times width is the x value, and then we're going to have row times padding plus row times height; this is going to be the y coordinate. Then I'm going to have the width and the height. So I've added my image, and then for the image, I want to get the image using EA get element image ID like this. I want to change the image link to be—and I'm going to do it like this; I didn't add the image yet, so I need to add the image. Now this is frustrating because I really don't know the details, so let's do this. We're going to open an empty document just so we can look in here, and I'm going to type EA add in an image, and now we can look at top X, top Y, image file. So I don't give a width and height; I can probably offer that value in the scale anchor. [* ](https://youtu.be/XBGhqlxlr00) I'm going to resize this then, so I don't—this is so far good, but then I need to add the image file here. I'm going to add the image file that the first value in my thumbnail value, and then I'm going to add a link. The link is going to be just a markdown link, and here I'm going to take the storyboard value, and I like this. I'm just going to take question mark path because, actually, this might actually be undefined. So like this, this is going to be good. No, not like this, like this. So if there's a storyboard, then I take the path and I'm adding it to a markdown link that I'm adding as a link to the image, and I'm going to set the image width to be width, and I'm going to set the image height to be height like this. I think we're probably done, so here goes nothing—I'm going to press enter, and this is probably not good because I should have awaited, but okay. So it is actually in the background doing its stuff. You see I'm not going to run this again because, well, I can, but I would need to clear EA if I wanted to. But what I should have done was to—that’s just a thought. I shouldn’t have added elements to view because at that time, nothing yet was created. So right now, we just need to wait. You can see here that Excalidraw is loading all of these files and creating an image, but the issue is—well, let’s see what happens. So EA add elements to view, and let's press enter and see what happens. I did press enter; it's still timing out because I think it's still running in the background. So now, yeah, this is 145 drawings that need to be processed, so this might take a little time. Let's see what happens. My PC is spinning like mad. Oh, there you go; something has arrived. So let's scroll back to content. Okay, so things have been added. The end result is not yet perfect, so you can see here that things are toppled on one another like this, but actually, all of my thumbnails were loaded. So effectively, they're not so bad, but let's just clear this like this. I'm going to type here EA clear like that, so I'm going to empty Excalidraw. I'm going to just run this once more, and I'm going to do this. I'm going to evaluate this and console log the index to just print the index. Now, in our case, the index is not going to be printed, so all we're going to experience is that this is going to go on for ages without any feedback. But we’ll live with that. EA add elements to view like this at the end, once it’s done. But if console log would be working for me, then when I press enter, I would get items here one by one. And of course, I was silly. So I shouldn't have added add elements to view because at that time, nothing yet was created. So right now, we just need to wait. You can see here that Excalidraw is loading images in the background, and some of the files have some issues that prevent them from being loaded. But okay, that's not a problem. Let's just wait until this completes. We're going to give it a few minutes. In the meantime, I have my task manager here, and you can see here that at this time, Obsidian is spinning pretty fast, so it's taking up a complete CPU like that. You can see when this number decreases the CPU load, then I’ll know that the thing has finished. It seems the script has finished because you can see now Obsidian is no longer spinning. Now if I come back here and add elements to view like this, then hopefully it is—yeah, again, we have this big spinning because now I have a whole bunch of— but this now looks slightly more organized, but for sure my sizing of the images is off. So the 16 by 9 idea didn't quite work, so you can see here that this image is completely distorted. So probably I would need to scale this better. So let’s just do one more attempt. EA clear, and I’m going to do this slightly differently. So instead of a sequence, I’m going to start with index equals zero, and I’m going to write for T of thumbnails like this. So I’m switching the for each loop into this for loop. Now I’m going to await each of the images, and, of course, here at the end, I need to increase index with the next value, and here instead of setting the width like this, I’m going to do the following: I’m going to set the width to be the width I defined there, but I’m going to set the height such that I'm going to take the—oh, that was a much smaller issue; I misspelled width because it said width, and that's why it had a zero effect. So I was only changing the height, not the width. You can see here this was just my silly mistake. So this can, this can be height. And I don’t actually need to scale anything, so I’m now going to press enter. Now this time this is going to take longer to complete, and at the end, it should automatically add the item. So you can see here it's running. It's running; you can see that my CPU is spinning like crazy. But because now this is a for loop, the for loop is waiting for each of the images to be loaded. It will only add elements to view when it is done. So let's look at this; hopefully, we will see this complete, and there we go! It's beautiful. This is exactly what I had in mind. I imported all of my images, so now I can close this. I imported all of my thumbnails here in this beautiful matrix, and hopefully, if I click on an image—like click on this one—that I actually get my link to the storyboard as well, because I added the link to the storyboard and it will actually open the storyboard file. So I'm super happy with the end result. You can see here 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, as expected, rows. I'm guessing it's also 12 plus one columns because it was 145 items. So that's the process. I think it's a pretty straightforward process. Now, of course, because I was explaining it and showing you stuff, it went slower. Normally, it goes much quicker because I can just type, and it gets things done. But hopefully, you saw my logic in how I'm creating this script, and I hope that you take away some learnings from this, and you can also use Excalidraw to automate stuff for you. I think this is one of the superpowers of Obsidian and Excalidraw: that you can automate your workflows so simply. Thank you for watching, and let me know in the comments if you would like to see similar materials in the future. Thank you! [* ](https://youtu.be/XBGhqlxlr00) # YouTube Details ## YouTube Description 📽️ ✏️ Sign up for the Visual Thinking Workshop: https://www.visual-thinking-workshop.com/ ------ This is a technical video walking you through the process of importing many Excalidraw-based YouTube Thumbnails into a drawing for further processing. --- If you find my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt 📩 If you want to connect, you can reach me: (@zsviczian) on the Obsidian Members Group (OMG) on Discord, or on 🐦 Twitter: https://twitter.com/zsviczian ----- 🍿Watch next: 📽️ Example: Automate on file-open actions https://youtu.be/OX5_UYjXEvc 📽️ Excalidraw Script Engine: https://youtu.be/hePJcObHIso 📽️ My YouTube Workflow https://youtu.be/qDSHBnl83r8 ------ Visual Thinking Workshop: https://www.visual-thinking-workshop.com/ My blog: https://zsolt.blog/ Obsidian: https://obsidian.md Excalidraw-Obsidian: https://github.com/zsviczian/obsidian-excalidraw-plugin/ ## YouTube Transcript [hello there I'm jolt today's video is](https://youtu.be/XBGhqlxlr00?t=0) [going to be about excolo automation](https://youtu.be/XBGhqlxlr00?t=3) [using scripting this is going to be](https://youtu.be/XBGhqlxlr00?t=6) [extremely](https://youtu.be/XBGhqlxlr00?t=8) [technical a bit of a background story so](https://youtu.be/XBGhqlxlr00?t=10) [this morning I decided to work on my](https://youtu.be/XBGhqlxlr00?t=13) [YouTube videos for this year coming up](https://youtu.be/XBGhqlxlr00?t=17) [with themes and organizing my videos so](https://youtu.be/XBGhqlxlr00?t=19) [I have a plan for what I want to publish](https://youtu.be/XBGhqlxlr00?t=22) [on this channel this year and as I was](https://youtu.be/XBGhqlxlr00?t=25) [thinking about this I thought it would](https://youtu.be/XBGhqlxlr00?t=28) [be great to place all of my videos on a](https://youtu.be/XBGhqlxlr00?t=30) [mind map so normally I use this cambam](https://youtu.be/XBGhqlxlr00?t=33) [board to manage my videos and you can](https://youtu.be/XBGhqlxlr00?t=35) [see I have couple of columns here and I](https://youtu.be/XBGhqlxlr00?t=38) [sort of use this frankly I don't use it](https://youtu.be/XBGhqlxlr00?t=42) [as often as I](https://youtu.be/XBGhqlxlr00?t=45) [should and yeah I'm not disorganized](https://youtu.be/XBGhqlxlr00?t=46) [that's just the truth so today I want to](https://youtu.be/XBGhqlxlr00?t=49) [create a mind map that includes all of](https://youtu.be/XBGhqlxlr00?t=53) [these thumbnails but I want to automate](https://youtu.be/XBGhqlxlr00?t=56) [this process I don't want to drag and](https://youtu.be/XBGhqlxlr00?t=59) [drop each of them one by one onto my](https://youtu.be/XBGhqlxlr00?t=61) [exol dra canvas I want to create a](https://youtu.be/XBGhqlxlr00?t=65) [script so how do I do](https://youtu.be/XBGhqlxlr00?t=68) [that and disclaimer I haven't planned](https://youtu.be/XBGhqlxlr00?t=71) [this video or I haven't done this script](https://youtu.be/XBGhqlxlr00?t=75) [up front so we're going to be](https://youtu.be/XBGhqlxlr00?t=78) [experimenting together of course I might](https://youtu.be/XBGhqlxlr00?t=79) [cut some parts out to make this](https://youtu.be/XBGhqlxlr00?t=82) [watchable but overall you're going to](https://youtu.be/XBGhqlxlr00?t=84) [see me in action trying to create this](https://youtu.be/XBGhqlxlr00?t=86) [simple](https://youtu.be/XBGhqlxlr00?t=89) [script so to get us started I'm going to](https://youtu.be/XBGhqlxlr00?t=90) [create an empty excolo drawing by right](https://youtu.be/XBGhqlxlr00?t=94) [clicking here and that is going to be](https://youtu.be/XBGhqlxlr00?t=98) [where I want to place our mind map I'm](https://youtu.be/XBGhqlxlr00?t=100) [going to close the camben board and to](https://youtu.be/XBGhqlxlr00?t=103) [for you to understand how this script is](https://youtu.be/XBGhqlxlr00?t=107) [going to work I need to explain just a](https://youtu.be/XBGhqlxlr00?t=109) [little about how my vault is organized](https://youtu.be/XBGhqlxlr00?t=112) [so you can see that in my Vault Under](https://youtu.be/XBGhqlxlr00?t=115) [Hobbies I have my YouTube channel and in](https://youtu.be/XBGhqlxlr00?t=118) [the YouTube channel I have all these](https://youtu.be/XBGhqlxlr00?t=121) [folders and within the folders I have](https://youtu.be/XBGhqlxlr00?t=123) [these uh files typically I have two](https://youtu.be/XBGhqlxlr00?t=127) [files at minimum for each video I have a](https://youtu.be/XBGhqlxlr00?t=130) [thumbnail and a storyboard the thumbnail](https://youtu.be/XBGhqlxlr00?t=133) [is the thumbnail of the video and the](https://youtu.be/XBGhqlxlr00?t=138) [storyboard is the storyboard if I have a](https://youtu.be/XBGhqlxlr00?t=140) [storyboard sometimes I don't have a](https://youtu.be/XBGhqlxlr00?t=143) [storyboard but this is where I put](https://youtu.be/XBGhqlxlr00?t=145) [together a mind map of all the things I](https://youtu.be/XBGhqlxlr00?t=148) [want to talk about so I'm going to be](https://youtu.be/XBGhqlxlr00?t=151) [using this structure to automatically](https://youtu.be/XBGhqlxlr00?t=155) [bring in all my thumbnails here with a](https://youtu.be/XBGhqlxlr00?t=158) [link to the storyboard so how do I do](https://youtu.be/XBGhqlxlr00?t=160) [this I'm going to open the obsidian](https://youtu.be/XBGhqlxlr00?t=163) [developer console so this is control](https://youtu.be/XBGhqlxlr00?t=166) [shift I on Windows it's command option I](https://youtu.be/XBGhqlxlr00?t=168) [on](https://youtu.be/XBGhqlxlr00?t=174) [Mac and I'm going to just close this](https://youtu.be/XBGhqlxlr00?t=174) [here and I'll start with declaring the](https://youtu.be/XBGhqlxlr00?t=178) [excolo automate object this is just the](https://youtu.be/XBGhqlxlr00?t=181) [shorthand and it seems that I wasn't in](https://youtu.be/XBGhqlxlr00?t=187) [the right um scope so let's try again so](https://youtu.be/XBGhqlxlr00?t=189) [I create this object right here and then](https://youtu.be/XBGhqlxlr00?t=195) [I want to continue on with setting the](https://youtu.be/XBGhqlxlr00?t=198) [view set view so what set view does is](https://youtu.be/XBGhqlxlr00?t=202) [it attaches exol automate to the open](https://youtu.be/XBGhqlxlr00?t=206) [window right](https://youtu.be/XBGhqlxlr00?t=210) [here and now I want to get the folder](https://youtu.be/XBGhqlxlr00?t=212) [path of this view so I'm going to call](https://youtu.be/XBGhqlxlr00?t=215) [this first of all the](https://youtu.be/XBGhqlxlr00?t=218) [file EA Target view](https://youtu.be/XBGhqlxlr00?t=220) [do file just for a short hand now I have](https://youtu.be/XBGhqlxlr00?t=225) [F and then you can see that F path](https://youtu.be/XBGhqlxlr00?t=229) [includes the path of this file and F](https://youtu.be/XBGhqlxlr00?t=232) [name is the file name of this file that](https://youtu.be/XBGhqlxlr00?t=235) [I'm going to to use as my mind map so](https://youtu.be/XBGhqlxlr00?t=239) [that's useful now I want to create a](https://youtu.be/XBGhqlxlr00?t=242) [list of the thumbnails so how do I do](https://youtu.be/XBGhqlxlr00?t=245) [that I'm going to create this variable](https://youtu.be/XBGhqlxlr00?t=248) [called](https://youtu.be/XBGhqlxlr00?t=251) [thumbnails](https://youtu.be/XBGhqlxlr00?t=252) [thumb nails like that and what I'm going](https://youtu.be/XBGhqlxlr00?t=254) [to do here is I'm going to use app WT](https://youtu.be/XBGhqlxlr00?t=258) [and then I'm going to press shift enter](https://youtu.be/XBGhqlxlr00?t=263) [so I can continue on in the next line](https://youtu.be/XBGhqlxlr00?t=265) [and I'm going to write here](https://youtu.be/XBGhqlxlr00?t=268) [get markdown files and then I'm going to](https://youtu.be/XBGhqlxlr00?t=272) [continue on here with filter and I want](https://youtu.be/XBGhqlxlr00?t=276) [to filter the files that are in my](https://youtu.be/XBGhqlxlr00?t=281) [folder](https://youtu.be/XBGhqlxlr00?t=288) [and that reminds me that we first need](https://youtu.be/XBGhqlxlr00?t=290) [to create the folder path so how do I](https://youtu.be/XBGhqlxlr00?t=293) [get the folder path from f it's easy so](https://youtu.be/XBGhqlxlr00?t=296) [it's folder path and I'm going to write](https://youtu.be/XBGhqlxlr00?t=300) [here F path](https://youtu.be/XBGhqlxlr00?t=304) [split](https://youtu.be/XBGhqlxlr00?t=308) [F name so what this does is it splits](https://youtu.be/XBGhqlxlr00?t=309) [the fpath value at the position of file](https://youtu.be/XBGhqlxlr00?t=314) [name so I get in the first part of this](https://youtu.be/XBGhqlxlr00?t=319) [array I get the name of the folder so if](https://youtu.be/XBGhqlxlr00?t=322) [I now add zero here I get the folder](https://youtu.be/XBGhqlxlr00?t=326) [path here this is great and then uh](https://youtu.be/XBGhqlxlr00?t=330) [thumb Nails I'm going to write app WT](https://youtu.be/XBGhqlxlr00?t=334) [get markdown](https://youtu.be/XBGhqlxlr00?t=339) [files and then we're going](https://youtu.be/XBGhqlxlr00?t=342) [to actually I'm going to come up here](https://youtu.be/XBGhqlxlr00?t=345) [and press shift enter this is better and](https://youtu.be/XBGhqlxlr00?t=348) [now so this gets all the markdown files](https://youtu.be/XBGhqlxlr00?t=352) [from The Vault and then I want to filter](https://youtu.be/XBGhqlxlr00?t=356) [this](https://youtu.be/XBGhqlxlr00?t=359) [in such a way that I want two things I](https://youtu.be/XBGhqlxlr00?t=360) [want the F path to starts with to start](https://youtu.be/XBGhqlxlr00?t=363) [with the folder path like that and I](https://youtu.be/XBGhqlxlr00?t=369) [want the F base](https://youtu.be/XBGhqlxlr00?t=374) [name actually the lower case because](https://youtu.be/XBGhqlxlr00?t=378) [sometimes I might not be so um](https://youtu.be/XBGhqlxlr00?t=382) [consistent on the casing of thumbnail](https://youtu.be/XBGhqlxlr00?t=385) [the lower case value of this to](https://youtu.be/XBGhqlxlr00?t=387) [contain the word](https://youtu.be/XBGhqlxlr00?t=391) [thumbnail like that and hopefully and I](https://youtu.be/XBGhqlxlr00?t=394) [need to close the bracket there I need](https://youtu.be/XBGhqlxlr00?t=398) [to close this and if I press enter Then](https://youtu.be/XBGhqlxlr00?t=401) [I get the list of 145 files in my Vault](https://youtu.be/XBGhqlxlr00?t=405) [now let's go just a step further I'm](https://youtu.be/XBGhqlxlr00?t=410) [going to again write thumbnails and](https://youtu.be/XBGhqlxlr00?t=413) [let's just continue this logic so now I](https://youtu.be/XBGhqlxlr00?t=416) [have have my list of thumbnails I want](https://youtu.be/XBGhqlxlr00?t=419) [to sort this list so I'm going to sort](https://youtu.be/XBGhqlxlr00?t=421) [this F1 F2 sort get gets two functions](https://youtu.be/XBGhqlxlr00?t=424) [and I want the sort it such that um](https://youtu.be/XBGhqlxlr00?t=429) [maybe let me show you first this that if](https://youtu.be/XBGhqlxlr00?t=433) [I take my file name up there then files](https://youtu.be/XBGhqlxlr00?t=436) [have a statistics and it has this](https://youtu.be/XBGhqlxlr00?t=439) [variable called C time which is the](https://youtu.be/XBGhqlxlr00?t=443) [creation time which I can convert in](https://youtu.be/XBGhqlxlr00?t=446) [into a meaningful date and time using](https://youtu.be/XBGhqlxlr00?t=449) [Moment Like This so moment is included](https://youtu.be/XBGhqlxlr00?t=452) [in the obsidian Plug-In or obsidian](https://youtu.be/XBGhqlxlr00?t=456) [environment the moment library and I can](https://youtu.be/XBGhqlxlr00?t=460) [format this and say this should be year](https://youtu.be/XBGhqlxlr00?t=463) [year month month dat day for example and](https://youtu.be/XBGhqlxlr00?t=465) [then I can see that the file that I'm](https://youtu.be/XBGhqlxlr00?t=469) [looking at right now of course was](https://youtu.be/XBGhqlxlr00?t=473) [created on 1st of January 2024 that's](https://youtu.be/XBGhqlxlr00?t=475) [today but to use this C time in our](https://youtu.be/XBGhqlxlr00?t=479) [logic I'm going to now continue on here](https://youtu.be/XBGhqlxlr00?t=483) [with the next line and I'm going to add](https://youtu.be/XBGhqlxlr00?t=487) [sort and I want to](https://youtu.be/XBGhqlxlr00?t=489) [sort fub1 F2 so sort gets gets two](https://youtu.be/XBGhqlxlr00?t=491) [functions and Compares those and I want](https://youtu.be/XBGhqlxlr00?t=496) [to sort it such that F stat C time](https://youtu.be/XBGhqlxlr00?t=498) [actually fub1 stat C time is greater](https://youtu.be/XBGhqlxlr00?t=503) [than F2](https://youtu.be/XBGhqlxlr00?t=508) [stat C time if that's the case this](https://youtu.be/XBGhqlxlr00?t=509) [should return minus one otherwise it](https://youtu.be/XBGhqlxlr00?t=513) [should return one well if it's minus one](https://youtu.be/XBGhqlxlr00?t=516) [and one I never know but it's easy just](https://youtu.be/XBGhqlxlr00?t=519) [to test and then look at thumb](https://youtu.be/XBGhqlxlr00?t=522) [Nails](https://youtu.be/XBGhqlxlr00?t=525) [Z stat C](https://youtu.be/XBGhqlxlr00?t=527) [time and actually I want to put this](https://youtu.be/XBGhqlxlr00?t=530) [into this moment format right here so I](https://youtu.be/XBGhqlxlr00?t=534) [can see the](https://youtu.be/XBGhqlxlr00?t=538) [date uh](https://youtu.be/XBGhqlxlr00?t=540) [thumbnails and so the sort order is](https://youtu.be/XBGhqlxlr00?t=544) [actually the wrong order because this is](https://youtu.be/XBGhqlxlr00?t=547) [the newest and I want it the oldest to](https://youtu.be/XBGhqlxlr00?t=549) [be first so I'm now going to change the](https://youtu.be/XBGhqlxlr00?t=552) [logic that um it should return minus one](https://youtu.be/XBGhqlxlr00?t=554) [if anyway so I'm I'm just switching this](https://youtu.be/XBGhqlxlr00?t=559) [around I never have the energy to Think](https://youtu.be/XBGhqlxlr00?t=563) [Through the logic of sort I just do the](https://youtu.be/XBGhqlxlr00?t=566) [is experimenting but now if I check this](https://youtu.be/XBGhqlxlr00?t=569) [then indeed the first element of my](https://youtu.be/XBGhqlxlr00?t=572) [thumbnails array is my oldest video in](https://youtu.be/XBGhqlxlr00?t=575) [this VA which is from October 3rd uh](https://youtu.be/XBGhqlxlr00?t=580) [2021 so that's great now let's continue](https://youtu.be/XBGhqlxlr00?t=586) [on with this because there's still](https://youtu.be/XBGhqlxlr00?t=588) [something I want to do here and what I](https://youtu.be/XBGhqlxlr00?t=590) [want to do I'm going to just pull this](https://youtu.be/XBGhqlxlr00?t=594) [so it uh sorts better I want to also](https://youtu.be/XBGhqlxlr00?t=596) [include the story board here so I'm](https://youtu.be/XBGhqlxlr00?t=600) [going to map the](https://youtu.be/XBGhqlxlr00?t=604) [files such that and this is going to be](https://youtu.be/XBGhqlxlr00?t=607) [a bit of a longer piece of text so first](https://youtu.be/XBGhqlxlr00?t=610) [of all I'm going to reuse this part this](https://youtu.be/XBGhqlxlr00?t=613) [short script so I'm again getting the](https://youtu.be/XBGhqlxlr00?t=618) [folder path I'm just going to call](https://youtu.be/XBGhqlxlr00?t=622) [it uh](https://youtu.be/XBGhqlxlr00?t=625) [folder like this](https://youtu.be/XBGhqlxlr00?t=627) [I'm going to be splitting F path with f](https://youtu.be/XBGhqlxlr00?t=629) [name but this is now this F is of course](https://youtu.be/XBGhqlxlr00?t=632) [the](https://youtu.be/XBGhqlxlr00?t=636) [thumbnail and then I want to repeat this](https://youtu.be/XBGhqlxlr00?t=637) [one right here so I'm going to take this](https://youtu.be/XBGhqlxlr00?t=642) [code and I'm going to](https://youtu.be/XBGhqlxlr00?t=645) [storyboard](https://youtu.be/XBGhqlxlr00?t=649) [equals](https://youtu.be/XBGhqlxlr00?t=651) [appv get markdown files filter and here](https://youtu.be/XBGhqlxlr00?t=653) [I want to put put in](https://youtu.be/XBGhqlxlr00?t=658) [storyboard and here I want to just](https://youtu.be/XBGhqlxlr00?t=660) [reference](https://youtu.be/XBGhqlxlr00?t=664) [folder like that so within here I'm](https://youtu.be/XBGhqlxlr00?t=665) [looking for the storyboard file and then](https://youtu.be/XBGhqlxlr00?t=669) [it's pretty simple now I just need to](https://youtu.be/XBGhqlxlr00?t=673) [return I'm going to return F which is](https://youtu.be/XBGhqlxlr00?t=677) [the thumbnail and I want to return Story](https://youtu.be/XBGhqlxlr00?t=681) [Board it might be that I don't have a](https://youtu.be/XBGhqlxlr00?t=686) [storyboard for a file so sometimes I](https://youtu.be/XBGhqlxlr00?t=689) [only have a thumbnail so I'm going to](https://youtu.be/XBGhqlxlr00?t=691) [put here a question mark because I don't](https://youtu.be/XBGhqlxlr00?t=693) [know if storyboard exists and then if](https://youtu.be/XBGhqlxlr00?t=696) [storyboard exists then I want to take](https://youtu.be/XBGhqlxlr00?t=699) [the first element of the array and](https://youtu.be/XBGhqlxlr00?t=703) [return it like this and now I can just](https://youtu.be/XBGhqlxlr00?t=707) [finish this right here and press enter](https://youtu.be/XBGhqlxlr00?t=711) [so you can see here now I have all of](https://youtu.be/XBGhqlxlr00?t=714) [these arrays and if I think take](https://youtu.be/XBGhqlxlr00?t=717) [thumb Nails Z it will include two values](https://youtu.be/XBGhqlxlr00?t=720) [and this didn't have a storyboard but](https://youtu.be/XBGhqlxlr00?t=725) [let's take](https://youtu.be/XBGhqlxlr00?t=727) [maybe it seems none of them includes a](https://youtu.be/XBGhqlxlr00?t=728) [story board which is getting to be](https://youtu.be/XBGhqlxlr00?t=732) [suspicious so something's up with my](https://youtu.be/XBGhqlxlr00?t=736) [code let's just look at this once more](https://youtu.be/XBGhqlxlr00?t=739) [so storyboard app markdown files get](https://youtu.be/XBGhqlxlr00?t=744) [filter](https://youtu.be/XBGhqlxlr00?t=747) [oh because I didn't include here zero so](https://youtu.be/XBGhqlxlr00?t=750) [this was an area and not the right value](https://youtu.be/XBGhqlxlr00?t=754) [so now let's look](https://youtu.be/XBGhqlxlr00?t=757) [at](https://youtu.be/XBGhqlxlr00?t=760) [thumbnails uh let's say](https://youtu.be/XBGhqlxlr00?t=763) [than yes there are two files already so](https://youtu.be/XBGhqlxlr00?t=767) [you can see here that 20](https://youtu.be/XBGhqlxlr00?t=770) [one base name is the story board so it](https://youtu.be/XBGhqlxlr00?t=774) [seems that early on I didn't have](https://youtu.be/XBGhqlxlr00?t=778) [storyboards but later on I did anyway I](https://youtu.be/XBGhqlxlr00?t=780) [have my thumbnails and now I want to add](https://youtu.be/XBGhqlxlr00?t=783) [these to uh exol drum what I'm going to](https://youtu.be/XBGhqlxlr00?t=788) [do here is I'm going to use the EA help](https://youtu.be/XBGhqlxlr00?t=791) [function to help me with](https://youtu.be/XBGhqlxlr00?t=794) [the EA add image](https://youtu.be/XBGhqlxlr00?t=797) [function and it seems that for some](https://youtu.be/XBGhqlxlr00?t=804) [reason console log uh stopped working](https://youtu.be/XBGhqlxlr00?t=809) [that happens sometimes a very](https://youtu.be/XBGhqlxlr00?t=813) [frustrating issue and I don't have a](https://youtu.be/XBGhqlxlr00?t=815) [solution for it unfortunately so we are](https://youtu.be/XBGhqlxlr00?t=819) [not going to look at the help my only](https://youtu.be/XBGhqlxlr00?t=822) [solution at this time when this happens](https://youtu.be/XBGhqlxlr00?t=825) [is to restore defaults and](https://youtu.be/XBGhqlxlr00?t=828) [restart obsidian but then I lose all my](https://youtu.be/XBGhqlxlr00?t=831) [work uh frankly if you know how to fix](https://youtu.be/XBGhqlxlr00?t=835) [this in another way help me because this](https://youtu.be/XBGhqlxlr00?t=838) [happens to me often that for whatever](https://youtu.be/XBGhqlxlr00?t=841) [reason the developer console stops to](https://youtu.be/XBGhqlxlr00?t=844) [display console log messages](https://youtu.be/XBGhqlxlr00?t=847) [console log so here's console log test](https://youtu.be/XBGhqlxlr00?t=850) [and there's nothing and of course here I](https://youtu.be/XBGhqlxlr00?t=855) [can I can click the different uh folders](https://youtu.be/XBGhqlxlr00?t=857) [nothing so it it just disappears and I](https://youtu.be/XBGhqlxlr00?t=862) [have no idea why this does this but this](https://youtu.be/XBGhqlxlr00?t=865) [is is this happens to me often and super](https://youtu.be/XBGhqlxlr00?t=868) [frustrating the only solution I found on](https://youtu.be/XBGhqlxlr00?t=871) [the internet was to come here to](https://youtu.be/XBGhqlxlr00?t=874) [settings restore defaults and](https://youtu.be/XBGhqlxlr00?t=877) [reload but then everything is uh lost so](https://youtu.be/XBGhqlxlr00?t=880) [I need I mean not everything My Vault is](https://youtu.be/XBGhqlxlr00?t=885) [there but my code I need to start again](https://youtu.be/XBGhqlxlr00?t=888) [so I'm not going to do that instead we](https://youtu.be/XBGhqlxlr00?t=890) [going to uh just write our function so](https://youtu.be/XBGhqlxlr00?t=894) [I'm going to Define find a value which](https://youtu.be/XBGhqlxlr00?t=897) [is the column and then I'm going to go](https://youtu.be/XBGhqlxlr00?t=899) [through all the thumbnails for each and](https://youtu.be/XBGhqlxlr00?t=903) [I'm going to take the](https://youtu.be/XBGhqlxlr00?t=907) [thumbnail and the index so for each](https://youtu.be/XBGhqlxlr00?t=910) [iterates in a way that you get the](https://youtu.be/XBGhqlxlr00?t=915) [thumbnail first and then the index of](https://youtu.be/XBGhqlxlr00?t=918) [which element you're working on and uh](https://youtu.be/XBGhqlxlr00?t=920) [this is going to be my function right](https://youtu.be/XBGhqlxlr00?t=924) [here and actually I'm going to to start](https://youtu.be/XBGhqlxlr00?t=927) [with column minus one and so what I'm](https://youtu.be/XBGhqlxlr00?t=929) [going to do here is first of all I'm](https://youtu.be/XBGhqlxlr00?t=932) [going to calculate the row such that I](https://youtu.be/XBGhqlxlr00?t=934) [take index and I do the modulo 12](https://youtu.be/XBGhqlxlr00?t=937) [because I have 145 I think 12 by2 I'm](https://youtu.be/XBGhqlxlr00?t=941) [just going to import all of the](https://youtu.be/XBGhqlxlr00?t=945) [thumbnails into this block and I'm](https://youtu.be/XBGhqlxlr00?t=948) [actually going to write here a sync](https://youtu.be/XBGhqlxlr00?t=951) [you'll see why because I'm going to be](https://youtu.be/XBGhqlxlr00?t=955) [eving the loading of images and I need](https://youtu.be/XBGhqlxlr00?t=957) [to make this function asynchronous for](https://youtu.be/XBGhqlxlr00?t=960) [that and if row equals](https://youtu.be/XBGhqlxlr00?t=963) [zero then I'm going to move to the next](https://youtu.be/XBGhqlxlr00?t=969) [column and this is why by the way I](https://youtu.be/XBGhqlxlr00?t=974) [started with column minus one because](https://youtu.be/XBGhqlxlr00?t=976) [right in the beginning I'm going to](https://youtu.be/XBGhqlxlr00?t=979) [increase column to get us started and](https://youtu.be/XBGhqlxlr00?t=981) [now it's going to be pretty simple](https://youtu.be/XBGhqlxlr00?t=985) [because all I need to do is I need to](https://youtu.be/XBGhqlxlr00?t=988) [add EA add image and I'm going to add my](https://youtu.be/XBGhqlxlr00?t=991) [image to](https://youtu.be/XBGhqlxlr00?t=997) [the x value is the top left of the so](https://youtu.be/XBGhqlxlr00?t=1000) [the values here are XY top X top y uh](https://youtu.be/XBGhqlxlr00?t=1006) [width and height and then some](https://youtu.be/XBGhqlxlr00?t=1011) [formatting values which we are not going](https://youtu.be/XBGhqlxlr00?t=1013) [to image ID equals and this function](https://youtu.be/XBGhqlxlr00?t=1016) [returns an ID of the image which I want](https://youtu.be/XBGhqlxlr00?t=1020) [because I want to group elements you'll](https://youtu.be/XBGhqlxlr00?t=1023) [see in a](https://youtu.be/XBGhqlxlr00?t=1025) [second or I want to ref reference this](https://youtu.be/XBGhqlxlr00?t=1027) [image but so I'm going to add the image](https://youtu.be/XBGhqlxlr00?t=1030) [and I'm going to do it such that column](https://youtu.be/XBGhqlxlr00?t=1034) [so the the proportion of the images are](https://youtu.be/XBGhqlxlr00?t=1038) [16 by 9 because these are all designed](https://youtu.be/XBGhqlxlr00?t=1043) [to be YouTube uh image so I'm going to](https://youtu.be/XBGhqlxlr00?t=1046) [make these um let's just be simple so](https://youtu.be/XBGhqlxlr00?t=1049) [width is going to be uh 16](https://youtu.be/XBGhqlxlr00?t=1054) [* uh](https://youtu.be/XBGhqlxlr00?t=1058) [200 I know only 20 and height is going](https://youtu.be/XBGhqlxlr00?t=1062) [to be 9 * 20 so that's just going to be](https://youtu.be/XBGhqlxlr00?t=1066) [the two values this maintains the aspect](https://youtu.be/XBGhqlxlr00?t=1071) [ratio and I'm going to have a padding uh](https://youtu.be/XBGhqlxlr00?t=1074) [that is going to be equal to I don't](https://youtu.be/XBGhqlxlr00?t=1078) [know 50 uh there's going to be plenty of](https://youtu.be/XBGhqlxlr00?t=1081) [space between the items and so a column](https://youtu.be/XBGhqlxlr00?t=1085) [times](https://youtu.be/XBGhqlxlr00?t=1090) [padding plus column](https://youtu.be/XBGhqlxlr00?t=1092) [times width is the x value and then](https://youtu.be/XBGhqlxlr00?t=1096) [we're going to](https://youtu.be/XBGhqlxlr00?t=1101) [have row times](https://youtu.be/XBGhqlxlr00?t=1102) [padding plus row row](https://youtu.be/XBGhqlxlr00?t=1106) [time height is going to be the y](https://youtu.be/XBGhqlxlr00?t=1110) [coordinate and then I'm going to have](https://youtu.be/XBGhqlxlr00?t=1114) [the width and the height and so I've](https://youtu.be/XBGhqlxlr00?t=1116) [added my](https://youtu.be/XBGhqlxlr00?t=1119) [image and then for the image I want to](https://youtu.be/XBGhqlxlr00?t=1121) [get the image so I'm going to get the](https://youtu.be/XBGhqlxlr00?t=1124) [image EA get](https://youtu.be/XBGhqlxlr00?t=1127) [Element image ID like this and I want to](https://youtu.be/XBGhqlxlr00?t=1130) [change the image link to be](https://youtu.be/XBGhqlxlr00?t=1134) [and I'm going to do it like this I'm](https://youtu.be/XBGhqlxlr00?t=1138) [going to](https://youtu.be/XBGhqlxlr00?t=1142) [add uh and I didn't add the image yet so](https://youtu.be/XBGhqlxlr00?t=1144) [I need](https://youtu.be/XBGhqlxlr00?t=1148) [to add image now this is this is](https://youtu.be/XBGhqlxlr00?t=1149) [frustrating because I really don't know](https://youtu.be/XBGhqlxlr00?t=1153) [the so let's do this um we're going to](https://youtu.be/XBGhqlxlr00?t=1156) [open an empty document just so we can](https://youtu.be/XBGhqlxlr00?t=1160) [look in here and I'm going to type EA](https://youtu.be/XBGhqlxlr00?t=1164) [add in image and now we can look at top](https://youtu.be/XBGhqlxlr00?t=1167) [X top Y image file so I don't give a](https://youtu.be/XBGhqlxlr00?t=1170) [width and height I can probably offer](https://youtu.be/XBGhqlxlr00?t=1174) [that](https://youtu.be/XBGhqlxlr00?t=1178) [value in the scale anchor](https://youtu.be/XBGhqlxlr00?t=1179) [[Music]](https://youtu.be/XBGhqlxlr00?t=1183) [ban I'm going to resize this then so I](https://youtu.be/XBGhqlxlr00?t=1186) [don't this is so far good but then I](https://youtu.be/XBGhqlxlr00?t=1189) [need to add the image file here I'm](https://youtu.be/XBGhqlxlr00?t=1192) [going to add the image file that](https://youtu.be/XBGhqlxlr00?t=1196) [the first value in](https://youtu.be/XBGhqlxlr00?t=1198) [my uh thumbnail value and then I'm going](https://youtu.be/XBGhqlxlr00?t=1201) [to add a link the link is going to be](https://youtu.be/XBGhqlxlr00?t=1205) [just a markdown link and here I'm going](https://youtu.be/XBGhqlxlr00?t=1210) [to take the storyboard](https://youtu.be/XBGhqlxlr00?t=1213) [value](https://youtu.be/XBGhqlxlr00?t=1215) [and I like](https://youtu.be/XBGhqlxlr00?t=1218) [this and I'm just going to take question](https://youtu.be/XBGhqlxlr00?t=1220) [mark. path because actually this might](https://youtu.be/XBGhqlxlr00?t=1225) [actually be uh undefined so like this](https://youtu.be/XBGhqlxlr00?t=1229) [this is going to be](https://youtu.be/XBGhqlxlr00?t=1233) [good um no not like](https://youtu.be/XBGhqlxlr00?t=1235) [this like this so](https://youtu.be/XBGhqlxlr00?t=1239) [if there's a story board then I take the](https://youtu.be/XBGhqlxlr00?t=1242) [path and I'm adding it to a markdown](https://youtu.be/XBGhqlxlr00?t=1246) [link that I'm adding as a link to the](https://youtu.be/XBGhqlxlr00?t=1250) [image and I'm going to set the image](https://youtu.be/XBGhqlxlr00?t=1254) [width to be width and I'm going to set](https://youtu.be/XBGhqlxlr00?t=1259) [the image height to be height like this](https://youtu.be/XBGhqlxlr00?t=1263) [and I](https://youtu.be/XBGhqlxlr00?t=1270) [think I think we're probably done so](https://youtu.be/XBGhqlxlr00?t=1271) [here goes nothing I'm going to press](https://youtu.be/XBGhqlxlr00?t=1275) [enter and I'm going](https://youtu.be/XBGhqlxlr00?t=1278) [to this is probably not good because I](https://youtu.be/XBGhqlxlr00?t=1280) [should have evad but okay so it is](https://youtu.be/XBGhqlxlr00?t=1283) [actually in the background doing it](https://youtu.be/XBGhqlxlr00?t=1286) [stuff I so you see I'm not going to run](https://youtu.be/XBGhqlxlr00?t=1288) [this again because or well I can but I](https://youtu.be/XBGhqlxlr00?t=1292) [would need](https://youtu.be/XBGhqlxlr00?t=1295) [to um clear EA if I wanted to but what I](https://youtu.be/XBGhqlxlr00?t=1296) [should have done was this to oh actually](https://youtu.be/XBGhqlxlr00?t=1300) [no I will need to rerun this so here we](https://youtu.be/XBGhqlxlr00?t=1303) [go I'm going to and you can see that in](https://youtu.be/XBGhqlxlr00?t=1306) [the background this is still running so](https://youtu.be/XBGhqlxlr00?t=1310) [uh](https://youtu.be/XBGhqlxlr00?t=1314) [EA and it might actually run for a time](https://youtu.be/XBGhqlxlr00?t=1315) [so what's happening](https://youtu.be/XBGhqlxlr00?t=1318) [is ADD image asynchronously loads all](https://youtu.be/XBGhqlxlr00?t=1320) [the images so right now in the](https://youtu.be/XBGhqlxlr00?t=1324) [background exol draw is loading all of](https://youtu.be/XBGhqlxlr00?t=1326) [these files and creating an image but](https://youtu.be/XBGhqlxlr00?t=1330) [the issue](https://youtu.be/XBGhqlxlr00?t=1333) [is well let's see what happens so EA add](https://youtu.be/XBGhqlxlr00?t=1334) [elements to view and let's press enter](https://youtu.be/XBGhqlxlr00?t=1339) [and let's see what happens I did press](https://youtu.be/XBGhqlxlr00?t=1343) [enter it's still](https://youtu.be/XBGhqlxlr00?t=1345) [uh timing](https://youtu.be/XBGhqlxlr00?t=1348) [out because I think it's still running](https://youtu.be/XBGhqlxlr00?t=1350) [in the background so](https://youtu.be/XBGhqlxlr00?t=1352) [now yeah this is this is](https://youtu.be/XBGhqlxlr00?t=1357) [100 uh 45 drawings that need to be](https://youtu.be/XBGhqlxlr00?t=1360) [process so this might take a little](https://youtu.be/XBGhqlxlr00?t=1363) [time so let's see what](https://youtu.be/XBGhqlxlr00?t=1368) [happens](https://youtu.be/XBGhqlxlr00?t=1376) [my PC is spinning like mad oh there you](https://youtu.be/XBGhqlxlr00?t=1380) [go something has has arrived so let's](https://youtu.be/XBGhqlxlr00?t=1383) [scroll back to](https://youtu.be/XBGhqlxlr00?t=1386) [content okay so things have been added](https://youtu.be/XBGhqlxlr00?t=1388) [the there's of course uh the end result](https://youtu.be/XBGhqlxlr00?t=1391) [is not yet perfect so you can see here](https://youtu.be/XBGhqlxlr00?t=1395) [that things are toppled on one another](https://youtu.be/XBGhqlxlr00?t=1397) [like this but actually all of my](https://youtu.be/XBGhqlxlr00?t=1401) [thumbnails uh were loaded so effectively](https://youtu.be/XBGhqlxlr00?t=1404) [are not so bad but let's let's just uh](https://youtu.be/XBGhqlxlr00?t=1408) [let's just clear this like this I'm](https://youtu.be/XBGhqlxlr00?t=1411) [going to type here EA clear like that so](https://youtu.be/XBGhqlxlr00?t=1414) [I'm going to empty excal draw automate](https://youtu.be/XBGhqlxlr00?t=1419) [and I'm going to just run this once more](https://youtu.be/XBGhqlxlr00?t=1423) [and I'm going to do this I'm going to](https://youtu.be/XBGhqlxlr00?t=1426) [evate this and I'm going to con](https://youtu.be/XBGhqlxlr00?t=1429) [console log index so I'm just going to](https://youtu.be/XBGhqlxlr00?t=1435) [print the index now in our case the](https://youtu.be/XBGhqlxlr00?t=1440) [index is not going to be printed so all](https://youtu.be/XBGhqlxlr00?t=1442) [we're going to experiment experience is](https://youtu.be/XBGhqlxlr00?t=1445) [that this is going to go on for ages uh](https://youtu.be/XBGhqlxlr00?t=1447) [without any feedback but uh we'll live](https://youtu.be/XBGhqlxlr00?t=1451) [with that EA add elements to view like](https://youtu.be/XBGhqlxlr00?t=1455) [this at the end once it's done but if](https://youtu.be/XBGhqlxlr00?t=1460) [console log would be working for me then](https://youtu.be/XBGhqlxlr00?t=1464) [when I press enter then I would get](https://youtu.be/XBGhqlxlr00?t=1467) [items here uh one by one after each](https://youtu.be/XBGhqlxlr00?t=1471) [other and of course I was silly so I](https://youtu.be/XBGhqlxlr00?t=1475) [shouldn't have added add elements to](https://youtu.be/XBGhqlxlr00?t=1478) [view because at that time nothing yet](https://youtu.be/XBGhqlxlr00?t=1480) [was created so right now we just need to](https://youtu.be/XBGhqlxlr00?t=1484) [wait you can see here that exol draw is](https://youtu.be/XBGhqlxlr00?t=1488) [loading images in the background and](https://youtu.be/XBGhqlxlr00?t=1490) [some of the files uh have some issues uh](https://youtu.be/XBGhqlxlr00?t=1493) [that prevents them from being loaded but](https://youtu.be/XBGhqlxlr00?t=1497) [okay](https://youtu.be/XBGhqlxlr00?t=1500) [that's uh that's not a problem let's](https://youtu.be/XBGhqlxlr00?t=1501) [just](https://youtu.be/XBGhqlxlr00?t=1504) [wait uh until this completes we're going](https://youtu.be/XBGhqlxlr00?t=1504) [to give it a few minutes and in the](https://youtu.be/XBGhqlxlr00?t=1507) [meantime I have](https://youtu.be/XBGhqlxlr00?t=1510) [my U task manager here and you can see](https://youtu.be/XBGhqlxlr00?t=1513) [here that at this time obsidian is uh](https://youtu.be/XBGhqlxlr00?t=1516) [spinning pretty fast so it's taking up a](https://youtu.be/XBGhqlxlr00?t=1520) [complete uh](https://youtu.be/XBGhqlxlr00?t=1524) [CPU um like that so you can see when](https://youtu.be/XBGhqlxlr00?t=1525) [this number](https://youtu.be/XBGhqlxlr00?t=1529) [decreases uh the CPU load then I'll know](https://youtu.be/XBGhqlxlr00?t=1530) [that uh the thing has finished and it](https://youtu.be/XBGhqlxlr00?t=1534) [seems the script has finished because](https://youtu.be/XBGhqlxlr00?t=1537) [you can see now obsidian is no longer](https://youtu.be/XBGhqlxlr00?t=1539) [spinning and now if I come back here and](https://youtu.be/XBGhqlxlr00?t=1543) [add elements to](https://youtu.be/XBGhqlxlr00?t=1546) [view like](https://youtu.be/XBGhqlxlr00?t=1549) [this](https://youtu.be/XBGhqlxlr00?t=1552) [then](https://youtu.be/XBGhqlxlr00?t=1554) [hopefully](https://youtu.be/XBGhqlxlr00?t=1556) [it is yeah again we have this uh big](https://youtu.be/XBGhqlxlr00?t=1558) [spinning because](https://youtu.be/XBGhqlxlr00?t=1561) [now uh I have whole bunch of but this](https://youtu.be/XBGhqlxlr00?t=1563) [now looks uh slightly bit more organized](https://youtu.be/XBGhqlxlr00?t=1566) [but for sure uh my sizing of the images](https://youtu.be/XBGhqlxlr00?t=1570) [are off](https://youtu.be/XBGhqlxlr00?t=1573) [so the the 16](https://youtu.be/XBGhqlxlr00?t=1575) [by9 um idea didn't quite work so you can](https://youtu.be/XBGhqlxlr00?t=1578) [see here that this image is completely](https://youtu.be/XBGhqlxlr00?t=1581) [distorted](https://youtu.be/XBGhqlxlr00?t=1586) [so probably I would need to scale this](https://youtu.be/XBGhqlxlr00?t=1588) [better so let's just do one more attempt](https://youtu.be/XBGhqlxlr00?t=1592) [EA clear and I'm going to](https://youtu.be/XBGhqlxlr00?t=1596) [do this slightly differently so instead](https://youtu.be/XBGhqlxlr00?t=1602) [of](https://youtu.be/XBGhqlxlr00?t=1606) [a a sequence I'm going to start with](https://youtu.be/XBGhqlxlr00?t=1608) [index equals z and I'm going to write](https://youtu.be/XBGhqlxlr00?t=1612) [for T](https://youtu.be/XBGhqlxlr00?t=1617) [of](https://youtu.be/XBGhqlxlr00?t=1619) [thumbnails like this so I'm switching](https://youtu.be/XBGhqlxlr00?t=1621) [the for each uh loop into this uh for](https://youtu.be/XBGhqlxlr00?t=1626) [Loop I'm going so this now is going to](https://youtu.be/XBGhqlxlr00?t=1632) [evade each of the images and of course](https://youtu.be/XBGhqlxlr00?t=1635) [here at the end I need to increase index](https://youtu.be/XBGhqlxlr00?t=1638) [uh with the next value and here in](https://youtu.be/XBGhqlxlr00?t=1643) [instead of setting the width like this](https://youtu.be/XBGhqlxlr00?t=1647) [I'm going to do the following I'm going](https://youtu.be/XBGhqlxlr00?t=1651) [to set the width to be the width I](https://youtu.be/XBGhqlxlr00?t=1654) [defined there but I'm going to set the](https://youtu.be/XBGhqlxlr00?t=1658) [height such that I'm going to take](https://youtu.be/XBGhqlxlr00?t=1660) [the](https://youtu.be/XBGhqlxlr00?t=1663) [um width equals image width like](https://youtu.be/XBGhqlxlr00?t=1667) [this so I'm storing the imported image](https://youtu.be/XBGhqlxlr00?t=1673) [width and then I'm going to uh](https://youtu.be/XBGhqlxlr00?t=1676) [calculate oh that was much smaller issue](https://youtu.be/XBGhqlxlr00?t=1680) [I misspelled](https://youtu.be/XBGhqlxlr00?t=1685) [width because it said width and that's](https://youtu.be/XBGhqlxlr00?t=1687) [why it had zero effect so I was only](https://youtu.be/XBGhqlxlr00?t=1690) [changing the height not the width so you](https://youtu.be/XBGhqlxlr00?t=1692) [can see here this was just my silly](https://youtu.be/XBGhqlxlr00?t=1694) [um so this can this can be height and it](https://youtu.be/XBGhqlxlr00?t=1699) [is actually I don't need to scale](https://youtu.be/XBGhqlxlr00?t=1702) [anything so I'm now going to press enter](https://youtu.be/XBGhqlxlr00?t=1705) [now this](https://youtu.be/XBGhqlxlr00?t=1707) [time this is going to take longer to uh](https://youtu.be/XBGhqlxlr00?t=1710) [complete and at the end it should](https://youtu.be/XBGhqlxlr00?t=1715) [automatically add the item so you can](https://youtu.be/XBGhqlxlr00?t=1718) [see here it's running it's running you](https://youtu.be/XBGhqlxlr00?t=1720) [can see that my CPU is spinning like](https://youtu.be/XBGhqlxlr00?t=1722) [crazy but because now this is a for Loop](https://youtu.be/XBGhqlxlr00?t=1726) [the for Loop waiting for each of the](https://youtu.be/XBGhqlxlr00?t=1730) [images to be](https://youtu.be/XBGhqlxlr00?t=1732) [loaded um it will only add elements to](https://youtu.be/XBGhqlxlr00?t=1735) [view when it is done so let's look](https://youtu.be/XBGhqlxlr00?t=1738) [at uh this hopefully we will see this](https://youtu.be/XBGhqlxlr00?t=1742) [complete and there we go and beautiful](https://youtu.be/XBGhqlxlr00?t=1745) [this is exactly what I had in mind I](https://youtu.be/XBGhqlxlr00?t=1748) [imported all of my images so now I can](https://youtu.be/XBGhqlxlr00?t=1752) [close this I imported all of my](https://youtu.be/XBGhqlxlr00?t=1755) [thumbnails here in this beautiful Matrix](https://youtu.be/XBGhqlxlr00?t=1758) [and hopefully if I click on an image](https://youtu.be/XBGhqlxlr00?t=1762) [like click on this one that I actually](https://youtu.be/XBGhqlxlr00?t=1765) [get my link to the story board as well](https://youtu.be/XBGhqlxlr00?t=1768) [because I added the link to the story](https://youtu.be/XBGhqlxlr00?t=1770) [board and it will actually open the](https://youtu.be/XBGhqlxlr00?t=1773) [storyboard file so I'm super happy with](https://youtu.be/XBGhqlxlr00?t=1776) [the end result you can see here 1 2 3 4](https://youtu.be/XBGhqlxlr00?t=1780) [5 6 7 8 9 10 11 12 as expected row I'm](https://youtu.be/XBGhqlxlr00?t=1783) [guessing it's also 12 plus one columns](https://youtu.be/XBGhqlxlr00?t=1788) [because it was](https://youtu.be/XBGhqlxlr00?t=1792) [145](https://youtu.be/XBGhqlxlr00?t=1794) [items so](https://youtu.be/XBGhqlxlr00?t=1795) [that's the process I think](https://youtu.be/XBGhqlxlr00?t=1798) [it's a pretty straightforward process](https://youtu.be/XBGhqlxlr00?t=1801) [now of course because I was explaining](https://youtu.be/XBGhqlxlr00?t=1804) [it and showing you stuff it went slower](https://youtu.be/XBGhqlxlr00?t=1806) [normally it goes much quicker because I](https://youtu.be/XBGhqlxlr00?t=1809) [can just type and it gets things done](https://youtu.be/XBGhqlxlr00?t=1812) [but hopefully you saw my logic of how](https://youtu.be/XBGhqlxlr00?t=1815) [I'm creating this script and I hope that](https://youtu.be/XBGhqlxlr00?t=1818) [you take away some learning from this](https://youtu.be/XBGhqlxlr00?t=1822) [and you can also use excal draw to](https://youtu.be/XBGhqlxlr00?t=1824) [automate stuff for you I think this is](https://youtu.be/XBGhqlxlr00?t=1827) [one of the superpowers of obsidian and](https://youtu.be/XBGhqlxlr00?t=1830) [obsidian EXC colol that you can automate](https://youtu.be/XBGhqlxlr00?t=1833) [your workflows so](https://youtu.be/XBGhqlxlr00?t=1836) [simply thank you for watching and let me](https://youtu.be/XBGhqlxlr00?t=1839) [know in the comments if you would like](https://youtu.be/XBGhqlxlr00?t=1842) [to see similar materials in the future](https://youtu.be/XBGhqlxlr00?t=1844) [thank you](https://youtu.be/XBGhqlxlr00?t=1847)