Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Any solution to find and use the uploaded images in article?
etc wrote #335158:
Not sure about ‘delete’ button outside its container though.
Not sure I understand – do you mean the “delete” should always be displayed on top of the image? It does, depending on both window width (the column-width depends on the width of the window) and the size of the image.
Might this addition help some ?
#txp-image-group-content .sortable {
width: fit-content;
margin: .15em auto;
}I am not sure I like it…
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Any solution to find and use the uploaded images in article?
Neither I’m sure about displaying all images in one column, it’s a waste of space for small thumbnails.
Offline
Re: Any solution to find and use the uploaded images in article?
I have reworked the upload area, images can be dropped from disk or webpage and also added/deleted. Please test, if functionally it’s okay, I will tidy up the code and UI.
Offline
Re: Any solution to find and use the uploaded images in article?
etc wrote #335161:
Neither I’m sure about displaying all images in one column, it’s a waste of space for small thumbnails.
Kinda LOL, you removed that functionality a few releases ago. I’ll look into restoring that after checking your latest changes later today.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Any solution to find and use the uploaded images in article?
1. Uploading by drag & drop from the disk works OK – at least it works as before your latest patch on macOS. Remote D&D seems to work as well, at least in Safari and Firefox (tested with 2 diff. pages).
2. I’ve updated the mockup page with some fine tuning – including allowing multiple images per row. Mockup here (scroll down in the article image box to see a few small-small images).
Edit:
Worth mentioning: tentatively added overscroll-behavior-block: contain; to the scroll-boxes to prevent scrolling the whole page when you reach the end of the scroll container, and very simple styling for the scrollbar on those containers (setting to using thin scrollbars) – Firefox only for the latter.
Last edited by phiw13 (2023-03-23 05:28:50)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Any solution to find and use the uploaded images in article?
I’ve updated the mockup based on the latest proposed layout, incl. some cleanup in the stylesheet.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Any solution to find and use the uploaded images in article?
Great, thank you. I didn’t want to bother you before the dust has settled, but things shouldn’t move too much any more. I just hoped to get rid of label hacks and style the file input directly, but this looks tricky.
Offline
Re: Any solution to find and use the uploaded images in article?
I have added an ugly toggle between ‘contains/not contains’ filter at the end of the input. If someone could style it better, (s)he is welcome.
Offline
Re: Any solution to find and use the uploaded images in article?
etc wrote #335174:
I have added an ugly toggle between ‘contains/not contains’ filter at the end of the input. If someone could style it better, (s)he is welcome.
I had to think deep before I understood what exactly is being toggled… Now I get it – it toggles between include search string in results or exclude it from the result. Not sure what to suggest to improve the look, though.
For accessibility, think about make the “invert” text a little more verbose? Speaking of accessibility, check what Adrian Roselli has to say (broadcasting states. etc). (hint, your choice of using a <button /> is good).
Style related: use inset-inline-end: 0 instead of right: 0 for the positioning of the button (automatically positions the button correctly for RTL languages).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Any solution to find and use the uploaded images in article?
… The invert button needs a title attribute with a verbose indication (I didn’t understand its purpose until Philippe’s message).
And the corresponding input could have this CSS rule:
#article-file-name{padding-right: calc(.3076923077em + 34px)}Last edited by Pat64 (2023-03-28 03:30:54)
Patrick.
Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.
Offline
Re: Any solution to find and use the uploaded images in article?
In the latest build (0.8.1) you moved the button (#article-file-toggle) before the related text field. That is unfortunate from an accessibility POV – try using the tab key to navigate, I think.
Two other accessibility (keyboard) points:
- the user does not know that the upload field has focus when navigating using the keyboard. Not sure the best fix. Possibly
#article-file-drop [type="file"]:focus + #article-file-input-label { outline: auto; }will work (untested). - bonus: set
tabindex="0"on the image containers (.com-image-container), similar to what is done on the list panels around the table.
Last edited by phiw13 (2023-03-28 04:11:03)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: Any solution to find and use the uploaded images in article?
phiw13 wrote #335181:
the user does not know that the upload field has focus when navigating using the keyboard. Not sure the best fix. Possibly
#article-file-drop [type="file"]:focus + #article-file-input-label { outline: auto; }will work (untested).
Now tested… the following works nicely without stomping on theme styling.
#article-file-input:focus ~ #article-file-input-label {
outline: auto;
outline-offset: -2px;
}bonus: set
tabindex="0"on the image containers (.com-image-container), similar to what is done on the list panels around the table.
(after further testing). Might not be needed, the scrolling script seems to set the focus correctly.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline