[feedback] Image upload directly in the write tab

etc · 2019-04-30 22:18:19

zenman wrote #317834:

Is it possible to select images from the uploaded ones like with bot_image_upload?

It depends on what you mean by “uploaded ones”. No if they just have been uploaded via Write tab (all will be added to the current article, but this seems logical). Yes if you mean previously uploaded images — click on Add link to open the pane.

zenman · 2019-05-01 06:34:20

etc wrote #317838:

It depends on what you mean by “uploaded ones”. No if they just have been uploaded via Write tab (all will be added to the current article, but this seems logical). Yes if you mean previously uploaded images — click on Add link to open the pane.

yes, i mean “previously uploaded”.
for now whether i check Add or not, it is uploading a new image to an article. it does not open the pane.

etc · 2019-05-01 08:40:32

It looks like you are using an outdated version, try the latest one.

etc · 2020-05-04 21:51:00

abc_article_image for txp 4.8+. Install .zip file via Upload plugin dialog.

Main new features:

images can also be dragged from any webpage directly to Body/Excerpt. The result is browser-dependent, not thoroughly tested.
images (internal and external) insertion formats recognize {src}, {srcset}, {sizes}, {alt}, {title}, {w} and {h} attributes.

Examples:

!{src}! will insert Textile image pattern(s).
<img src="{src}" srcset="{srcset}" sizes="{sizes}" height="{h}" width="{w}" alt="{alt}" /> will insert HTML img tags with empty attributes removed.

Enjoy!

Bloke · 2020-05-12 16:08:03

That’s awesome, Oleg. Thank you so much. Being able to drag and drop from computer or from the existing image pool shown in the Write panel directly into the article caret is brilliant.

A few questions:

1. Not sure I understand the difference between internal and external image format in the prefs. No matter what I drag/drop or insert, it always uses the internal format. Please explain.

2. If I set the Internal format to your example above with srcset and sizes in it, select a bunch of images by dragging a selection rectangle over them in the Write tab, then drag that set into the Body field, I get something like this inserted:

<img src="https://example.com/images/398.jpg" srcset="{srcset}" sizes="{sizes}" height="800" width="800" alt="" />
<img src="https://example.com/images/397.jpg" srcset="{srcset}" sizes="{sizes}" height="1300" width="1152" alt="" />
<img src="https://example.com/images/395.jpg" srcset="{srcset}" sizes="{sizes}" height="600" width="613" alt="" />...

Is that expected?

Bloke · 2020-05-12 16:16:01

Also, in Dark Mode the placeholder label in the upload droppable box is kinda hard to see. Is this a theme thing or due to some override style rules in the plugin?

imgur.com/a/6nPog4S

etc · 2020-05-12 20:00:58

Bloke wrote #322944:

That’s awesome, Oleg. Thank you so much.

Thanks, Stef!

1. Not sure I understand the difference between internal and external image format in the prefs. No matter what I drag/drop or insert, it always uses the internal format. Please explain.

External images are what you drag from a web page without uploading them. Under FF you have actually no choice, but Webkit based browsers seem to work both ways. Internal images are the uploaded ones. They have id, w, h etc, but not srcset nor size. Which probably explains 2:

2. If I set the Internal format to your example above with srcset and sizes in it, select a bunch of images by dragging a selection rectangle over them in the Write tab, then drag that set into the Body field, I get something like this inserted:

<img src="https://example.com/images/398.jpg" srcset="{srcset}" sizes="{sizes}" height="800" width="800" alt="" />...

Bloke wrote #322945:

Also, in Dark Mode the placeholder label in the upload droppable box is kinda hard to see. Is this a theme thing or due to some override style rules in the plugin?

imgur.com/a/6nPog4S

Thanks for testing, it’s a pre-dark mode plugin which I have not touched for a while.

Bloke · 2020-05-12 21:07:25

etc wrote #322946:

External images are what you drag from a web page without uploading them.

*penny drops* Got it, thanks. That’s freaking awesome that you can drag/drop from another tab without downloading first. Even works in FF on Mac. And both externals and the !{src}! style images show in live preview: bonus!

It was just the wording that got me confused I think. Dragging a file from my HDD to Txp doesn’t feel very “internal” yet uses the internal layout because, ultimately, the file is uploaded to Txp and is thus “internal” by the time it’s inserted in the Body field.

Not sure if there’s better terminology but I’ll give it some thought. I could document the plugin for you. Is it hosted on GitHub anywhere so I can issue a PR, or just send it to you when I’ve written it?

Perhaps we should consider adopting this as an official plugin and give it a com_ prefix because I think with a little polish (like remembering the state of the ‘Add’ twisty) this is strong enough to be a viable stopgap or even replacement for the plans we had for bringing image functionality to the Write panel. We’ll still do the grid view, but maybe we don’t need to bake in image handling in core if this module can supply 80% of use cases.

With that in mind, a feature request if I may be so bold. There’s plenty of space alongside the Add button (not sure in other languages) to maybe sneak in an image search feature thus:

