CSS to resize images in blockquotes

[alelun]

What I’m trying to do

Im trying to make images in blockquotes smaller.

Things I have tried

all views */
blockquote .internal-embed img {
max-width: 40px !important;
}

It is working in reading view but not in editing view.
What am I missing?

Thanks,
P

[ariehen]

The selectors for Editing and Reading views are different. Give this a try for Live Preview:

.markdown-source-view.mod-cm6 .cm-line .internal-embed.image-embed img {
    max-width: 100px;
}

---

And for completeness sake, this should take care of both Live Preview and Reading modes:

/* reading + live preview images in blockquotes */
.markdown-preview-view blockquote .internal-embed img,
.markdown-source-view.mod-cm6 .cm-line .internal-embed.image-embed img {
    max-width: 100px;
}

[alelun]

Thank you for clearing this up for me.

This works for me in Live Preview, if the > comes on the same line as the image.
But, not if the image comes in a line after it.
Interestingly, it works in both cases in Reading view.

// > text
// > ![[image]]

works in both views

// > text
// ![[image]]

works only in reading view

[holroy]

The latter I consider slightly botched syntax on your behalf, since you’re not having a newline between two different blocks which are possibly intended to be the same…

Reading view respects the standard and group the lines in the same block although the syntax is slightly strange with the missing blockquote syntax. And live preview focuses on the missing blockquote syntax. In general reading view is most compliant to the markdown standard that Obsidian is using, but this could be considered an edge case, so if it matters to you, you should use the syntax which works in both cases.

Remember it’s different markdown engines used in the two modes, so differences will always be there to some extent.

[ariehen]

For next time, if you use code blocks for markdown, CSS, etc., it will be easier to see what’s going on in your examples.

---

Live Preview is a hybrid with all sorts of quirks, but I agree with holroy here. Do you want the image in the blockquote or not? If so, you need a > before the ![[embed.jpg]].

If your note is this:

> blockquote text
![[img.jpg]]

this is what you see in the inspector for Live Preview. It’s a new line and the image is a plain media embed outside of the blockquote / .HyperMD-quote divs, just as if it was off on its own.