Image resizing!

Yes! This would be brilliant.

I just want to say, as much as custom CSS via stylish or something is great, it does not solve the issue. I like to share my trees with 3rd party users instead of emailing them a document - in that case I need to have control over how the dynalist looks on their computer.

2 Likes

ā€‹Could you explain a bit more on what do you mean by ā€œmodifyā€? To accommodate syntax like [[20px]]?

@Erica Yes, exactly; seems like it would unblock several feature requests.

I agree with the original post. It would be fabulous to be able to specify the size of an image. If I copy an image from the web, Iā€™m stuck with whatever size it comes. Sure I can zoom out and take a screenshot (cropping it with the mouse) and paste the result, there are always workarounds, but thatā€™s just going to deter me from using images in Dynalist.

Currently my solution is to disable inline images, but if I could easily control the size of an image, Iā€™d re-enable inline images. Or if I could selectively enable inline images, Iā€™d choose which ones would display inline (and at what size).

I have Pro and limit the display size of images by pasting this in the Custom CSS Settings

.node-displayed-image {
    max-width: 100px;
    max-height: 100px;
}
2 Likes

You can run my userscript I made here

So you can resize every image as you want

Second, you can also use use imagus to hover and see the full image

Hereā€™s my CSS files I use for dynalist

3 Likes

Hi, @Vincent_Tang I appreciate all your insight and posts on the board. Might there be a solution for images to be responsive, filling the available space whether on desktop or mobile as opposed to being limited by pixel width?

Thank you!

I played around with it and am getting scaled images by using this:

img.node-displayed-image {
max-width: 100%;
max-height: 100%;
}

I am using this for featured images (in notes, below document titles).

2 Likes

What happened here - the markdown syntax [[20px]] seems an exceptionally easy fix that resolves every concern raised (including mine today, hence posting here).

2 Likes

Nothing?

We got Sakura AND Sci-Fi theme this year, what more do you want!?!?

Just kidding. Maybe Erica will add it to the trello (their bug tracker of stuff theyā€™re working on) https://trello.com/b/z0HxDPNo/dynalist-roadmap

I donā€™t know if itā€™s easy. I mean github markdown doesnt even let you resize images. I donā€™t know what flavor markdown library dynalist is using or if they baked it themselves.

Personally Iā€™d rather have other features than this, the CSS hover to 100% of little one-liner thumbnails works perfect for all my needs. Anything else would look messy. But thatā€™s just me.
Aug-19-2019%2012-29-32

Iā€™d assume that considering itā€™s already using Markdown that adding [[20px]] would be easy.
But hey, you know what they say about assumptions.

@Erica if you let us know we wont have to assume anymore?

Which flavor of markdown has resizing images as a feature? 20px in github markdown doesnt do anything.

@Morgan_Newall: sorry about the late reply, I somehow didnā€™t see it in my notifications and only saw it just now when I scrolled down the features section.

I donā€™t imagine it would be hard to add to our syntax. Itā€™s never a standard in Markdown though, which is why weā€™ve been hesitant to implement it.

For example, you can a look at this Stack Overflow question: https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown

The answers are either suggesting Markdown syntax that only works in only a few programs, or suggesting using HTML, which of course can almost anything.

Weā€™re trying to move away from WYSIWYG, but if itā€™s a very valuable thing to have, we may add it before then.

Sorry again for the late reply!

1 Like

Another way to implement this might be by allowing the user to specify classes on images, links, etc. Then they can make it look like whatever they like in custom CSS. This is how Pandoc does it:

![img](http://link-to-image.png){.classname}

and:

[link text](http://linktarget.com){.classname}

and then in custom CSS, e.g.:

img.classname { max-width:50%; max-height:50% }

More info in the Pandoc docs. The reason I like this approach is that it takes away having to implement dozens of different custom markdown markings; you can implement one and your users can format it however they like.

My $0.02. :slight_smile:

2 Likes

Nice solution! Except I can see that people will complain that this solution is pretty much Pro only :sweat:

1 Like

Hi,

I would like to see a little image-size chooser, so you can quickly chose between small/medium/large/original. Confluence do it this way.

Regards

Got it, thanks for the info. Discourse prompts for 50%, 75%, or 100% of original size when you hover over image, which is similar to what you described in confluence I guess?

1 Like

It is similar. However instead I would prefer a fixed width-setting for small/medium/large. Having this would help to get better overview, if you have several images with different original sizes in one place.

You mean with fixed pixels, instead of a fixed percentage of the original size?