imgur.com/a/2mB4PrE

My thinking is that by default it displays the most recent N images uploaded (where N is governed by the pref) but if you issue a search, it performs an Ajax call to the txp_image table and does a broad spectrum search across name, alt, caption and category for the search text, returning the top N thumbs (most recent first) to maintain performance.

That would be killer. People who have organised their images into categories or those who vaguely remember part of an image filename could type a few characters and hit Enter to load the top 12, 18, 20 (or whatever they choose via prefs) images without leaving the Write panel. Click/drag the one(s) they want: boom, done. Issue another search, find more images that match the criteria, click/drag: boom, done.

Doable?

Last edited by Bloke (2020-05-12 21:10:00)

etc · 2020-05-12 21:36:48

Bloke wrote #322947:

Is it hosted on GitHub anywhere so I can issue a PR, or just send it to you when I’ve written it?

Perhaps we should consider adopting this as an official plugin and give it a com_ prefix…

My initial intention was to provide a frame that more UX-minded people than me (it’s easy) could use as plugins base, whence abc_ prefix. If you have time/will to put it on Github (whatever prefix/repo) and do some commits, I more than agree.

With that in mind, a feature request if I may be so bold. There’s plenty of space alongside the Add button (not sure in other languages) to maybe sneak in an image search feature thus:

imgur.com/a/2mB4PrE

Doable?

Looks so, but to avoid code duplication, I would think of direct ajax import from Images tab. Or maybe even integrating it in a iframe?

singaz · 2020-05-12 21:38:26

My observations.

create a new user with the status of “writer”.

A new user writes a new article and saves – everything is in order there.

A new user uploads a photo and saves – the photo is not saved.

I change the status of “writer” to “publisher”. Then I change the status of “publisher” to “writer”.

A new user uploads a photo and saves – the photo is saved.

etc · 2020-05-12 21:58:13

@singaz thanks for the report. I’m not sure Writers have image upload rights, but acquiring it through writer/publisher/writer switch looks weird. Needs testing.. needs time

Bloke · 2020-05-12 22:10:45

etc wrote #322948:

My initial intention was to provide a frame that more UX-minded people than me (it’s easy) could use as plugins base, whence abc_ prefix.

Okay, in that case, I’ll put it on our main repo if you don’t mind and we can continue development there.

to avoid code duplication, I would think of direct ajax import from Images tab. Or maybe even integrating it in a iframe?

Sure. Maybe that’s partly why we hadn’t done it in core – waiting for the grid implementation to get the code for free. But although the original plan was to iframe or popup a portion of the images panel, it does seem overkill to have most of the panel squished into the space. Plus, our current panel code isn’t really optimised for this kind of thing. Maybe when the widget/UI library is used it will become easier to compartmentalise the rendering and build chunks more easily for use on other panels.

The only annoying thing about all this – and it’s something I’m keen to explore as part of our image data function that handles uploads – is to populate alt/caption automatically if that information is available. Not just when uploading from the Write panel, but from the Images panel too. You can always categorise pics later using multi-edit, but it’s a real pain to go through each individually and add the required alt text, if nothing else. This plugin uses the file name, which is at least something.

I’m sure I proposed something (somewhere… here… on GitHub… who knows… but it was definitely in a conversation with phiw13) about how to intelligently handle this on upload by extracting something from the image metadata/filename and using it as alt text if it was available. I’ll have to try and find the conversation. Or maybe it was for Files. Gah, my memory! Might have been during development of smd_meta_image.

Last edited by Bloke (2020-05-12 22:12:13)

Textpattern CMS

Textpattern CMS support forum

#49 2019-04-30 22:18:19

Re: [feedback] Image upload directly in the write tab

zenman wrote #317834:

#50 2019-05-01 06:34:20

Re: [feedback] Image upload directly in the write tab

etc wrote #317838:

#51 2019-05-01 08:40:32

Re: [feedback] Image upload directly in the write tab

#52 2020-05-04 21:51:00

Re: [feedback] Image upload directly in the write tab

#53 2020-05-12 16:08:03

Re: [feedback] Image upload directly in the write tab

#54 2020-05-12 16:16:01

Re: [feedback] Image upload directly in the write tab

#55 2020-05-12 20:00:58

Re: [feedback] Image upload directly in the write tab

Bloke wrote #322944:

Bloke wrote #322945:

#56 2020-05-12 21:07:25

Re: [feedback] Image upload directly in the write tab

etc wrote #322946:

#57 2020-05-12 21:36:48

Re: [feedback] Image upload directly in the write tab

Bloke wrote #322947:

#58 2020-05-12 21:38:26

Re: [feedback] Image upload directly in the write tab

#59 2020-05-12 21:58:13

Re: [feedback] Image upload directly in the write tab

#60 2020-05-12 22:10:45

Re: [feedback] Image upload directly in the write tab

etc wrote #322948:

Board footer