Update the gallery widget preview design.#188
Conversation
This is an initial implementation of the enhanced widget preview design proposed in #62. See: https://cloud.githubusercontent.com/assets/2846578/25029086/e8b7efa2-2087-11e7-8ea6-43679a3a2fb8.png
|
A couple of questions about this current implementation: In the designs, @melchoyce specified showing the number of additional images with placeholder text reading "+ %d more", but that number is only available inside the template. I'm not exactly sure the best way to combine that data with a translatable string, so suggestions welcome. There's probably a better way to enqueue the CSS here, but I couldn't get a callback on |
That is currently a challenge in JS, since there isn't yet i18n in core (#20491). There was a workaround we did in #39087, but it wasn't pretty as we basically had to iterate over all possible numbers on the server and then export them to JS: So that is one option. Maybe strings for numbers 1 to 25 could be generated. Or maybe the string could avoid needing to be translated by just omitting “more”? Or rather, the translated string could be just |
westonruter
left a comment
There was a problem hiding this comment.
Only other things I suggest would be to let the label be “+X” instead of “+More”. Also, clicking on the gallery preview I think should be a shortcut for “Edit Gallery”.
joemcgill
left a comment
There was a problem hiding this comment.
I swear I tried this and couldn't get it to work, but 🤷♂️. Seems good now.
This drops the "more" text from the design until we have a better way to handle i18n strings in JS.
|
@joemcgill haha! Behold what I just noticed when creating a Facebook post:
|
|
@westonruter I updated the template to show the number instead of "More" until we have a better way of handling i18n in JS. However, I do like the idea of putting that over an actual image instead of a grey box. |
|
Let's try the +# over an image with a 75% black overlay (or 75% opacity over a black bg, whichever) with white text, and bump up the font size a little. |
This uses the sixth image in a gallery as the placeholder whenever there are more than six images.
|
How do you like this? |
|
Looks amazing! (Ignore that Travis build error. It's a failure not an error on your part.) |
|
I think we can actually go lighter on the opacity, but let's merge and then fiddle later. |
This is an initial implementation of the enhanced widget preview
design proposed in #62.
See: https://cloud.githubusercontent.com/assets/2846578/25029086/e8b7efa2-2087-11e7-8ea6-43679a3a2fb8.png