[Feature] Added possibility to upload multiple images #425
Conversation
|
@tonytlwu |
|
|
| } | ||
|
|
||
| .agenda-multiple-images-item img { | ||
| object-fit: contain; |
There was a problem hiding this comment.
Does this work in IE 11? https://caniuse.com/#feat=object-fit says it doesn't.
| flex-wrap: wrap; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 149px; |
There was a problem hiding this comment.
How is this making sure that it's always presented as a 2 or 3 column layout in squares if the width and height are set in absolute values?
There was a problem hiding this comment.
@tonytlwu
To make sure that the column has 2 or 3 items per row we can add max-width to the images container in px. So, far this is the only way we have found. Is it ok ?
There was a problem hiding this comment.
@MaksymShokin I don't understand what the challenge is here. There are many methods in CSS to create a 2 or 3 column layout.
There was a problem hiding this comment.
@tonytlwu
Columns-count property does not work properly here due to wrong ordering. Could you share other methods you have in mind? I can use css grid. But we still need to set absolute values for height and width.
There was a problem hiding this comment.
There was a problem hiding this comment.
@tonytlwu
I do not see any changes. If I add fourth item it does not go onto the next row.
There was a problem hiding this comment.
@MaksymShokin Sorry. The link was incorrect. See https://jsfiddle.net/tonytlwu/7r26b8cz/3
There was a problem hiding this comment.
@tonytlwu
In the requirements, it was said that containers should be squares. You added width: 33.33%. How can we add the same value to the height?
There was a problem hiding this comment.
Use either one of these principles https://jsfiddle.net/tonytlwu/bL2hkcae/
widget.json
Outdated
| "name": "List (from data source)", | ||
| "package": "com.fliplet.dynamic-lists", | ||
| "name": "List (from data source)-images", | ||
| "package": "com.fliplet.dynamic-lists-images", |
There was a problem hiding this comment.
| "package": "com.fliplet.dynamic-lists-images", | |
| "package": "com.fliplet.dynamic-lists", |
|
|
||
| agendaImageGallery.listen('afterChange', function() { | ||
| Fliplet.Page.Context.update({ | ||
| agendaImageGalleryId: _this.data.id, |
There was a problem hiding this comment.
Why are we updating these page context parameters? Does this feature support opening a detail view gallery item using URL parameters? If so, I don't see any code that supports this.
There was a problem hiding this comment.
That is how it is done in the gallery component. I do not think that is it possible to open a detail view using URL, as far as I remember this is done to correctly assign images to specific component. So if we have multiple gallery components it will not show all pictures from both of those components.
There was a problem hiding this comment.
If the page context updating isn't going to do anything for the user, then take it out. It wasn't part of the requirement to get that working.
|
|
||
| agendaImageGallery.listen('afterChange', function() { | ||
| Fliplet.Page.Context.update({ | ||
| agendaImageGalleryId: _this.data.id, |
There was a problem hiding this comment.
If the page context updating isn't going to do anything for the user, then take it out. It wasn't part of the requirement to get that working.
|
@tonytlwu |
|
@MaksymShokin Can you explain or show what fullscreen mode you're referring to, and why it doesn't work without the page context? |
|
@tonytlwu |
|
@tonytlwu |
|
@MaksymShokin You need to find out why it doesn't work without the page context. As far as I know they shouldn't be necessary to the working of the feature. By setting the page context, the URL query parameter, e.g. Without it, gallery feature should work just fine. |
@sofiiakvasnevska
Issue
Fliplet/fliplet-studio#4865
https://weboo.atlassian.net/browse/OD-19
Description
Remade PR after reverting and fixed an issue mentioned by Inna.
Screencast
https://streamable.com/sgegno
Backward compatibility
This change is fully backward compatible.
Reviewers
@upplabs-alex-levchenko