Unlock the power of precise image references with our new feature—copy, paste, and zoom into any part of your drawings effortlessly!
Hey everyone, it's Jolt here. I have a special feature for you, one which many of you have asked for many, many times, and I finally decided to build it. This feature builds on block references for images but now takes it a step further.
Let's start this demonstration with something that should already be familiar. Imagine I have this drawing and this group of elements here, grouped into an Excal group. If I right-click on the group, I can select copy link for selected elements and get a dialogue where I can either copy a link, an area, or a group reference. I'm not going to go deep into what area and group are; there's another video linked in the description that you can watch for that. I'm now going to click on group, and if I head over to a markdown document and paste this, then this part of that larger image is pasted here. If I long-click on this, my original image opens and it's zoomed on the element. This is super useful.
Now, the new feature allows you to do exactly the same via Excal drawing. If I head over here and simply press Ctrl+V or just paste, then this part of the image from the other image is inserted here. This is as you would expect how it works.
I want to show you two more interesting things here. First, if I take this house or this frame using the frame tool, and right-click on the frame to copy the link for selected elements, you will see that I have two new buttons: frame and clipped frame. Let's first copy the frame. If I copy the frame and head over here, you will see that everything in the frame was copied here. If I come back here, you will see that actually this cart didn't fit the frame, but these elements were contained in the frame. In the case of a frame reference, all the elements from the frame are referenced without clipping. This was available until now but only to markdown documents.
Imagine I can come over here and, of course, in the markdown document as well, I can paste this frame reference. What's new is now I also have the clipped frame reference. If I click this and come over here, you can see that now the cart is inserted with the clipping of the frame. Also, it's maybe not so noticeable, but you can see there's a padding. This is the default padding set up in your settings. If it's a clipped frame, the padding is zero, so it's right on the frame. The same works for a markdown document as well; I can insert a clipped frame here as well. In this case, the entire frame is included, so you can also notice that the empty space above the cart is included here because this is the frame window, while in this case, it's the elements within the frame with the frame reference.
Quickly copy and paste image fragments to streamline your visual projects.
When it comes to embedded files, you can change the reference to "house" if desired. To see what you're doing, you can also add an exclamation mark. For instance, changing the reference to "house" will replace the images with the frame references of the house. This allows you, even from a script, to select which part of an image you want to insert.
The final feature I want to show you is a small bonus. If no elements are selected and you click on the back of the image, a new function appears: copy embed link for this drawing. This is super useful because, by clicking this, you can paste the drawing elsewhere. For example, copying the embed link and pasting it will quickly insert the image. This command, copy link for selected elements or copy link for this drawing, is also available on the command palette, allowing you to use Obsidian hotkeys for setup.
Now, let's look at how construction and image fragments are similar and different. Using the double bubble map, one of my favorite visual thinking tools, we can break down complex visuals into manageable components. Both methods allow you to isolate parts of a larger drawing, enhancing focus on specific elements within that context, and they enable linking and reusing visual elements in different drawings.
However, there are differences. Deconstruction creates reusable icons for repeated use, typically icons you want to repeat many times. In contrast, image fragments reference a specific part of a larger illustration, perfect for infographics where you break up a big image and provide explanations around it.
In deconstruction, the carved-out element becomes context-neutral, allowing for use in various places. Conversely, an image fragment retains the context of its source, always referencing the larger image. Deconstruction is suitable for frequent reuse across multiple contexts, while image fragments are ideal for infrequent and specific references.
Deconstruction is efficient, rendering only the isolated elements, whereas image fragments render the entire image before isolating the part. Deconstruction is more robust, with a dedicated file for each carved-out element. Image fragments are more fragile; if you ungroup and regroup elements, the group ID changes, potentially breaking the link.
Deconstruction benefits from having an icon library and a naming convention. In contrast, for image fragments, the source image itself serves as the library, requiring you to reference elements directly from it. Additionally, deconstruction allows for further breaking down elements into smaller parts, such as deconstructing a house into windows.
These comparisons should help you decide when to use image fragments and when to use deconstruction. If you're interested in learning more about visual thinking workflows and becoming a power user of Excalidraw and visual thinking in Obsidian, I recommend checking out cohort 10 of the Visual Thinking Workshop, which will commence at the end of August. Thank you.