https://github.com/maisonsmd/carta-plugin-imsize

This plugin adds ability to render images in specific sizes to Carta.
https://github.com/maisonsmd/carta-plugin-imsize

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/maisonsmd/carta-plugin-imsize
• Owner: maisonsmd
• License: mit
• Created: 2024-01-21T14:04:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-30T07:54:31.000Z (over 1 year ago)
• Last Synced: 2025-07-07T13:48:29.311Z (11 months ago)
• Language: TypeScript
• Size: 113 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![carta-plugin-imsize](https://img.shields.io/npm/v/carta-plugin-imsize)

# carta-plugin-imsize

This plugin adds ability to render images in specific sizes to [Carta](https://github.com/BearToCode/carta).

## Installation

```shell

npm i carta-plugin-imsize

```

## Setup

### Styles

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

```HTML



	



```


Example CSS:

```CSS

/* Create a light blue background for images that fill parent's width */

.markdown-body .image-container {

	padding: 5px;

	background-color: lightblue;

	text-align: center;

}

.markdown-body .image-container img {

	object-fit: contain;

	max-width: 100%; 

	max-height: 100%;

}

```

The images are shrunk to fit its container by default.

### Extension

```svelte

	import { Carta, MarkdownEditor } from 'carta-md';

	import { imsize } from 'carta-plugin-imsize';

	const carta = new Carta({

		extensions: [imsize()],

	});

```

## Usage

Image title, width and height are optional

```markdown

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](./src/routes/+page.svelte) for more detail.