Working with local images and video

[hcg]

Hi,
I am new to Obsidian, and have spent quite some time trying to figure out a workflow that would suit my needs.
My main use would be documenting the progress of projects:
from idea through prototypes to finished project, and then being able to reuse part of that knowledge in new projects.
So this would involve code snippets, howto recipes, links, screenshots, images and short videos of prototypes.
Up to now I have been doing most of my writing in scrivener and trying to create a wiki using dokuwiki, but I want a better way to organise my notes.

I understand Obsidian is primarily for text, but I hope to find a way to easily include the occasional image and video.
I prefer to keep both images and video locally, and this seems to reduce my options when it comes to formatting.

What I’m trying to do

To use dokuwiki as an example of what I would like to achieve in Obsidian:
The syntax in dokuwiki for adding image and video:
{{:lidarplatform01.jpg?200|}}
{{:lidarplatform.mp4 |}}

This would add an image resized to 200 pixels. When I click on the image it links to the full size image.
The video player includes an option to go full screen.
So both image and video are quite small and inobtrusive as default.

Things I have tried

if I drag an imagefile to my note I would get something like this:
![[teensypinout.jpg]]

I am able to resize it like this:
![[teensypinout.jpg|200]]

I have not figured out if it is possible to add a link to this type of notation which could link to the fullsize image, so by clicking on the small image I should somehow activate [[teensypinout.jpg]]

I looked at the DarkArts theme with custom css to zoom the image when clicking on it, but it didnt go fullsize, only slighly bigger, and it is not very practical for my purposes.

I have also explored the <img approach, and then it is easy to adjust size and add a link, but I have not been able to do this with an image on my disk, only referring to an online image.

It seems this it will be easier to use video, by using the media extended plugin.

HC

[mnvwvnm]

@hcg

I have also explored the <img approach, and then it is easy to adjust size and add a link, but I have not been able to do this with an image on my disk, only referring to an online image.

You can use this:

<img width="200px" src="file:///Users/..../image.jpg">

[hcg]

hmmm, I don´t seem to get the file path correct then (I am testing this in ubuntu).
It would be nice if it was possible to do it with just a slight modification to the ![[image.jpg]] approach since that´s how the image appears when importing it to Obsidian.
My current workaround is this:
![[teensypinout.jpg|200]]
followed by square brackets * square brackets (teensypinout.jpg)
So by clicking on the asterix next to the small image I get to the fullsize version.

[mnvwvnm]

We understand “local files” in different ways: your “local” files are inside your vault; I’m referring to files outside your vault (a “local” file in your system).

EDIT: you can create a css snippet to replace the size of the zoom allowed by your theme

[hcg]

I should still be able to use the path if the image is inside my vault or not?
EDIT: So I try this line:
<img src="media/huzzah32-pinout.jpg" width="110px" height="110px">
This does not work in Obsidian, but works great in Typora, so that should mean the path is right? Or does Obsidian use a different path syntax?

I have very little experience with css, do you have a pointer to how I would make the css snippet?

[hcg]

After some more searching I understand a bit more about the CSS snippets and discovered this amazing post:

"How to achieve" CSS code snippets

As a CSS newbie I have to frequently ask fellow Obsidianites what code to use to achieve a certain effect in my custom CSS sheet. I have made a habit of collecting these habits, and, to make them more easily searchable, I transferred them to …… you guessed it: an MD file. I thought it might be useful to share this with others, who can then add their own snippets, which I can add to the file. I have categorized the snippets on the basis of what they are used for, and have added # headers. You…

And then the repository with all the snippets.

From there I discovered the short snippet to both scale the image and then zoom to a certain size when hovering, and I was happy to discover that this also work for videos as well!

/* From BLUE TOPAZ /
/ Images : reduce displayed size of embedded files, zoom on hover */
.markdown-preview-view img, .markdown-preview-view video {
width: auto;
height: auto;
object-fit: contain;
max-height: 300px;
max-width: 550px;
outline: 0px solid var(–text-accent);
}
.markdown-preview-view img:hover , .markdown-preview-view video:hover {
width: 100%;
height:100%;
max-width: min(100%, 80vw);
max-height: min(100%, 80vh);
outline: none;
cursor: zoom-in;
}

I had less luck when trying out this script by @Lithou

Basically nothing happened. I read somewhere that div doesn’t work anymore so I replaced it with span, but that didn’t work for me either.
Basically Obsidian just shows the image without applying the modifiers in the css snippet.
EDIT:
I did get something to happen with the the portrait example when I changed from div to span, but it seems only size and the clip path work. I am not getting anything from the other examples unfortunately.
Would love to get this working.

[Klaas]

@hcg : perhaps you can DM Lithou and ask for his help.

[Lithou]

@hcg

Looks like you were grabbing a test snippet from a while back.

You will want the published version of the snippet found Here

Let me know if you have any issues with that.

[hcg]

perfect,
this works as expected.

One thing I don’t quite understand is the code for hover:
img[alt*="+side"]:not(:active):hover
Initially I thought this would mean that it would not be active when using the +side parameter, but it seems to work the other way around.

Also I wonder about this line:
--defaultzoomwidth: 100%; /* this specifies the default width when an image is zoomed in (usually set active which is clicking with mouse) */

How do I use that? Does it mean it is possible to zoom the image by clicking on it?

Do you think it should be possible to expand this to apply for placement and size of video as well, using the video tag in css?
EDIT: yes that works by simply adding the same tags after the video file. Nice!