Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 87
Joined: 17 Oct 2019, 06:54

Page Intro and (Smart) Cropping

16 Sep 2020, 10:52

Hello,

I am using the Page Intro plugin on some pages and always disliked the way it crops images in some situations. I was hoping that the new Smart Crop feature in X 3.29 would solve this, but it doesn't seem to change a thing. I guess technically the plugin doesn't crop the images and that's the reason?

Here's an example:
Bildschirmfoto 2020-09-16 um 16.45.24.jpg
Laptop 1280x800
Bildschirmfoto 2020-09-16 um 16.45.24.jpg (207.74 KiB) Viewed 298 times
Bildschirmfoto 2020-09-16 um 16.45.47.png
iPhone horizontal
Bildschirmfoto 2020-09-16 um 16.45.47.png (379.76 KiB) Viewed 298 times
Bildschirmfoto 2020-09-16 um 16.45.37.png
iPhone vertical
Bildschirmfoto 2020-09-16 um 16.45.37.png (443.38 KiB) Viewed 298 times
Any way to work around this? Maybe there could be an option in the plugin to apply different settings for different screen sizes?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

16 Sep 2020, 12:10

Hi Daniel,

I believe we spoke about this earlier, and it's still in my list, but you are right that this is not covered by the newly introduced image "smart crop". To explain "smart crop" in detail, the PHP (backend) will examine the image pixel-by-pixel, attempt to locate a focus-point (based on areas of pixel-chaos), and then center the crop based on the focus-point. This ONLY applies for images that are requested CROPPED, for example 1:1 (square), mostly used for various thumbnail grid layouts. This is therefore also applicable only for images that are cropped to a given ratio, from the X3 RESIZER.

Essentially, this is suitable for various image grids/layouts, where you for example want to use SQUARE/CROPPED preview images for a uniform layout. In this case, images will likely be cropped better, for example aligned to a human face instead of the middle of a human body. Of course in this case, you are using a specific predefined image crop aspect like 1:1 or 2:1 (or anything) that everything can be calculated from. It's really just math.

In your case, you are looking for large un-cropped images in "cover" mode to align themselves optimally vs screen aspect. These images aren't really cropped at all, but it's simply image aspect vs screen aspect which decides what parts of the image are visible and which are not. We can't apply the same logic here, because there is no crop aspect to target ... Instead, the original image aspect needs to remain intact, to adjust to all aspects, and obviously (even with some "smart" positioning mechanism), the image will then always get cut off based on the aspect of the device screen vs the image aspect ... This will never change ... I think the solution here is to provide some custom "focus point" (coordinates) parameter, in which case X3 can attempt to nudge an intro image to center around the focus point, either vertically or horizontally (never both, because the image will always be displaying at either full width or full height already, which is basically what "cover" mode is). Anyway, this is a completely different technical implementation than the server-based "smart crop" for images at specific crop requests.

Already have this noted, but it could be I need a few other updates in place before this is realistic. For example, just to apply such coordinates, we would need a dedicated tool in panel to open images for admin-user to select and apply "focus point" coordinates. Although it's technically possible to automatically "guess" focus points from images on server (similar to the math used in "smart crop"), this is a very slow process because it has to inspect all pixels in each image, and would slow down page-creation time. Besides, it's just guessing, and results may vary.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

16 Sep 2020, 23:50

I was thinking about this a bit ... In your screenshot, is that an actual link? Are you using the image INTRO plugin there? If so, you can already adjust the offset position from the page plugins > page intro > Background position:
Image

By default an image will be 50% 50%, which means it will always center align both x and y. Keep in mind, the center point will only affect the direction that is cropped, depending on screen ratio aspect ratio. Also, make sure you have "cover" mode selected.

I have already tested this, set to 73% 0% for the below case:

Before. X 50%


After. X set to 73%.


On wide screen, the x has no effect because the image is already scaled 100% width (no horizontal crop). Instead, Y will come into effect. Y is set to 0% so the image aligns from top.
Image
 
metallissimus
Experienced
Topic Author
Posts: 87
Joined: 17 Oct 2019, 06:54

Re: Page Intro and (Smart) Cropping

17 Sep 2020, 03:11

Thanks Karl for the thorough explanation and especially the great solution! I wasn't aware the background offset wouldn't affect an image as soon as it's shown at 100% width or height. Actually that's almost as good as setting a focal point via GUI – it's a bit trial and error but the result is no different, perfect!

There's one problem remaining, but it's not really about cropping or shifting the image: Images that have a wide subject, e.g. a couple standing some feet apart. This simply won't work on a small vertical screen. You would need an option to switch from COVER to something similar to CONTAIN (but without the repetition) as soon as the width drops below a certain value.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

17 Sep 2020, 05:18

