Image resizing!

🌟Features
#22

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
#23

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
#24

Nothing?

#25

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

#26

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?

#27

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

#28

@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
#29

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
#30

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

1 Like
#31

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

#32

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
#33

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.

#34

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

#35

:+1: Exact! :sunglasses:

1 Like
#36

I love the feature depth of Dynalist. And this features is one of my most wanted. Currently, the images are so large they are messing up the whole page view. It would be nice to resizes images. There are also problems with images in mind map view.
It would be awesome to have an overall improved image handling. Dragging and drop from one branch to another… selecting an image and being able to resize its corners. Switch to mind map view and see it in a great size so it is an optical improvement for mind maps.

That would be awesome :slight_smile:
Keep on the great work!
Chris

#37

Here’s a quick CSS trick to set the image size per link

  • add this to your custom css
    /* ================== Shrink Images by doing ![](https://.../blah.jpg#75) ================== */
.node-displayed-image[src$="#75"] {
    max-width: 75%;
    max-height: 75%; 
}
.node-displayed-image[src$="#50"] {
    max-width: 50%;
    max-height: 50%; 
}
.node-displayed-image[src$="#25"] {
    max-width: 25%;
    max-height: 25%; 
}
  • for each image, now you can specify your resize anchor tags by doing things like:
    ![alt-text](https://your-image.jpg#75)
![alt-text](https://your-image.jpg#50)
![alt-text](https://your-image.jpg#25)
10 Likes
Re-size attatched image
#38

Can we just simply let the users visually resize the image by dragging the edges or a button in, for example, the bottom right corner? This is the approach that many other apps use, especially common WYSIWYG ones like Evernote or Microsoft Word.

It would also be very nice if we could click the image to view the full size within the same browser tab instead of jumping to a new one.

Besides, I want to say I just don’t understand why Dynalist choose to hide the image and use a button in the first place? It makes it unnecessarily complicated to have to hover over a button to view the image while your intention of adding that image is to… put an image there and let you see it in the context.

#39

You probably want to click this: image

Myself, I want DynaList to show a thumbnail image in the document view and hover over the thumbnail to popup a full-size (up to window size) image. Showing full-size images in the outline disrupts the outlining process.

Edit: here I go!

  • .node-displayed-image { max-height: 100px; }
  • .is-hovering .node-displayed-image { max-height: 600px; }
4 Likes
#40

Thank you so much Vincent! Gamechanging for me =).

#41

That’s not true in your case…you have made us happy many times over with Dynalist improvements :innocent: