[feedback] Image upload directly in the write tab

Bloke · 2020-05-13 00:53:16

First stab at a port to com_article_image. Pretty much a direct clone of the plugin but all as a single .txt file.

The reason for this is that if I bundled the plugin .php file in Textpattern Plugin Template Format along with the css and javascript into a zip file, it borked on installation. Seems Txp is expecting a <?php file, not template format content inside zips:

If we drag the template .php file into the Admin->Plugins panel, it’s fine.
If we paste the contents of the .txt file into the Upload box, it’s fine.
If we drag a zip file containing a raw .php file of just the plugin code NOT in template format, it’s fine and extracts all the associated resources.
If we drag a zip file containing a template .php plugin file, it doesn’t install.

Since I wanted to use the template format (for bundled Textpack strings, and docs in future), I had a choice: bundle all the additional file resources up inside the plugin or shove them in the data column and include them. The latter would be great if dealing with a single file, but as we have a .js and a .css file, they need to be bundled together into the data column using a separator, and extracted on install into separate files. Not friendly and a bit hacky.

Alternatively – and possibly slightly better – we could keep the css in the plugin, and bundle the js file up into the data column so it’s auto-extracted as data.txp in the plugin directory. Sadly, neither solution allows us to edit the code in a nice syntax-highlighted environment; it’s always smooshed up in heredoc, which is ugly. We’ll live with it for now.

Anyway, there are a few things to tidy up, but the plugin functions exactly as abc_article_image did. Internally, it’s now encapsulated in a class for a smaller global footprint.

I’ll start a new thread for the plugin, probably tomorrow. Then we can work on prettying it up.

Last edited by Bloke (2020-05-13 01:01:10)

phiw13 · 2020-05-13 01:50:04

@ Bloke

thanks for porting this to the com_ prefix space!

ref that upload field in dark mode – edit this to delete the background: white;:

#article-file-drop>div.txp-form-field-value {}

It would make it usable in both light and dark mode, and be friendly to themes. That block is actually specified twice in the plugin. Delete the last of the two entries and edit the first.

@ etc

when you first posted about the upgraded version (in a zip format) i could not install it locally by file upload and what not, as the default macOS apache + php install apparently do no support that (package was greyed out in the file picker).

–^–

edit to add – the php file posted by bloke installs fine here locally.

Last edited by phiw13 (2020-05-13 01:52:14)

Pat64 · 2020-05-13 03:55:22

Oleg.

What about these changes?

Convert hard coded string Click or drop files on this zone to etc_drop:

#@admin
#Default language, en-us, en-gb
etc_drop => Click or drop files on this zone
#@admin
#@language fr-fr
etc_drop => Cliquez ou glissez des fichiers ici

Then, into your css/style file add this:

#article-file-drop > div.txp-form-field-value{
	overflow:hidden;
	width:inherit;
	text-align:center;
	color:#333
}

Last edited by Pat64 (2020-05-13 03:56:17)

Bloke · 2020-05-13 06:00:40

Pat64 wrote #322955:

Convert hard coded string

I’ve done that already in com_article_image.

into your css

I’ll add that, thank you.

Bloke · 2020-05-13 06:03:18

phiw13 wrote #322954:

ref that upload field in dark mode

Ah, brill. I’ll make those CSS tweaks today. Much obliged, sir.

phiw13 · 2020-05-13 06:31:00

Instead of setting the color in the code Patrick suggests, consider using the .secondary-text class on the <p /> that wraps that string. Automatic dark-mode support and theme support included in the box. Not sure about the rest of his code as I haven’t tested enough.

Bloke · 2020-05-13 06:59:51

I’ll review the CSS, thanks. I think the markup needs tweaking too anyway. Probably some core design pattern goodness we can reuse.

phiw13 · 2020-05-13 07:11:35

Bloke wrote #322959:

I’ll review the CSS, thanks. I think the markup needs tweaking too anyway. Probably some core design pattern goodness we can reuse.

The markup is OK, I think; it is the same as what is used under the other headings. Personal nit, but I am not sure if the second <hr /> is needed (the one just before the “Add” button).

As for the CSS suggested by Patrick, after a light testing you don’t need the width: inherit Admin themes should handle that correctly out of the box (Sandspace sure does, Hive too AFAICS) for any device or browser.

Bloke · 2020-05-13 08:21:08

CSS/layout tweaks done, thank you both.

etc · 2020-05-13 08:30:25

Bloke wrote #322953:

First stab at a port to com_article_image.

Woohoooo!

The reason for this is that if I bundled the plugin .php file in Textpattern Plugin Template Format along with the css and javascript into a zip file, it borked on installation. Seems Txp is expecting a <?php file, not template format content inside zips:

That’s right, the idea was to separate the bundle into its parts.

Internally, it’s now encapsulated in a class for a smaller global footprint.

Nice! We should somehow enclose js too.

phiw13 wrote #322954:

when you first posted about the upgraded version (in a zip format) i could not install it locally by file upload and what not, as the default macOS apache + php install apparently do no support that (package was greyed out in the file picker).

That’s a bit strange, because if zipArchive php extension is disabled, the plugin does not even show the file upload dialogue. Must be OS quirk. You can still upload the unzipped folder manually into plugins directory and import from disk.

Bloke · 2020-05-13 08:41:40

etc wrote #322963:

That’s right, the idea was to separate the bundle into its parts.

Makes sense.

We should somehow enclose js too.

That’s above my paygrade, unfortunately :( Any assistance welcome.

I’ve tried a few times to get my head around how to properly encapsulate JS in an object. I sort of get the principle but for some reason it doesn’t stick in my brain.

The closest I’ve come to understanding it is in smd_textile_bar, but that’s cos it was inherited from Jukka who is light years ahead of me in coding terms. Even then, some parts of how it’s structured make me scratch my head when it’s using .apply() and Array.prototype.slice.call() and so forth.

Last edited by Bloke (2020-05-13 08:43:37)

Bloke · 2020-05-13 08:59:41

I’ve also fixed the duplicate CSS block (note to self: don’t register callbacks twice). Thanks, phiw13.

And I’ve just pushed a quick tweak that uses flexbox for laying out the thumbs in both areas. Feedback/improvements/derision on this move welcome!

EDIT: balls, flexbox screws up the twisty Add button functionality. *sigh* back to the drawing board.

EDIT 2: Fixed… ish. More investigation required into making the subpanel closed on initial startup but have its state remembered thereafter.

Last edited by Bloke (2020-05-13 09:21:26)

Textpattern CMS

Textpattern CMS support forum

#61 2020-05-13 00:53:16

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

#62 2020-05-13 01:50:04

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

#63 2020-05-13 03:55:22

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

#64 2020-05-13 06:00:40

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

Pat64 wrote #322955:

#65 2020-05-13 06:03:18

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

phiw13 wrote #322954:

#66 2020-05-13 06:31:00

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

#67 2020-05-13 06:59:51

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

#68 2020-05-13 07:11:35

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

Bloke wrote #322959:

#69 2020-05-13 08:21:08

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

#70 2020-05-13 08:30:25

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

Bloke wrote #322953:

phiw13 wrote #322954:

#71 2020-05-13 08:41:40

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

etc wrote #322963:

#72 2020-05-13 08:59:41

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

Board footer