Image resizing!

[Leonardo_Muzkiz_Ramo]

I dont want to have an image the size of all the page…I just want a little image most of the time…
if we could resize it it would be beautiful and very useful

like in wiki where you can add ( [[20px]] or [[100px]] and the image adjusts to that.
please please !! its necessary

[Erica]

Maybe turn off the “Display images inline” option?

Also this is kind of funny – the images used to be a lot smaller (300px by 400px max), and we got multiple requests to make them larger.

They say you can’t make everyone happy

[Leonardo_Muzkiz_Ramo]

I tried but that option shows the image the same, very large…
I dont want to cause trouble to you… I just comment it, but dont worries

[Erica]

@Leonardo_Muzkiz_Ramo

I tried but that option shows the image the same, very large…

Yes, the image size is the same.

Sorry I wasn’t more clear – I meant that if you don’t display it inline, the image won’t show up unless you hover it, which would take less screen space, if that’s what you’re concerned about.

[Charm_Legrand]

@Erica

s, the image size is the same.

Sorry I wasn’t more clear – I meant that if you don’t display it inline, the image won’t show up unless you hover it, which would take less screen space, if that’s what you’re concerned about.

It would be good to have a feature that let’s you specify the size for image when you have it inline (eg. 50% image size). Most of the time when images are pasted, they take over the screen, so end up having to use a photo editor to shrink image then paste in, which wastes a lot of time.

Also, currently you have option to have ALL images inline, or ALL images with hover feature. If there’s a way to customise this, would be very helpful. Some images are better to have inline, whereas others are fine with a hover link.

[Vincent_Tang]

yes please I completely forgot about this, what I would really like is markdown support using ![]() to make the image selection size myself

can we get pandoc markdown formatting for image sizes?

![](imgur.com/drawing.jpg){ width=50% } so I can set the width to be 50% of the total inline size on page? (in case the monitor size changes)

reference stackoverflow page: Changing image size in Markdown - Stack Overflow

or an option to set a physical px size like 300px x 400px would be nice too

oh you know what would be even better? have the images really small but allow the user to click and expand image size

Reddit RES does it like so

Or maybe a javascript plugin like photoswipe http://photoswipe.com/, similar things used in lots of wordpress blogs too

example:

[Vincent_Tang]

@Charm_Legrand

Also, currently you have option to have ALL images inline, or ALL images with hover feature. If there’s a way to customise this, would be very helpful. Some images are better to have inline, whereas others are fine with a hover link.

this is precisely why I manage all my image assets on my end

I can have images INLINE or hovered over

see this post I made on it Workflow for adding picture / handwritten notes to dynalist

This is how I decide on whether an image should be INLINE or hovered over

• If its my attempt to debug a problem / capture info for the sake of capturing it → hover over
• If its a giant diagram / note I spent an hour writing capturing a process → inline

[Charm_Legrand]

@Vincent_Tang

s how I decide on whether an image should be INLINE or hovered over

If its my attempt to debug a problem / capture info for the sake of capturing it → hover over
If its a giant diagram / note I spent an hour writing

Genius workaround on inline vs hover Vincent! Simple yet effective Thanks for sharing!

[Manuel]

Please add this At least give images a max-width, so they won’t overflow.

[Vincent_Tang]

I have this set on my theme right now to 600px max width, it looks good on vertical and horizontal monitors

The code looks like this

/* Reduce Total Size of Markdown Images, use Imagus for full preview*/
.node-displayed-image {
    max-width: 600px;
    max-height: 600px;
}

It maintains image aspect ratio. So if you had a 900px (horizontal) x 1200px (vertical) image, it will be rescaled down to 450px x 600px.

If you had a 1200px X 100px image, it will be scaled down to 600px X 50px

I made my own theme and this is the one I run at the moment, I updated it every so often when I notice some UI / UX improvements

I currently set every image to be INLINE, I actually rarely use image hovering over anymore. Partially because I’d rather just scroll through a page and see / grok everything at the same time

It works great with dynalist pro image uploader

Dynalist Simple Colors for default theme

[Erica]

@Manuel: see @Vincent_Tang’s reply above, it might be helpful to you!

[Craig_Oliver]

@Vincent_Tang thank you for the Stylish block to limit the size of images! That really helps.

[Yatharth_Agarwal]

@Leonardo_Muzkiz_Ramo

like in wiki where you can add ( [[20px]] or [[100px]]

@Erica How hard would it be for Dynalist to modify it’s Markdown parsing engine?

[BigChungus]

Thank you. I pasted that code into Dynalist Pro custom CSS box and it worked perfectly.

[Filip]

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.

[Erica]

@Yatharth_Agarwal

How hard would it be for Dynalist to modify it’s Markdown parsing engine?

​Could you explain a bit more on what do you mean by “modify”? To accommodate syntax like [[20px]]?

[Yatharth_Agarwal]

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

[MarcusM]

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).

[BigChungus]

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;
}

[Vincent_Tang]

You can run my userscript I made here

So you can resize every image as you want

Image Resizer Slider Overlay UI Button

I made my first tamperscript extension. Its something I wanted for some time It overlays a slider at the topleft corner. You can slide it back and forth to increase max-width image size. I had it set at a starting point of 150px, and goes up to 1200px If you have a stylish extension that sets max-width (e.g. my theme here Dynalist Simple Colors for default theme | Userstyles.org) , it will override whatever those defaults are. You need to have tampermonkey chrome extension installed https://…

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

Imagus - Chrome Web Store

Here’s my CSS files I use for dynalist

vincentntang/dynalist-extensions/blob/master/style.css