Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Offline
Re: Any solution to find and use the uploaded images in article?
Two little comments:
1. the <p> tag inside the plugin construction could gain with a better DOM rendering (currently, the <a> tag has a thin inline height but not the <img> one based on my browser Dev Tool):
#txp-image-group-content .sortable {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: start;
}2. I tried to change the default tooltip for the destroy button (currently it’s the image file name) without any results :
<button title="'.gTxt('delete').'" class="destroy"><span class="ui-icon ui-icon-close">'.gTxt('delete').'</span></button>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?
Tested with 4.9.0-dev on localhost, with and without CSP active.
I log as a user with lower privileges than Publisher (tested Managing Editor and then Staff Writer) – which I had not tested so far, to be honest.
Search field
- the field does not show the placeholder (name, ID)
- more problematic: the field only accepts image name despite the pref being set to name and ID. Hmm, if you type a random ID that might not exist it shows the full list. Granted the majority of images available are not “owned” by the current user.
Uploading images
the preview process works OK, but the image is not added once the article is saved. I do not see any error flagged in the console. As managing editor that part works OK, though
Saved images are difficult to insert (particularly in Brave, Safari and Firefox do better). Patricks suggestion above makes it (a little) easier, although I experience many more failures than success.
In all cases, the user performing the action is the creator/author of the article.
Lesser issues
You’ve added a <label /> before div#article-file-container I presume it serves some purpose as a placeholder. its content is at first invisible
- it takes up visible space which looks unbalanced. Depending on the purpose, consider (a) using the core class
.txp-accessibility(hides the element except from screen reader and other AT) or (b) add to your#txp-image-group-content .invisible->position: absolute, or (better, imo)display:noneinstead ofvisibility: hidden. - BTW why did you choose
<label />as a wrapper around that button?
You’ve changed the “search” <label /> to “add” and added a link inside. That is a little problematic, as some people uses that <label /> to set the focus on the input field. And secondly it is less clear what the purpose of the search field is.
Posible change:
<div class="txp-form-field-label"><label for="article-file-name">Search</label> <a id="article-file-add" href="#">Add</a></div>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?
Thank you both for testing. I’ve quickly patched lower-level privs issue and postpone UI modifications to when I have more time. Note that you can edit the ‘user-editable’ part of css. I’ve noticed some weird click behaviour with ‘scroll’ rules and commented them out. TBC
Offline
Re: Any solution to find and use the uploaded images in article?
phiw13 wrote #335109:
the field does not show the placeholder (name, ID)
should be fixed
more problematic: the field only accepts image name despite the pref being set to name and ID. Hmm, if you type a random ID that might not exist it shows the full list. Granted the majority of images available are not “owned” by the current user.
can not reproduce. Note that it must be id (lowercase)
the preview process works OK, but the image is not added once the article is saved. I do not see any error flagged in the console. As managing editor that part works OK, though
should be fixed
Saved images are difficult to insert (particularly in Brave, Safari and Firefox do better). Patricks suggestion above makes it (a little) easier, although I experience many more failures than success.
works fine for me. With Patrick rules ‘delete’ buttons are outside their parent, but I leave the fine-tuning with you.
You’ve added a
<label />beforediv#article-file-containerI presume it serves some purpose as a placeholder. its content is at first invisible
It serves to update the image container on manual input in #article-image. I don’t want to make this automatic since it would require sending a db query on each keystroke.
You’ve changed the “search”
<label />to “add” and added a link inside. That is a little problematic, as some people uses that<label />to set the focus on the input field. And secondly it is less clear what the purpose of the search field is.Posible change:
<div class="txp-form-field-label"><label for="article-file-name">Search</label> <a id="article-file-add" href="#">Add</a></div>...
I’ve tried before, but it looks messy.
Pat64 wrote #335108:
I tried to change the default tooltip for the destroy button (currently it’s the image file name) without any results :
<button title="'.gTxt('delete').'" class="destroy"><span class="ui-icon ui-icon-close">'.gTxt('delete').'</span></button>...
This is p title and it shouldn’t be modified in any way since it serves to further filter the loaded images. But setting title of the button itself works for me. Browser issue?
Offline
Re: Any solution to find and use the uploaded images in article?
etc wrote #335112:
I’ve quickly patched lower-level privs issue and postpone UI modifications to when I have more time. […] I’ve noticed some weird click behaviour with ‘scroll’ rules and commented them out. TBC
Can you describe what you saw? I have not noticed anything “unexpected”, so far.
etc wrote #335115:
(me) more problematic: the field only accepts image name despite the pref being set to name and ID. Hmm, if you type a random ID that might not exist it shows the full list. Granted the majority of images available are not “owned” by the current user.
(oleg) can not reproduce. Note that it must be id (lowercase)
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). And yes I know it should be “id” (lowercase), I spelled it as uppercase out of habit in the comment above.
–^–
In (very) brief testing:
- less privileged users can now upload images just fine (Managing Editor, Staff Writer).
- the search field now displays the
placeholderand performs searches as expected, independently of the user privileges. - drag and drop of images to insert into the textarea remain hugely problematic in Brave (Chromium) – that might just be me.
I will have a look about the various layout/styling issues next week.
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 #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 (
88as 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.
Offline
Re: Any solution to find and use the uploaded images in article?
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?)
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?
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.
Offline
Re: Any solution to find and use the uploaded images in article?
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_imagecase 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.
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?
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 todisabledinitially; if there is and image to “update“, toggle thatdisabledattribute. - 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.disabledclass?
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 <!-- here --> and <!-- here 2 --> comment.
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?
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.
Offline