Tag-based Image Resizer for Long-height Image

[Browneyedsoul]

/*********** Get Original Image While Reviewing ***********/
.Queue .indented-rem div {
	min-width: 100% !important;
}

.Queue .inline-block,
.Queue .tumbnail--with-width {
	min-width: fit-content !important;
	height: auto !important;
	max-height: 100% !important;
	overflow: auto;
	white-space: pre;
}

/*********** Get Original Image While Editing ***********/
[data-rem-tags~="ori"] .inline-block {
	min-width: fit-content;
	height: auto !important;
	max-height: 100% !important;
}


/*********** Tag Declutter ***********/
[data-rem-tags~="ori"] .items-center.hierarchy-editor__tag-bar__tag {
	background-color: transparent;
}

[data-rem-tags~="ori"] .hierarchy-editor__tag-bar__tag span {
	display: none;
}

[Robin_Hood]

Brother, please help me.
I installed the CSS Block of your code, but I confess that it didn’t change anything in any image!
Maybe I’m not using it right. I’ve already tried putting a tag called “ori” and nothing has changed in the image… Anyway, how should I do it?

[Browneyedsoul]

Hi @Robin_Hood

1. Did you check that the code block which has the CSS code is in CSS mode?
2. Did you tag the ori tag in the right place? The tag should be in a rem which has a photo you want to get the original size back.

This is the right use case. please try again!

If it did not work well, please share some screenshots or gifs explaining your state.
"re-copy and paste the image" would be a solution. if it failed and never be applied

[Robin_Hood]

I did exactly what you said, brother.
What should I do?

https://media.giphy.com/media/ap4wuOAq0WQWJqntMw/giphy-downsized-large.gif(image larger than 4096KB)

[Browneyedsoul]

It seems that one of the other CSS snippets is blocking it from its proper work.
Please try Toggling on/off other CSS snippets one by one.

Here is the lastest one.

/*********** Get Original Image While Reviewing ***********/
.Queue {
    width: calc(100% - 15%) !important;
    min-height: calc(100% - 20%) !important;
    position: relative;
    top: 10px
}

.Queue .indented-rem > div {
	min-width: auto !important;
}

/*********** Get Original Image While Editing ***********/
[data-rem-tags~="ori"] .inline-block {
	min-width: fit-content;
	height: auto !important;
	max-height: 100% !important;
}


/*********** Tag Declutter ***********/
[data-rem-tags~="ori"] .items-center.hierarchy-editor__tag-bar__tag {
	background-color: transparent;
}

[data-rem-tags~="ori"] .hierarchy-editor__tag-bar__tag span {
	display: none;
}

[APC]

works for me thanks
It took sometime for me to workout the tagging properly.

[Robin_Hood]

Hi friend! How do you tag correctly? I thought I just put “##ori”.
I noticed one thing: when using the tag, the aspect ratio is fixed (which is already wonderful), but the size is not equal to the original image. What could it be? @Browneyedsoul
The image I copy and paste is always automatically adjusted to one of those predefined sizes (small, medium and large).
Disabled all other CSS Codes:

[APC]

Within the same rem type (not a bullet) “#ori” then selected “#ori” select reference then find and select the CSS object, in mine it’s ‘Ori’ then press return. However, you don’t get the original image’s size as such rather the maximum available with indentation and whilst keeping the aspect ratio. You need to keep the levels of indentation that’s the point of rems.You can click on an image to see full screen or create it’s own document then reference or link to the image outside remnote. Better still if it’s in a pdf import and highlight

[Browneyedsoul]

@APC

However, you don’t get the original image’s size as such rather the maximum available with indentation and whilst keeping the aspect ratio.

Yes, It’s right. Thanx for explaining it @APC .
The main purpose of this snippet is just get back the original resolution of image.

[Robin_Hood]

Thank you so much, my friends!
@APC
@Browneyedsoul.

[Browneyedsoul]

Currently, Long-height shaped images get stuck in some height and can’t be resizable due to internal reasons.
So I made a trick to overcome it.
You can resize long images 10% ~ 200% every 5% interval by simple number tagging.
For example, Tag 65 means you will get the 65% image size of the original resolution.
But if you tag the number to an image containing rem, you can’t resize the image until you remove the tag.
This is just an interim measure for my personal use, not an ultimate solution.

browneyedsoul/RemNote-CSS-Library/blob/main/Tag-based ImageResizer.css

A first look

35% of the original image

50% of the original image

100% (ori)

115% of the original image