Excalidraw-Obsidian 2.0.19: PDF Cropping

Summary

The video demonstrates new features in Excalidraw for Obsidian that allow cropping images and PDF pages directly within documents. It shows how to launch the image cropper, make selections, customize backgrounds, save cropped images to specified folders, and round image corners. The presenter explains how cropped images retain links to their original source documents for reference. They emphasize how the enhanced connectivity through backlinks and context makes this a particularly valuable feature for knowledge management and note taking. Overall, the video highlights innovative capabilities to incorporate visuals into notes while maintaining their relationships to source material.

Takeaways

• 😀 When cropping images from a PDF in Obsidian, the new Excalidraw feature retains the connection to the original PDF source
• 📷 The cropped image can be clicked to open the original PDF at the exact page the image was captured from
• ✂️ The image cropping feature allows flexible selections - drag to crop, mask parts out, adjust corners etc
• 🖼️ Cropped images can have transparent backgrounds visible in Obsidian using custom CSS classes
• 📁 A dedicated folder can be set to store all cropped image files separately
• 🔖 A custom file name prefix can be set for cropped images
• 🌆 Images embedded in Obsidian notes can now have rounded corners easily applied
• 📎 When referencing a PDF page to crop, copy a section link to that page for accurate context
• 🖥️ The cropping works similarly across Canvas, Markdown and Excalidraw in Obsidian
• 🎯 Overall the cropping feature enables easy capture of images from PDFs while retaining source context

Q & A

What does the speaker do when he wants to capture an image from a PDF document in Obsidian?

The speaker starts the screen capture tool, selects the image, presses paste, and now has the image in his notes. However, this method disconnects the image from its original source in the PDF.

How does the extended image cropping feature in Excalidraw work for PDF documents?

When cropping a PDF document in Excalidraw, the speaker can press Ctrl/Command+P to open the image cropper, then drag to select the desired area of the page to crop. The cropped image retains a link to the original PDF location.

How can you open a PDF document to a specific page when referencing it from an Obsidian note?

Add a hash tag followed by page equals and the page number. For example, #page=9 will open the linked PDF document to page 9.

What are two ways to make the cropped text from a PDF more readable in Excalidraw?

You can click on the cropped image and change the background color to white or another color. Or, modify the CSS classes for the image to set a background color.

Where does Excalidraw save the separate crop files by default?

The crop files are saved by default in a subfolder called 'attachments' under the current folder, unless you specify a different crop file folder in the Excalidraw settings.

How can you set a file name prefix for cropped images in Excalidraw?

In the Saving and File Name settings section, add your desired cropped file prefix. For example, add 'C' or 'cropped_' as a prefix.

What is the new image feature demonstrated at the end of the video?

There is now an option to add rounded corners to images in Excalidraw. Just click the 'Rounded Corner' button in the image properties.

Why does the speaker think the PDF cropping feature is so useful?

Because it allows easily cropping images and text while retaining links to the source PDF. He has found himself using it often since implementing it.

What naming convention does the speaker suggest to reconnect a cropped image with its original PDF source?

He suggests using a naming convention to give the cropped image a name that references back to the source PDF. However, he says this is not a great solution.

How could you customize the background color for cropped PDF images?

In the image properties, modify the CSS classes field to apply your own class with custom styling, like a yellow background color.

Outlines

00:00

📘 How to capture images from PDFs in Obsidian

Paragraph 1 explains how to capture images from PDF documents in Obsidian using the Excalidraw image cropping feature. It allows cropping a section of a PDF document, embedding it in your notes with a link back to the original source page. This retains context and connection to the original document.

05:00

💡 Tips for working with cropped PDF images

Paragraph 2 provides tips for working with cropped PDF images in Excalidraw. It shows how to change background color for clarity, use custom CSS classes to define background colors, and refresh links to apply CSS. It also covers the crop file folder setting to save copies separate from original PDFs.

10:03

👋 Recap and new rounded image corners

Paragraph 3 concludes by recapping the PDF cropping feature and its usefulness. It also shows a new capability to round the corners of images for visual appeal.

Keywords

💡cropping

Cropping refers to selecting and extracting a region or portion of an image. In the video, the presenter demonstrates how to crop images and PDF pages using the Excal Draw image cropping feature in Obsidian. This allows capturing and embedding parts of PDF documents into notes while retaining links to the original source. For example, the presenter crops an image from a PDF document and embeds it into a markdown note.

