Image Display Query

lornawebber
@lornawebber
7 years ago
334 posts
One of our users has noticed that some of the pictures he has uploaded to our JR site do not have the same colour intensity or luminosity as his original image files.

I attach a split screen comparison: On the right, an image as displayed on our site [https://pmp-art.com/david-robins/gallery/215280/horseshoe-lake]
and on the left, the downloaded image viewed in Windows Picture Viewer. It is noticeably brighter and more colourful.
Any idea why this might be?
Image comparison.jpg
Image comparison.jpg  •  1.6MB


updated by @lornawebber: 10/26/17 01:35:53AM
michael
@michael
7 years ago
7,714 posts
Not a fair comparison. In your screenshot both images look the same size, but they're not. The one on your site is 1280px. Its been reduced to that size so that it loads faster over the web.

The full size image is on this url:
https://pmp-art.com/gallery/image/gallery_image/215280/original

The full size image is 4288px wide.

So the answer to your question is the bigger image looks better because it has more detail to it. When an image is reduced in size it looses detail.

--edit--
If the user was to compress the file to 1280px before uploading to your site, then compare what they had with what was uploaded they would look the same.

--edit edit--
Also the "Convert to JPG" could also have something to do with it, its a setting at:
ACP -> CORE -> IMAGE SUPPORT -> GLOBAL CONFIG -> GENERAL SETTINGS -> CONVERT TO JPG

When using this, to save size, the image is reduced to 85% of its full quality.
updated by @michael: 07/23/17 07:26:48PM
lornawebber
@lornawebber
7 years ago
334 posts
@michael Thank you very much for your full and helpful explanation.
I didn't know about that "original" view. It would be extremely useful to make that available to users. They would love to click a button (say) and get an image original size. This would be helpful both when the image is more detailed and also when the original image is smaller.
michael
@michael
7 years ago
7,714 posts
Sure, you can link to it if you want. There is a setting to block it in the ACP if you dont want it. Might be good for the download version for your users.

If you link to an invalid image size it shows you the available options:
https://pmp-art.com/gallery/image/gallery_image/215280/something
Quote: CRI: invalid image size - must be one of: xxsmall,xsmall,56,small,icon96,icon,medium,large,larger,xlarge,xxlarge,xxxlarge,1280,original
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
I'm suspecting that Lorna means is:
a button/link that displays right next to the regular site image in a gallery or in the photo section, for easy use by average members. Sort of the way Ning has underneath the 'normal' smaller picture view, a link that says "View Full Size"...see it under this Ning site picture:
http://minstrelbanjo.ning.com/photo/lenox-ma-250th
clicking the link/button takes any member to a larger res copy on its own url, that they can then download if you like. I've always thought that was a nice little touch.
On Jamroom, a member can't easily access the larger image without knowing what to type into the url, for example here:
https://fotmd.com/strumelia/gallery/9632/elizabethan-garden-epinette-des-vosges-2

...or am I missing something obvious for members to get to the largest res image they see in another member's gallery? Is there a setting I may have set and subsequently forgotten, that is preventing the option from showing on my own site?


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
lornawebber
@lornawebber
7 years ago
334 posts
@strumelia
Quote
I'm suspecting that Lorna means is:
a button/link that displays right next to the regular site image in a gallery or in the photo section, for easy use by average members. Sort of the way Ning has underneath the 'normal' smaller picture view, a link that says "View Full Size"...see it under this Ning site picture:
http://minstrelbanjo.ning.com/photo/lenox-ma-250th
clicking the link/button takes any member to a larger res copy on its own url, that they can then download if you like. I've always thought that was a nice little touch.
UNQUOTE

Yes that is exactly what I mean.

However, what @michael has suggested, i.e. downloading the original full-size version instead of the web-sized file, is also what I want and honestly, I thought that was what we were getting.
updated by @lornawebber: 07/24/17 08:41:53AM
lornawebber
@lornawebber
7 years ago
334 posts
Just to add -
The way images are displayed in the image view has always been problematic for us. This is because images are displayed at the maximum width that will fit the screen regardless of height or actual image file size. So 'tall' images have to be scrolled down to see everything. Small image files are expanded to fit and so become pixellated. What we really want is to see the *whole* image on screen, and not greater than the size of the original file.
I suggested this as an enhancement some time ago.
@zachary-moonshine had the same problem I think. At one time we were discussing adding a 'View in Lightbox' button to individual image pages, in addition to the lightbox option for galleries and albums, in order to get the view we need.

A button to see the original image would be a massive enhancement to the usability of our site and would be better than the View in Lightbox on individual images.
Users could paint from the images without having to download them.
If they do download, they would definitely want to download the full file size. I was unaware that we weren't doing that.

I'd be interested to know what others think.
brian
@brian
7 years ago
10,148 posts
Unfortunately it's not nearly as simple as it may seem to get an image to "just fit". The problem is that we can define width/heights in percentages or "view height" (if using a newer browser). When doing this you have to take into account any HTML elements that flow on the page above the image - i.e. headers, etc. - the height of those items are going to very from skin to skin and from site to site, but you have to subtract that height from the view height to get the correct size of the container that actually holds the image. Only then can you actually resize the image to fit the viewable "above the fold" content area by getting the viewable area, subtracting the values for the header/menu/etc and then resizing the image to for that size. You then have to deal with the image "flashing" it's full size before being resized, which can also be visually "noisy".

If we can come up with a simple solution that can help it's something we will get it in there.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
7 years ago
7,714 posts
Strumelia:
...or am I missing something obvious for members to get to the largest res image they see in another member's gallery? Is there a setting I may have set and subsequently forgotten, that is preventing the option from showing on my own site?....
ACP -> PROFILES -> IMAGE GALLERY -> GLOBAL CONFIG -> Allow Original Download (check)

That?
allow.jpg
allow.jpg  •  73KB

download.jpg
download.jpg  •  146KB

SteveX
SteveX
@ultrajam
7 years ago
2,584 posts
@lornawebber If you want users to have access to the full size file and show them the largest possible version of the image, the simplest way is to open the original image in a new tab. The resize you want is default behaviour for displaying an image in a browser tab.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
Ultrajam, Jamroom behavior (on my two sites anyway) is a bit oddball with this-
If you are viewing a photo in someone's gallery, on its image page, and in Chrome you right click on the image- you don't get the usual "open image in new tab"... instead you get 'open link in new tab"... and doing that merely takes you to the next photo page in the same gallery... like a 'next' button would do. For some reason Chrome neither sees it as an image, nor takes you to the same link in a new tab. I don't normally have this strangeness on Chrome when I right click an image anywhere online.
Edit- in Chrome, I do get "open image in new tab" if i right click from the gallery thumbnail page. But not from the individual photo's page.
Also- when I do click on the "open image in new tab" if i right click from the gallery thumbnail page, I get an image that is not full size- in fact, in my sample I got an image that was much smaller than the image when seen on its individual image page when browsing a user gallery.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 07/25/17 06:34:24AM
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
michael:
ACP -> PROFILES -> IMAGE GALLERY -> GLOBAL CONFIG -> Allow Original Download (check)
That?

That downloads a smaller-than-original image version.
Try it here:
https://fotmd.com/strumelia/gallery/8256/bones-lesson-at-my-house-with-dom-flemons


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
brian
@brian
7 years ago
10,148 posts
The link to the original size does not "just appear" on the page when you decide to not block it - you will need to customize your template to include a link to the original.

For this image:

https://fotmd.com/strumelia/gallery/8256/bones-lesson-at-my-house-with-dom-flemons

This is the original:

https://fotmd.com/gallery/image/gallery_image/8256/original/_v=1436754228

You can't right click with Chrome on the large image due to the lightbox overlay - you need to right click on the small image in the slider above the large image - then you can manipulate it.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
7 years ago
7,714 posts
Strumelia:
michael:
ACP -> PROFILES -> IMAGE GALLERY -> GLOBAL CONFIG -> Allow Original Download (check)
That?

That downloads a smaller-than-original image version.
Try it here:
https://fotmd.com/strumelia/gallery/8256/bones-lesson-at-my-house-with-dom-flemons

Both images are JPEG Image, 960 × 720 pixels, same.

Maybe you've run the image cropping system to reduce space on your server perhaps.
image_sizes.jpg
image_sizes.jpg  •  245KB

Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
michael:

Both images are JPEG Image, 960 × 720 pixels, same.

Maybe you've run the image cropping system to reduce space on your server perhaps.

Genius! Yes you are correct- I do indeed periodically run the image gallery tool to reduce uploaded jpgs, I believe I may well have run it at some point to reduce all images to just under 1000 px. Duh, why didn't I think of that??


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
brian:
The link to the original size does not "just appear" on the page when you decide to not block it - you will need to customize your template to include a link to the original.

So when we 'allow' download image, it does not download the original full size image, but rather the size showing in the gallery on its own page? I would think downloading the full res original would be preferable as the default- ?

Quote:
You can't right click with Chrome on the large image due to the lightbox overlay - you need to right click on the small image in the slider above the large image - then you can manipulate it.
Ok I get that, thanks!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
7 years ago
7,714 posts
"......So when we 'allow' download image, it does not download the original full size image...." this is incorrect, download downloads the full size original image.

The image gallery tool to reduce uploaded jpgs changes the size of the original image.
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
Ah, I understand now! Thank you so much!
So, as I understand it-
we do have a setting that will show a button to download the original (and presumably largest pixel size) image. It's just slightly different than Ning beacuse Ning's button is to 'view' the original full size image on its own url, where you could then choose to download it via right click if you want... whereas the Jamroom button goes right ahead and downloads it for you rather than taking you to view it first. Depending on what one's aim is for seeing vs. having an image, it's either convenient or not convenient. But, it works! :)
Thanks much for clarifying all this!


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
7 years ago
7,714 posts
if you want to add a link to the original image, just adjust the .tpl file to point to the URL and have text that reads "download"
<a href="https://fotmd.com/gallery/image/gallery_image/8256/1280/_v=1436754228">Download</a>

Something like:
<a href="{$jamroom_url}/gallery/image/gallery_image/{$item._item_id}/original">Download</a>
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
I thought you said the 'download' button already downloads the original image?
sorry, i'm not understanding what you are saying.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 07/26/17 06:22:54AM
michael
@michael
7 years ago
7,714 posts
I did, but then you said ".....It's just slightly different than Ning beacuse Ning's button is to 'view' the original full size image on its own url...."

So I'm just pointing out a way to have it that way if you prefer. :)
Strumelia
Strumelia
@strumelia
7 years ago
3,603 posts
Ok I think I understand. (some days I feel so dense)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
michael
@michael
7 years ago
7,714 posts
If you use the Template Editor (or other means) to add it to the the jrImage galleries item_detail.tpl file, then you can have it wherever you want.

Docs: "Using the Template Editor"
https://www.jamroom.net/the-jamroom-network/documentation/jamroom-admin-handbook/3183/using-the-template-editor

and alter:
ACP -> MODULES -> PROFILE -> IMAGE GALLERIES -> TEMPLATES -> items_detail.tpl
template.jpg
template.jpg  •  141KB

open.jpg
open.jpg  •  237KB

Tags