Yea, I forgot about this option earlier. It's basically like setting a focus point, although without a UI. I would have liked to have a similar solution also for slideshow intro "cover" mode, but that requires some way to set focus point on a per-image basis.
metallissimus wrote:I wasn't aware the background offset wouldn't affect an image as soon as it's shown at 100% width or height.
Yep. In all cases of cropping (without zoom), it's always ONLY top+bottom OR left+right that gets cropped. Not both. Imagine an image 1:2 that should fit into an area 1:1 ... The 1:1 cropped version would always contain the entire width of the tall image, making the x-focus-point irrelevant. The y-focus-point would then decide the vertical position of the image inside the 1:1 box. Likewise, if you have an image 2:1 that you want to crop to 1:2, it would only use the x-focus-point. This is essentially "cover" mode, in which case an image will scale to cover a designated area ... Scaling an image to cover an area with a different aspect than the image itself, will cause either top/bottom or left/right to be cropped.

As you can see here, for a wide image to cover a mobile screen, it would display the entire height of the image, but left/right would be cropped. And in the example below, it would use the x-focal-point to adjust the X position:
Image
metallissimus wrote:There's one problem remaining, but it's not really about cropping or shifting the image: Images that have a wide subject, e.g. a couple standing some feet apart. This simply won't work on a small vertical screen. You would need an option to switch from COVER to something similar to CONTAIN (but without the repetition) as soon as the width drops below a certain value.
I think perhaps this simply gets a bit too complicated ... How would X3 know at what screen-vs-image aspect threshold to change from cover to contain? Besides, this means that if you are using a tall image, it would be set to "contain" mode on wide desktop screens, which would look quite unattractive.

I think now with the option to set focal point, I'm pretty sure you can tweak most images to look "acceptable" also on mobile screens. If not, and it's crucial, then maybe you need to re-consider the images you use. Images that need to be displayed in their entirety, should go into standard gallery layouts and the X3 popup, whereas intro "cover" mode is less optimal for these images.
 
metallissimus
Experienced
Topic Author
Posts: 87
Joined: 17 Oct 2019, 06:54

Re: Page Intro and (Smart) Cropping

17 Sep 2020, 06:31

The following is only with Intro images in mind:
mjau-mjau wrote:How would X3 know at what screen-vs-image aspect threshold to change from cover to contain?

This could be set by the user, although I admit that I don't know yet how exactly that configuration should work and which parameters would need to be adjustable.
Besides, this means that if you are using a tall image, it would be set to "contain" mode on wide desktop screens, which would look quite unattractive.
I don't see why anyone would use a vertical image for an Intro, but I guess that's my personal perspective which is still pretty desktop oriented. But isn't this the same problem like before only vice-versa? If my horizontal image can be cropped and shifted on a narrow screen, why shouldn't a vertical image be treated the same on a wide screen?
If not, and it's crucial, then maybe you need to re-consider the images you use. Images that need to be displayed in their entirety, should go into standard gallery layouts and the X3 popup, whereas intro "cover" mode is less optimal for these images.
A practical example that made me aware of the problem in the first place: I have a personalized landingpage for each client which provides them the links to their files and online gallery. I'd like to use an Intro image in cover mode for this page because I think it has more emotional impact than an image that is only as wide as the context. But I'm really restricted in my choice if I can only use an image that works well with a heavy crop. Of course that's not really a big deal, but it's a rare occasion where X3 gets in the way of me getting the result I'd like.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

17 Sep 2020, 07:47

Although I agree with a focal-point (as we have some solution to now), I must admit I don't agree about forcing a "contain" option for intro-image no matter what. Not only is it complex, but at best it will look like the below on mobile (without the thumbnails). So if it's not attractive in the first place, why force a solution that is half-ass and complicated to implement, just so you can use an image that is not really appropriate to be used as an intro in the first place?

It's just clumsy, and this is not what intros are meant for. I can't imagine this technique exists in any other website, and all websites that use some kinda image in the intro, will have the image (motive) selected appropriately, and adjusted nicely in position across all screen aspects. Setting to "contain" is not attractive, and becomes counter-intuitive, especially considering how clumsy it would be to implement.
metallissimus wrote:
Besides, this means that if you are using a tall image, it would be set to "contain" mode on wide desktop screens, which would look quite unattractive.
I don't see why anyone would use a vertical image for an Intro, but I guess that's my personal perspective which is still pretty desktop oriented. But isn't this the same problem like before only vice-versa? If my horizontal image can be cropped and shifted on a narrow screen, why shouldn't a vertical image be treated the same on a wide screen?
Exactly. Which means if someone DOES want to select a tall image (suitable for mobile), then it would use "contain" on wide screens. Basically, you would get a similar result as the screenshot above, except a tall image centered on wide screen, with large empty area left and right. The result of "contain" is not satisfactory, and is not worth using intro for in the first place, if it produces these results.
 
metallissimus
Experienced
Topic Author
Posts: 87
Joined: 17 Oct 2019, 06:54

Re: Page Intro and (Smart) Cropping

17 Sep 2020, 11:30

Maybe using the word "contain" was a mistake on my part because it has a very well defined meaning for you, which might not be the same for me. Maybe it's also a little bit different because I'm using the sidebar layout.

I tried to sketch some examples, they're not perfect but I think they illustrate my idea. Maybe in the end it comes down to a matter of taste, but I don't think they are as unattractive as you suggested.
Bildschirmfoto 2020-09-17 um 17.10.06.png
Current state wide screen
Bildschirmfoto 2020-09-17 um 17.10.06.png (578.85 KiB) Viewed 277 times
Bildschirmfoto 2020-09-17 um 17.10.23.png
Current state narrow screen
Bildschirmfoto 2020-09-17 um 17.10.23.png (188.71 KiB) Viewed 277 times
Bildschirmfoto 2020-09-17 um 17.17.10.jpg
Desired outcome wide screen
Bildschirmfoto 2020-09-17 um 17.17.10.jpg (313.09 KiB) Viewed 277 times
Bildschirmfoto 2020-09-17 um 17.15.18.png
Approximately desired outcome narrow screen
Bildschirmfoto 2020-09-17 um 17.15.18.png (216.94 KiB) Viewed 277 times
Bildschirmfoto 2020-09-17 um 17.21.14.jpg
This is originally a vertical image
Bildschirmfoto 2020-09-17 um 17.21.14.jpg (222.72 KiB) Viewed 277 times
All I did was manually setting different values for Height and Background Position in the Intro Plugin. I guess this is difficult or even impossible to implement, because I only looked at two screen settings now and adjusted the settings by hand. Probably it's not possible to automate this and then there would need to be a multitude of different settings for different screen sizes and orientations, which isn't practical.
The whole issue is just something I stumbled upon while working with X3 and I thought I'd bring it to your attention. Since I'm not a developer, I never really know if my ideas are a development nightmare or something that can be done relatively easy.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

18 Sep 2020, 01:05

I understand what you want, but I just can't see it realistic for a plugin to handle this. As in your screenshots, essentially what you want is for the intro to work as normal on wide screens, while on mobile the plugin simply doesn't apply any more ... In your mobile screens the image is below the logo, and really it should not be sized manually at all, but simply display the image at natural width height, scaled to width of screen. In your first screenshot, that doesn't seem to be related to the image intro plugin at all ...

This is basically what web designers spend time on, find an image and coding it (with CSS) so that it looks appropriate across all devices. If you want something like this, it would probably be more convenient to simply create a custom solution in CSS.

At best, I can imagine an option that does the following two things on mobile: 1) Positions the image BELOW the logo area (not aligned to top of screen), and 2) Does not scale the intro at all, but just renders the image at natural size (scale within screen width of course, but retaining original aspect, without any contain/cover/positioning provided by the plugin). It's an idea, although a bit clumsy.
 
metallissimus
Experienced
Topic Author
Posts: 87
Joined: 17 Oct 2019, 06:54

Re: Page Intro and (Smart) Cropping

18 Sep 2020, 03:16

mjau-mjau wrote: I understand what you want, but I just can't see it realistic for a plugin to handle this.
...
If you want something like this, it would probably be more convenient to simply create a custom solution in CSS.
Alright, I will give it a try with CSS.
Thanks for taking the time to discuss this!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

18 Sep 2020, 04:28

metallissimus wrote:Alright, I will give it a try with CSS.
I could assist, with some pre-planning. It would be complex CSS using media queries (to target specific device aspect/sizes). My point was that it's more a customization, than something the intro plugin could effectively handle.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

24 Dec 2020, 05:15

metallissimus wrote:I tried to sketch some examples, they're not perfect but I think they illustrate my idea. Maybe in the end it comes down to a matter of taste, but I don't think they are as unattractive as you suggested.
For some reason, I had noted down to look into this post for next X3 release. I was reading through it, and just wanted to comment specifically about your screenshots (four posts above). In the case of that example, why not just disable "[x] Custom height" in the first place? With custom height disabled, the image will display at original image aspect, limited by width, basically just like your screenshots.

Aside from the above comment, then of course there could be room for various improvements to intro plugin in a future release.
 
metallissimus
Experienced
Topic Author
Posts: 87
Joined: 17 Oct 2019, 06:54

Re: Page Intro and (Smart) Cropping

13 Jan 2021, 04:52

mjau-mjau wrote: In the case of that example, why not just disable "[x] Custom height" in the first place? With custom height disabled, the image will display at original image aspect, limited by width, basically just like your screenshots.
Honestly I can't remember. Maybe there was a reason, maybe I just missed a simple solution. If it's interesting for you, I can try to redo what I did back then and maybe find out.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12512
Joined: 30 Sep 2006, 03:37

Re: Page Intro and (Smart) Cropping

13 Jan 2021, 05:05

metallissimus wrote:Honestly I can't remember. Maybe there was a reason, maybe I just missed a simple solution. If it's interesting for you, I can try to redo what I did back then and maybe find out.
It's not really necessary unless you feel the solutions do not solve your requirements. As far as I can see at this point, I simply forgot the possibility of disabling "Custom height" myself in earlier replies.