💡PDF documents

PDF documents are mentioned frequently as the sources being cropped. The presenter shows how to crop images and sections from PDFs loaded in the PDF reader or embedded into notes. The cropped images retain links to the original PDF location and page, allowing easy reference. For instance, a double click on the cropped image opens the PDF document on the corresponding page.

💡markdown notes

Markdown notes refer to notes created in Obsidian using markdown formatting. The presenter demonstrates embedding cropped images and PDF sections into markdown notes in Obsidian. This allows adding visual references from PDFs while writing notes. For example, a cropped diagram from a PDF is embedded into a markdown note explaining the concept.

💡image cropper

The image cropper is the interface used to select and crop regions from images and PDFs. Invoked through a command, it allows customizing the crop boundaries. Additional features like masks and backgrounds can also be configured. Once done cropping, the image is embedded into the target note.

💡embedded images

Embedded images refer to images cropped from PDFs and embedded into notes while retaining links to the original source. This embedding happens automatically when cropping through Excal Draw. The benefit is being able to reference back to the PDF context when needed. The presentation shows examples of embedded images across note types.

💡links to source

The embedded cropped images contain links that open up the original PDF document and page that the image was cropped from. This helps maintain connection to the source context from where the image was extracted. The presenter emphasizes and demonstrates this capability in Obsidian with Excal Draw enabled.

💡CSS classes

CSS classes allow custom styling for the cropped image backgrounds. Since PDFs can have transparent backgrounds, the cropped images may be hard to read. Applying CSS classes can add colored backgrounds. The presenter shows the image properties pane where such CSS classes can be added and defined.

💡rounded images

A new capability demonstrated is applying rounded corners to images. This is done through the image properties pane in Obsidian Excal Draw. It helps create more visually appealing embeds within notes. The presenter inserts and rounds an image as an example of this feature.

💡cropping files

Cropping files refer to the extracts created from the source PDF or image when cropping. They can be saved to a dedicated folder specified in the settings. This helps organize the attachments generated during cropping. The presenter walks through the setting to define a crop file folder location.

💡crop prefix

A crop prefix can be defined in the file name and saving settings. This prefix gets added to the file names of all cropping extracts generated from the source images and PDFs. For instance, adding a 'C' prefix was demonstrated. The prefix improves identification of cropping files.

Highlights

ExcalDraw's image cropping feature now supports PDF documents

To crop a PDF, press Ctrl/Command+P, type crop, and drag to select the area to crop

Cropped images retain links to the original PDF source

Double click a cropped PDF image to open the original location

To capture an image from a PDF, copy the section link and paste into notes

The cropper allows masking parts of images and changing backgrounds

Set CSS classes to define background colors for cropped PDF images

Refresh links for CSS classes to take effect after embedding images

Set a folder to save ExcalDraw crop files separately from attachments

Add a file name prefix for crop files using the saving and file name setting

Rounded corners can now be applied to inserted images

ExcalDraw's cropping is a powerful feature for capturing images from PDFs

Retained links allow tracking images back to their source context

Recommend trying the new cropping features out for PDF annotations

This is a useful addition for working with and referencing PDF content

Transcripts

hey everyone jol here so when you're

reading a PDF document in obsidian what

do you do when there's an image that you

want to capture for your noes well what

I do is I start the screen capture tool

I select the image and then I press

paste and I have my image

here this solution is only sort of good

the main problem with this solution is

that this image has now lost its

connection to it original source of

course I can use a naming convention I

can give this image a name and with that

I can reference back to the source but

it is not really such a good

solution so I've extended the exol draw

image cropping feature to support PDF

documents this is how it works so for

example now I'm on canvas but I'm going

to show you the same VI an obsidian an

markdown note and with exol draw as well

so here I'm now in a canvas node and I'm

reading this PDF document I'm on this

active page and I want to capture this

image so all I need to do is press

control or command p and type in crop

and with this the image Cropper opens

and I can just simply drag from the top

and drag from the bottom I can also ra

from the side to make this image exactly

the size I want and with that I have the

cropped image here now if you're

interested the Cropper has additional

features so I recommend you watch my

other video on cropping for example I

can mask out parts of the image but

