sulu-standard
sulu-standard copied to clipboard
sulu
[RFC] Media-Management and output device
Hey there. I'm using Sulu for my first (bigger) project. So far i love it :+1:
I just had an idea regarding the media-management:
- I have a Media of type image
- The image has Versions
- The image has some generates image-formats
Often i want to output different parts of the image for a different device. For example i have a large impression image. I want to show a wide clip of it for my desktop website.
For example like that:
I'd suggest to add some kind of MediaView to the Media-Class.
On the UI side there should be some kind of management for the "Views".
We have to handle different kinds of "MediaViews" like fixed ratio etc.
the better version of image cropping
What do you think of the idea?
I'm not totally in the code of sulu, so I'd like to ask you if you think this is possible as an extension or if you'd like some feature like this in the MediaBundle some day?
I am not sure about this... For the blue rectangle I would say that should be a separate image, since you are also using it on a different page. What would you win if you combine all of them in a single image? They will be rendered as separate images anyway, so you won't have a reduced number of http requests, like you would have with css sprites.
And what you are describing with your green and red rectangle is something that does not need to be specified differently using desktop and mobiles. Just define the formats you need, and use the correct one in your theme.
I think what you are actually looking for, is to define the region of interest manually. I think we already talked about this once. I could imagine something like being able to move the rectangle describe in the image formats. However, the hardest part here would probably be the frontend and its UX. /cc @berndhep
Yeah, i was't sure about the blue one as well. I want the possibility for the User to define the important regions of the image.
The UI part is getting hard. Do you like the idea in general?
we have thought about some kind of cropping in UI view. maybe we should be able to make multiple croppings per imag. would that fit your requirements?
Yeah this would totally fit my dreams ;-) The croppings must somehow be nameable or something like that.
maybe we could create something like virtual copy in adobe lightroom where you can create a media for the same original image. that media you can crop and use it in pages. when you update the file in one of that copies all other will be updated too. @berndhep what do you think about that?
I think cropping is going too far, since it is also not easy to correctly use the image afterwards. IMO the size should should stay the same (depending on the image-formats.xml) and the user can only move this rectangle. If the size of the rectangle could be changed, the ration should at least stay the same.
Did also have some concept for user image cropping. I would see it as own command in the image format.
<!-- Desktop -->
<format>
<name>400x200</name>
<commands>
<command>
<action>user_crop</action>
<parameters>
<parameter name="group">default</parameter>
<parameter name="ratio">2:1</parameter>
</parameters>
</command>
<command>
<action>scale</action>
<parameters>
<parameter name="x">400</parameter>
<parameter name="y">200</parameter>
</parameters>
</command>
</commands>
</format>
<!-- Mobile -->
<format>
<name>400x200m</name>
<commands>
<command>
<action>user_crop</action>
<parameters>
<parameter name="group">mobile</parameter>
<parameter name="ratio">2:1</parameter>
</parameters>
</command>
<command>
<action>scale</action>
<parameters>
<parameter name="x">400</parameter>
<parameter name="y">200</parameter>
</parameters>
</command>
</commands>
</format>
<!-- Desktop -->
<format>
<name>800x400</name>
<commands>
<command>
<action>user_crop</action>
<parameters>
<parameter name="group">default</parameter>
<parameter name="ratio">2:1</parameter>
</parameters>
</command>
<command>
<action>scale</action>
<parameters>
<parameter name="x">800</parameter>
<parameter name="y">400</parameter>
</parameters>
</command>
</commands>
</format>
<!-- Mobile -->
<format>
<name>800x400m</name>
<commands>
<command>
<action>user_crop</action>
<parameters>
<parameter name="group">mobile</parameter>
<parameter name="ratio">2:1</parameter>
</parameters>
</command>
<command>
<action>scale</action>
<parameters>
<parameter name="x">800</parameter>
<parameter name="y">400</parameter>
</parameters>
</command>
</commands>
</format>
Now he can create a 2:1 reactangle for Mobile 2:1 and Default 2:1 in the sulu backend.
If I read that correctly, the user has to crop the image for every single file format, right? Could imagine that this is getting quite tedious... I would prefer to calculate the ration based on the parameters, and being able to resize that in the UI only if I need it.
@danrot no not for every format only for every ratio in the group. If you only want define one crop for all you give the same group and same ratio to it.
In the UI it could be handled also easier. You choose a ratio 2:1, then you got checkboxes Default, Mobile, ... you choose one or more and then create the reactangle an save this crop.
@danrot Oh sorry yes in the xml you need to define it foreach format. If you calc the ratio the case of @psren will not work when mobile and desktop have the same ratio.
But maybe we could use then same thing as I descripted before instead of the group you can choose each format and default is all format. You choose 2:1 and you could uncheck which formats it should not use this rectangle 400x200, 400x200m.
So its still possible to define a crop for a ratio but also for a specific format.
My problem with this solution is that you are duplicating information... Why don't you just calculate the ration from the given parameters? This way it is quite error prone, what happens if you set the ratio to 3:1, but the image format is 400x200? I bet something the user doesn't intend.
@danrot no i find it ok to calculate the ratio and no additional changes need to be done in the .xml.
But to set it only for the ratio will not fix the desktop/mobile problem when the desktop and mobile image have the same ratio. So it would be good if he can also set it for a specific format. E.g. https://jsfiddle.net/v05km8g1/
Well, I guess most of the time there will also be a different format for mobile and desktop (also in the example @psren showed us). And if you really want to do that it would be enough to simply define another image format with the same parameters, but only a different name.
@danrot but same parameters = same ratio so its the same rectangle. Or the user need to define the rectangle foreach format.
I'd go for the optional moving of the rectangle foreach format, sounds a lot less complicated, also for the end user. If you use the ratio for that there might be changes to images the user is not aware of.
yeah seems to be the best solution foreach format.
just another idea for less formats when cropping there could be an option in the format crop-format e.g. when you have following formats 70x70 and 60x60. It happens alot that there are similar formats.
<format>
<name>70x70</name>
<commands>
<command>
<action>scale</action>
<parameters>
<parameter name="x">70</parameter>
<parameter name="y">70</parameter>
</parameters>
</command>
</commands>
</format>
<format>
<name>60x60</name>
<!-- This format use 70x70 cropping and will not be shown in the sulu backend when do a crop -->
<crop-format>70x70</crop-format>
<commands>
<command>
<action>scale</action>
<parameters>
<parameter name="x">60</parameter>
<parameter name="y">60</parameter>
</parameters>
</command>
</commands>
</format>