Any solution to find and use the uploaded images in article?

etc · 2023-03-18 10:00:34

phiw13 wrote #335126:

Can you describe what you saw? I have not noticed anything “unexpected”, so far.

When at the bottom of a scrolled area, if the topmost visible image is not aligned with the top of the container, a click inside the area provokes scrolling rather than its default action. It might be related with the browser (FF110 on W10) or JS scrolling the plugin applies on image add.

What I mean here is that given the same (default) configuration of the extension (name, id) and performing the exact same search (88 as input) the Publisher could find the file but the Staff Writer could not (that user uses a different browser though).

Is it fixed now? The reason was that user prefs were created only on plugin install and only for the current user (Publisher). I’m not sure another user was able to create these prefs without triggering install (now fixed).

drag and drop of images to insert into the textarea remain hugely problematic in Brave (Chromium) – that might just be me.

If you mean dragging from the article images area, then yes, one needs to do it twice. I guess it’s jQuery Scrollable that interferes here and need to investigate further. The issue is minor imo since article images are not meant to be inserted directly, but via a template. Dragging from the image add area works fine for me.

I will have a look about the various layout/styling issues next week.

Would be ace.

phiw13 · 2023-03-18 11:21:41

etc wrote #335128:

When at the bottom of a scrolled area, if the topmost visible image is not aligned with the top of the container, a click inside the area provokes scrolling rather than its default action. It might be related with the browser (FF110 on W10) or JS scrolling the plugin applies on image add.

Odd, I don’t think I have seen that. I’ll test again.

Is it fixed now? The reason was that user prefs were created only on plugin install and only for the current user (Publisher). I’m not sure another user was able to create these prefs without triggering install (now fixed).

Yes it works fine now. (note, related to plugin prefs, did you see this post?)

etc · 2023-03-19 10:56:30

Dragging from the article images container onto body/excerpt should work now. Note that the image will be moved there by default. If you want to copy it, hold Shift while dragging.

phiw13 wrote #335129:

Odd, I don’t think I have seen that. I’ll test again.

That’s clearly reproducible for me, but only in the article images container. Must be jQuery Sortable interfering.

Edit: spoken too early, it happens in the image select area too, but only sporadically. Maybe a FF bug, since scrolling to the bottom by dragging the scrollbar is impossible (the images realign themselves), but only for certain image sizes combinations. Odd.

(note, related to plugin prefs, did you see this post?)

In com_article_image case this might be related with the prefs bug fixed in latest versions. For other plugins dunno.

phiw13 · 2023-03-20 06:15:13

etc wrote #335138:

referring to scroll-snapping

That’s clearly reproducible for me, but only in the article images container. Must be jQuery Sortable interfering.

Edit: spoken too early, it happens in the image select area too, but only sporadically. Maybe a FF bug, since scrolling to the bottom by dragging the scrollbar is impossible (the images realign themselves), but only for certain image sizes combinations. Odd.

I cannot reproduce this: Safari 16 + TP / Firefox 112beta / Brave (Chromium) 111. in all 3 cases I can scroll to the bottom (at some image sizes the last image might not fully visible as you say – but only if I set my Mac to “Show scrollbars: always” and drag with the scrollbar – not my default settings). But clicking on the last image brings me to the image edit panel, as expected.
–^–

Preferences (Options) access for lower priv’ users (Managing editor)

In com_article_image case this might be related with the prefs bug fixed in latest versions. For other plugins dunno.

Indeed, now the Managing Editor can access and edit the Preferences for this plugin. Great. So you think the issue is (possibly) related to plugins themselves and not some core issue? Sounds a little odd from my pov.

–^–

ref. dragging and shift dragging: Works great in Safari and Firefox.

The layout issues I will have a look later this week. Non-web stuff to do, among others things a Nowruz gathering, the Perso-Japanese way.

phiw13 · 2023-03-22 05:39:49

Layout stuff:

Mock-up (using Sandspace theme) is here.

I reenabled the scroll-snap
one change: use the logical property inset-inline-end: .5em; for the #txp-image-group-content .destroy (makes it work for all languages at once).
added the code Patrick provided above for each image block (whole image is a click/tap target).

The whole stylesheet is embedded in the mockup (search for <style>).

The “update“ button (and the “add”) button:

each is wrapped in its own paragraph, and aligned at the end (right side) of the line.
I made 2 patterns: the “update“ button uses the HTML <button /> element set to disabled initially; if there is and image to “update“, toggle that disabled attribute.
the second, “add”, is an <a href />, mostly to illustrate the difference. Suggestion, when not active (an image can be added to the list), set it to the .disabled class?

My preference goes to the <button /> option both for accessibility reasons and for semantic reasons (it might not be@possible for JS reasons?). Bonus: no layout shift as in my previous suggestion, no now-you-see-it-now-you-don’t effect.

The HTML changes are, in the mockup, preceded by a  and  comment.

etc · 2023-03-22 09:03:42

Fine, thanks. I’m in the midst of adding ‘drop images from webpage’ functionality and will include your changes once it’s settled. Not sure about ‘delete’ button outside its container though.

phiw13 · 2023-03-22 09:55:06

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…

etc · 2023-03-22 10:17:26

Neither I’m sure about displaying all images in one column, it’s a waste of space for small thumbnails.

etc · 2023-03-22 16:08:43

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.

phiw13 · 2023-03-22 23:44:49

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.

phiw13 · 2023-03-23 04:56:24

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)

phiw13 · 2023-03-24 08:26:05

I’ve updated the mockup based on the latest proposed layout, incl. some cleanup in the stylesheet.

etc · 2023-03-24 08:51:15

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.

etc · 2023-03-25 15:07:55

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.

phiw13 · 2023-03-27 06:56:48

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).

Textpattern CMS

Textpattern CMS support forum

#31 2023-03-18 10:00:34

Re: Any solution to find and use the uploaded images in article?

phiw13 wrote #335126:

#32 2023-03-18 11:21:41

Re: Any solution to find and use the uploaded images in article?

etc wrote #335128:

#33 2023-03-19 10:56:30

Re: Any solution to find and use the uploaded images in article?

phiw13 wrote #335129:

#34 2023-03-20 06:15:13

Re: Any solution to find and use the uploaded images in article?

etc wrote #335138:

#35 2023-03-22 05:39:49

Re: Any solution to find and use the uploaded images in article?

#36 2023-03-22 09:03:42

Re: Any solution to find and use the uploaded images in article?

#37 2023-03-22 09:55:06

Re: Any solution to find and use the uploaded images in article?

etc wrote #335158:

#38 2023-03-22 10:17:26

Re: Any solution to find and use the uploaded images in article?

#39 2023-03-22 16:08:43

Re: Any solution to find and use the uploaded images in article?

#40 2023-03-22 23:44:49

Re: Any solution to find and use the uploaded images in article?

etc wrote #335161:

#41 2023-03-23 04:56:24

Re: Any solution to find and use the uploaded images in article?

#42 2023-03-24 08:26:05

Re: Any solution to find and use the uploaded images in article?

#43 2023-03-24 08:51:15

Re: Any solution to find and use the uploaded images in article?

#44 2023-03-25 15:07:55

Re: Any solution to find and use the uploaded images in article?

#45 2023-03-27 06:56:48

Re: Any solution to find and use the uploaded images in article?

etc wrote #335174:

Board footer