we'll talk about that in the other video

what I want to show you now is the big

difference here is when I double click

on this image then this menu opens and

here I can choose to either open the

Cropper so I can change the cropping of

this image or I can open the original

location of the file so when I click

here then my PDF opens on the page from

which I cropped the image now let me

show you how this feature Works in a

markdown note so let's create a new

markdown note and I'm just going to add

how to read a paragraph here so what

doesn't work is if I read a document

here I don't know which page you're on

so that unfortunately doesn't work what

does work is when you're on a page you

can add hash page equals for example 9

and with this the PDF document opens on

page nine so you can see the page number

right there that's the page number now

if I stand with the cursor on this line

so this line is the active line I can

again open the command pallet and choose

crop and mask image and it will take

this page and open it in the Cropper now

in the Cropper I can again just simply

do my cropping like this and when I'm

done then getting back to my document

you can see that it's now the image and

the image even has a link reference at

the bottom but of course if I double

click on the image then I can still open

the original file as well just as in

case of

canvas now to show you maybe a better

way of achieving this the way I would do

this is I would read a PDF document in

the PDF reader like here and when I get

to a page where I have an image that I

want to capture I would simply select a

part of the text from this page so I'm

now in the PDF reader I select a part of

the page and I copy a link to the

section like this and then I head back

to my markdown document and I simply add

this link to the section and after

adding the link to the section I can

open the Cropper and it will open that

section and again I can simply do my

cropping so you will see that I can crop

the image like this and like this now

what you will also

notice is this is hard to read or

sometimes hard to read so some of the

PDF documents have a transparent

background and there are two things that

it's good to know that you should know

about this first of all if you find this

hard to read you can always click here

and change the background

maybe to White and then the text will be

visible very nicely the other thing I

want to show you is here if I open the

properties panel you will see that I

have a special property here CSS classes

excal draw crob PDF page so if I remove

this then what you will see is when this

image refreshes so I will need

to change this and change it back then

this image will not have a background

color so you might or might not want

this what I want to highlight is here

you

can create or Define your own CSS

classes so if instead of white you want

a yellow background or whatever other

color for the page color of the PDF you

can change the CSS classes here here the

only thing is you need to refresh the

link so the CSS class is applied when

the image is

embedded and then finally let me show

you how this works in exol draw it works

pretty similar to the previous ones so

I'm going to add how to read a paragraph

as an embeddable so now I have the how

to read a paragraph document in embedded

into exol draw I

can oops I can click on this and I can

scroll to the part that I want to crop

so I'm here now if I press crop image

then this page opens and everything

works similar so I can just simply crop

this page like this and when I'm done

with cropping then I can turn back to

xolor draw my image is going to get

updated and here you go so I can now

close this and I can navigate with this

image there are two more small things

that I want to show you regarding

cropping and then there's one more thing

I want to show you as a new feature in

this version of excal obsidian so first

about cropping there are two new

settings that you can use setting number

one is under basic here there's a crop

file folder so the way exol draw crops

an image is it creates an image Cropper

so the image remains your PDF file

remains your PDF file so the cropping

will always read the PDF and create the

crop out of that or the cropped image

out of that but you might want to save

the ex call it draw cropping file to a

specified folder so if you set a folder

here then the cropping file will go to

that folder if not then the cropping

file will follow your files and links

settings so it's in my case it's going

to go in a sub folder under the current

folder called attachments so that's your

option that you can define a dedicated

folder for your crop files the other

setting I added is under saving and file

name and here you can add a prefix for

the crop file I now have cropped but

maybe you just want to add C or whatever

if this is empty then cropped will be

added or used so you can add an

underscore if you want to leave this

sort of empty that's another setting and

then finally the new feature I wanted to

show you is just a small new feature so

I'm going to insert an

image and I'm going to choose my lovely

monkey here so the new feature is now

you can round the corner of images so

here in the properties I can click

rounded corner and then the image will

have a rounded corner so if you like

rounded images now with an image you can

easily achieve that so that's all I

wanted to show you today I think this

cropping feature is really powerful you

can crop and mask images you can crop

and mask PDF Pages PDF Pages retain

their links to the original source and

overall since I've implemented this

feature I'm amazed at in how many cases

I've used it this is such a cool feature

I recommend you try it out and you play

with it enjoy thank you