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

etc · 2023-03-13 15:52:22

Bloke wrote #335067:

Awww, no commits? Thanks for the release though, I’ll give it a run through when I get a chance.

I’m totally ignorant of Git workflow, if anybody asked :-/

I thought it already took advantage of multi-site? Or do we need to do more beyond this:

Yep, but this is a fs path, not always suitable in URL (to access plugin assets like css an js).

Bloke · 2023-03-13 16:04:55

etc wrote #335068:

this is a fs path, not always suitable in URL.

True. If we need something to get to plugin resources then it’ll be damn useful I’m sure.

Edit: I suspect introducing a new convention here for the layout of a plugin folder would be beneficial. We already have a loose spec, but if we document it and make it concrete then it makes core’s job easier to define paths to find stuff within it. E.g. manifest file, php source, help, scripts, styles etc.

Last edited by Bloke (2023-03-13 16:43:48)

phiw13 · 2023-03-14 05:46:35

Plugin works OK, I think. The search is a little puzzling though. I input an image “name”, press return; it appears to load a bunch of images not necessary related (I don’t have many images uploaded on the test site).

2 issues:

if the site uses custom path to the plugins folder (in my case, domain.local/core_plugins, defined in config.php), the path to the stylesheet and script is wrong (it looks for /textpattern/plugins…)
at my first attempt, script and styles were blocked… Could you please, in a next version, make the script and style blocks CSP aware? Example by Stef on one of his plugins.

After downloading from GitHub, I installed the plugin by uploading the whole zip folder through the TXP admin UI.

Last edited by phiw13 (2023-03-14 05:50:31)

etc · 2023-03-14 12:57:01

I have uploaded v.0.4 (zip only atm), please test.

What’s new?

Image search fields pref. If empty, will use the search options of Images tab (as in v.0.3).
Search results can be scrolled with Down and Up keys and reset with Esc.
Minor improvements and bugfixes.

The plugin directory is still hard-coded, since I was not able to use PLUGINPATH constant in URL. Change it in the code if needed, will fix later.

phiw13 · 2023-03-15 05:23:54

This works nicely now – both the Upload part and the Find part. I tested this on my normal playground with 300+ images. Find: e.g type 2 digits and I get –quickly– a list of possible images.

One small UI suggestion: limit the height of the image containers (in case there are multiple images in the article_image field):

#article-file-container, #article-file-select { 
  max-height: 40vh;
  overflow:auto;
}

Oh, and check, CSP! For the inline onchange="comArticleImagePreview(this)", here is the hash for the script-src-attr

SHA256-S0Fa8QCxrGu3S55pAHU+jjOoI1PaLPGe2nF4gsfG3zA=

etc · 2023-03-15 08:18:25

phiw13 wrote #335076:

One small UI suggestion: limit the height of the image containers (in case there are multiple images in the article_image field):

Good idea, certainly better than limiting the number of visible images via CSS. Will test, thanks.

Oh, and check, CSP! For the inline onchange="comArticleImagePreview(this)", here is the hash for the script-src-attr

That’s an old days relics, I will rather move it to a listener.

phiw13 · 2023-03-15 09:19:53

etc wrote #335078:

That’s an old days relics, I will rather move it to a listener.

That would be even better. TY.

Last edited by phiw13 (2023-03-15 09:20:08)

etc · 2023-03-15 09:59:43

Okay, updated, seems to work fine. Please test, if everything is ok I will do some clean up.

News:

Scrollable image areas, change its height in style.css if needed.
Deletable images in the image select area.
Add link to append all filtered images at once.

phiw13 · 2023-03-16 03:09:40

Overall, it works great

One small issue that you probably know: $pluginpath for the script – it works great for the stylesheet. The path for the script is still hard coded; I managed to get $pluginpath working for the script, but I had to repeat the code block

plugin function  js()
{
    global $img_dir, $path_to_site;
    $pluginpath = str_replace($path_to_site, '..', PLUGINPATH);//dmp($pluginpath);
// and then add $pluginpath to the path.

More UI goodness: scroll snap on the image containers:

#article-file-container,
#article-file-select {
    scroll-snap-type: y mandatory;
}

#article-file-container p,
#article-file-select p {
     scroll-snap-align: start;
}

When scrolling the image “snaps” to the top edge of the container. BTW, consider adding a shared class to those two image containers; that makes it easier to write styles.

And thank you for removing the inline js thingie. This quickly becomes a model plugin for CSP handling in plugins.

etc · 2023-03-16 13:37:12

Thank you for UI and CSP hints, mostly done. The plugin is much funnier to use now.

Pat64 · 2023-03-17 01:12:30

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>

phiw13 · 2023-03-17 05:23:47

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:none instead of visibility: 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>

etc · 2023-03-17 12:44:03

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

etc · 2023-03-17 14:07:57

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 /> before div#article-file-container I 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?

phiw13 · 2023-03-18 01:31:27

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 placeholder and 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.

Textpattern CMS support forum

#16 2023-03-13 15:52:22

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

Bloke wrote #335067:

#17 2023-03-13 16:04:55

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

etc wrote #335068:

#18 2023-03-14 05:46:35

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

#19 2023-03-14 12:57:01

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

#20 2023-03-15 05:23:54

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

#21 2023-03-15 08:18:25

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

phiw13 wrote #335076:

#22 2023-03-15 09:19:53

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

etc wrote #335078:

#23 2023-03-15 09:59:43

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

#24 2023-03-16 03:09:40

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

#25 2023-03-16 13:37:12

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

#26 2023-03-17 01:12:30

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

#27 2023-03-17 05:23:47

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

#28 2023-03-17 12:44:03

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

#29 2023-03-17 14:07:57

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

phiw13 wrote #335109:

Pat64 wrote #335108:

#30 2023-03-18 01:31:27

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

etc wrote #335112:

etc wrote #335115:

Board footer