202512061651 Status: idea Tags: quartz obsidian, Obsidian, Markdown, Tinkering

Quartz setting image width

Quartz Issue

Turns out that there is an Issue on the quartz github that is about this.

It is issue #625

UPDATE:

I created a pull request to the quartz obsidian repo.

You can view the PR here: https://github.com/jackyzha0/quartz/pull/2239

In Obsidian their version of Markdown you are able to set the width of an image by setting a number as alt text:

![300]()

And to make this work with quartz obsidian, you’d need to embed html into your markdown like this:

<img src="" style="width:300px"/>

And that will work, but it is annoying. And as you can see, the markdown version works for me as well:

And this is how I did it:

![32](https://docs.oldmartijntje.nl/000-Files/image/Temmie_Sprite.webp)

But this is not a thing that will work in quartz obsidian by default. You will need to temper with the files.

Open your quartz obsidian root folder and open this file:

quartz/plugins/transformers/links.ts

Then, scroll to line 147.

You will be in between these 2 sections:

// transform all other resources that may use links
if (
	["img", "video", "audio", "iframe"].includes(node.tagName) &&
	node.properties &&
	typeof node.properties.src === "string"
) {
	if (opts.lazyLoad) {
	  node.properties.loading = "lazy"
	}

And below that:

if (!isAbsoluteUrl(node.properties.src, { httpOnly: false })) {
  let dest = node.properties.src as RelativeURL
  dest = node.properties.src = transformLink(
	file.data.slug!,
	dest,
	transformOptions,
  )
  node.properties.src = dest
}

If the line number is different in your file, find the correct line number. And then paste the following code between these 2 sections:

// Check if this is an img tag with width specification in alt text
if (node.tagName === "img" && typeof node.properties.alt === "string") {
	const altText = node.properties.alt as string
 
	// Check for Obsidian syntax: "alt text|300"
	const obsidianMatch = altText.match(/^(.+?)\|(\d+)$/)
	if (obsidianMatch) {
		const realAltText = obsidianMatch[1].trim()
		const width = obsidianMatch[2]
		node.properties.style = `width: ${width}px;`
		node.properties.alt = realAltText
	} else {
		// Check for numbers: "![300](image.jpg)"
		const numberMatch = altText.match(/^(\d+)$/)
		if (numberMatch) {
			const width = numberMatch[1]
			node.properties.style = `width: ${width}px;`
			node.properties.alt = "" // or should we keep the alt text the number?
		}
	}
}

So this means that you will end up with code that looks like this:

// transform all other resources that may use links
if (
	["img", "video", "audio", "iframe"].includes(node.tagName) &&
	node.properties &&
	typeof node.properties.src === "string"
) {
	if (opts.lazyLoad) {
		node.properties.loading = "lazy"
	}
 
	// Check if this is an img tag with width specification in alt text
	if (node.tagName === "img" && typeof node.properties.alt === "string") {
		const altText = node.properties.alt as string
 
		// Check for Obsidian syntax: "alt text|300"
		const obsidianMatch = altText.match(/^(.+?)\|(\d+)$/)
		if (obsidianMatch) {
			const realAltText = obsidianMatch[1].trim()
			const width = obsidianMatch[2]
			node.properties.style = `width: ${width}px;`
			node.properties.alt = realAltText
		} else {
			// Check for numbers: "![300](image.jpg)"
			const numberMatch = altText.match(/^(\d+)$/)
			if (numberMatch) {
				const width = numberMatch[1]
				node.properties.style = `width: ${width}px;`
				node.properties.alt = "" // or should we keep the alt text the number?
			}
		}
	}
 
	if (!isAbsoluteUrl(node.properties.src)) {
		let dest = node.properties.src as RelativeURL
		dest = node.properties.src = transformLink(
			file.data.slug!,
			dest,
			transformOptions,
		)
		node.properties.src = dest
	}
}

If your code does not look like this, check whether you have a different version of the links.ts file. My quartz it’s last commit in this file was eb9bbd1666345e011da410ff7af67ede9fd00f47. This commit is the last commit that happened to this file before I cloned the Repository. Make sure to check the history of links.ts to see what changed since you cloned the repo.

Testing:

---

References

I got really annoyed at having my image be the full width of my article when it does look good in obsidian. And seeing as that I just wrote my own plugin (QuartzForums) for the quartz obsidian repository anyways, I thought I could fix it.