nextcloud / nextcloud/text

Ability to resize/scale/format images

Open
#4,556 8 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement feature: images
Dominant language
JavaScript
Stars
659
Forks
133
Avg merge
1d 20h
Merged PRs (30d)
110

Description

Is your feature request related to a problem? Please describe.
Attaching an image (say, in Collectives) will embed it, but with no possibility to further format the layout - alignment, scaling, etc.

Describe the solution you'd like
I'd love the ability to scale/resize, possibly align, the image further in the page.

Describe alternatives you've considered
The most basic Markdown syntax does not support this, but see, for example: https://medium.com/markdown-monster-blog/getting-images-into-markdown-documents-and-weblog-posts-with-markdown-monster-9ec6f353d8ec for an option (MD could just embed the img tag as raw HTML in this case).

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to shows that GH does it similarly.

Alternatively, it could be done via a fenced code block extension that then specifies attributes via YAML, say:

```image
url: path/to/kitten.jpg
width: 500px
align: center
alt: Picture of a sleeping, curled up, grey kitten.
```

that might be fairly extensible for the future?

Wikitext also has support for this: https://en.wikipedia.org/wiki/Help:Wikitext#Images

Additional context

I came here from https://github.com/nextcloud/collectives/issues/378, realizing that this needs to be in text, not collectives.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named. Start by locating the current image-embedding implementation and its tests, then compare the raw HTML and fenced-block approaches described here. Done means an agreed syntax and behavior for resizing, alignment, scaling, and alt text, covered by tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown
Domain
content, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.