carta-plugin-imsize

This plugin adds ability to render images in specific sizes to Carta.

Installation

npm i carta-plugin-imsize

Setup

Styles

For custom styles, this is an example of the generated HTML:

<div class="image-container">
	<img
		src="path/to/image"
		alt="image alt"
		title="image title"
		width="300"
		height="200"
		style="object-fit: contain;"
	/>
</div>

The images are shrunk to fit its container by default.

Extension

<script>
	import { Carta, CartaEditor } from 'carta-md';
	import { imsize } from 'carta-plugin-imsize';

	const carta = new Carta({
		extensions: [imsize()],
	});
</script>

<CartaEditor {carta} />

Usage

Image title, width and height are optional

With all parameters:
![image alt](/path/to/image "image title" =200x300)

With only with and height:
![image alt](/path/to/image =200x300)

With only height:
![image alt](/path/to/image =x300)

With only width:
![image alt](/path/to/image =200x)

With no parameters:
![image alt](/path/to/image =x)
![image alt](/path/to/image)

Check the example here for more detail.