Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#25 2020-04-28 06:55:18

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

@jrmartin Please humour me as I’ve not used WordPress in a decade. How do people insert inline body images there?

I understand your reticence for using the article image here, but it’s way more flexible than most people realise. It can take a comma-separated list of IDs, which opens up a whole array of uses.

An example: on many client sites, I install abc_article_image. That adds an image picker on the article image field. You can pick as many images you like from those uploaded already to attach to the article, or drag/drop new ones to upload when the article is saved. Behind the scenes it handles uploads and simply adds the images as a list of IDs to the article image field, and displays the thumbnails as a reminder.

Step two is to use a shortcode. I’ve written one called nextimg which I use once in my site template. That pulls out the first image in the set from the article image field, for use in the article listing or as a banner image for the article.

Then, I can add this shortcode to smd_textile_bar. The result: every time someone clicks the form insert button it adds <txp::nextimg /> wherever their insertion caret is. They can sprinkle these anywhere they like. When viewing the article, the shortcode just automatically adds the next image it finds each time that tag is encountered. CSS does the rest. No need for IDs or anything like that. Much cleaner.

Rearrange the image order: it still works as people expect. Add images: just insert new nextimg tags where you want them. Remove images: the shortcode gracefully displays nothing.

I designed the shortcode so it can take attributes if you wish, to override the display of a particular image. Use a class for example, or a different form. Nothing to stop me extending the functionality so it can take a limit attribute. That could permit a gallery to be inserted at various places in the article body by grabbing a few images instead of defaulting to one. Sky’s not even the limit.

The point is, shortcodes have opened up an entire universe of creative ways to use Textpattern. Making your own tags adds the ability to do things like this that no other CMS can manage as elegantly.

Last edited by Bloke (2020-04-28 06:59:23)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#26 2020-04-28 07:19:15

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,493
Website

Re: smd_textile_bar: Simple Textile insertion for the Write panel

jakob wrote #322719:

Good point about dark mode. That should be doable. Phil sets a darkmode class so that should be straightforward. The svg are referenced as symbols so it should just be a case of changing the color with css.

ah, yes now I remember, Hive uses a CSS class for dark mode. Thanks. For Hive you just need to make sure the color / background-color on the toolbar and the <a /> are set as needed and the icons will inherit that.

Meanwhile I see Stef already checked a few small changes in a putative version 1.2. Those are nice and would make it very easy for Sandspace to adjust.

[…] I don’t think there are any toolbar or tooltip styles in the design patterns […]

Correct, there is no Core styling for an eventual toolbar. There is some JQ-UI widget that could cover this put that is very convoluted and certainly not ready for primetime.

Perhaps there should be a .txp-toolbar class in the future

philwareham wrote #322722:

I’ve just seen this project, thanks for resurrecting it Stef! I think a lot of the style issues can be negated by using the UI we already have for buttons, button icons, etc (class names such as txp-button, ui-icon and so forth). That would make the plugin less reliant on a specific theme too.

I was going to suggest to Jacob to piggyback more on the existing classes (and styles), happy to hear you’ll try to push that through.

If the SVG icons stored in the same way we do for the standard icon set in Textpattern too (as CSS background-image data URIs) then they use the same filtering to achieve dark mode/light mode.

there is nothing wrong with the way the icons are embedded directly in the HTML (particularly as they are currently only used on one panel). It is very to style them directly with CSS, without resorting to trickery such as filters.

Bloke wrote #322715:

I could do a dropdown for the form insertion, I expect. Would have to play. I nearly did the same for the Hx heading cycler but chickened out. Perhaps if it’s possible to add an arrow to the right, like we do with the Search box, that might work? Click the main button to insert/cycle but click the adjacent arrow to drop down options.

A simple dropdown could be all you need, in my book. no need for a complex UI with all the accessibility issues that then crop up (remember all issues that came up for the search bar widget and the options widget on the list panels?). Styling is quite easy.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#27 2020-04-28 07:25:29

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

phiw13 wrote #322730:

A simple dropdown could be all you need, in my book. no need for a complex UI with all the accessibility issues that then crop up

True. My only concern was space with really long form names. Guess they could be truncated with … but I’m not sure. Will try a few ideas and see which works best.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#28 2020-04-28 07:47:47

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,178
Website

Re: smd_textile_bar: Simple Textile insertion for the Write panel

phiw13 wrote #322730:

Correct, there is no Core styling for an eventual toolbar. There is some JQ-UI widget that could cover this put that is very convoluted and certainly not ready for primetime.

Perhaps there should be a .txp-toolbar class in the future

I was going to suggest to Jacob to piggyback more on the existing classes (and styles), happy to hear you’ll try to push that through.

I agree, a specific .txp-toolbar (plus perhaps modifiers) and perhaps also a corresponding toolbar icon styling for that would be best.
It turned out not to be so easy to piggyback because the gradient used for the control group headings in the sidebar or table headings is a sub-selector of the container class. Also currently the ui-button style doesn’t transform to dark in dark mode at the moment, so the buttons (or icon rollovers) become a row of bright ‘holes’ in dark mode. As far as I could see, there are not tooltip styles at present.

Currently, the text/icon and button/tooltip switches just set a modifier class on the toolbar container, so setting the icons or text to use the ui-button class requires overriding them for the other switch cases for those who prefer a text toolbar.

there is nothing wrong with the way the icons are embedded directly in the HTML (particularly as they are currently only used on one panel). It is very [easy] to style them directly with CSS, without resorting to trickery such as filters.

I looked at all three variants (symbol def + use, a sprite.svg and inline svg-css) and opted for the symbol (sizewise a sprite optimises better but then needs more css so it was roughly even). Phil has already switched in his fork, and if that makes it possible to use the existing filter styling consistently, that may be a legitimate reason. Using CSS+sprite or CSS inline, it’s also easier to accommodate other language icons via a [lang=de] (or similar) selector than it is with a use tag.

I did make some darkmode css styles for the v1.1 version (which you can add to the plugin) and it follows the “look” of hive but, as described above, not the css selectors. I’ll defer to Phil, as a central style variant would be preferable for better admin theme styling. You can use that as an interim version if you like.


TXP Builders – finely-crafted code, design and txp

Offline

#29 2020-04-28 09:01:27

etc
Developer
Registered: 2010-11-11
Posts: 4,529
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

Bloke wrote #322729:

on many client sites, I install abc_article_image. That adds an image picker on the article image field. You can pick as many images you like from those uploaded already to attach to the article, or drag/drop new ones to upload when the article is saved. Behind the scenes it handles uploads and simply adds the images as a list of IDs to the article image field, and displays the thumbnails as a reminder.

IIRC, dropping local images from your computer directly onto Body/Excerpt, uploads and inserts them at the drop-point without adding their ids to article_image field.

If needed, we could add textile format for images insertion. This would enable their admin-side ‘in article’ previewing.

Offline

#30 2020-04-28 09:19:03

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

etc wrote #322733:

IIRC, dropping local images from your computer directly onto Body/Excerpt, uploads and inserts them at the drop-point without adding their ids to article_image field.

Yes it does. And that’s a brilliant feature. Might be perfect for jrmartin in this case to keep the article image for just the heading and let people drag images in where they want them.

I try to steer people away from this because it’s less flexible if you want to make changes later. That said, smd_imagery will (sort of) let you manage them this way after the event. There is a subtle issue with the regex that fetches images from the body field:

<txp:image[s]?.*((id)\s*=\s*"([0-9, ]+)"|(name)\s*=\s*"(.+?)").*?\/?>

I think it’s because it’s greedy, so it only picks the last image if you drag/drop more than one at a time. For example:

<txp:image id="393" />
<txp:image id="394" />

Some text...

<txp:image id="395" /><txp:image id="396" />

The plugin will only pick up image IDs 394 and 396. Fixing the regex is on my list of things to figure out one day.

But yes, drag/drop directly in an article is a fantastic feature of abc_article_image. It’s on my list of must-haves with pretty much every site.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#31 2020-04-28 09:23:03

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

etc wrote #322733:

If needed, we could add textile format for images insertion. This would enable their admin-side ‘in article’ previewing.

*drools* Yes! Could that be an option somehow? Not sure how, without complicating the plugin or adding prefs. Note to self: add the ability to parse Textile-inserted images into smd_imagery.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#32 2020-04-28 10:04:41

etc
Developer
Registered: 2010-11-11
Posts: 4,529
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

Bloke wrote #322735:

drools Yes! Could that be an option somehow? Not sure how, without complicating the plugin or adding prefs.

It actually already has two prefs (named abc_file, dunno why): the number of selectable images on the side bar (12) and the image(s) insertion format, like e.g. <txp:image id="{#}" />. Here {#} will be replaced with the inserted image id, and {##} with the list of ids. It looks straightforward to add some !#! format and treat it as textile link.

Offline

#33 2020-04-28 12:13:31

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,541
Website GitHub Twitter

Re: smd_textile_bar: Simple Textile insertion for the Write panel

Regarding the dropdown for selecting a heading level – you know we have jQuery UI controlgroup already, right? Basically designed for exactly this kind of widget…

design-patterns.textpattern.com/docs/#ui-doc-jquery-ui—controlgroup

I’ve already converted the plugin to use the CSS from controlgroup and pull-requested back to your repo. It wouldn’t be a great stretch to do the dropdown.

Offline

#34 2020-04-28 15:15:36

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

philwareham wrote #322737:

Regarding the dropdown for selecting a heading level – you know we have jQuery UI controlgroup already, right?

I instantiated one yesterday in my dev code, but it looked like the search widget. Probably because I copied the markup from the search box and kept the txp-search-options class. Looking at the design pattern, it seems there are no specific override classes in Txp for this grouping, so maybe if I remove that search class it’ll just work and I can style the dropdown to suit. Seems perfect, thank you.

And thanks a tonne for the PR. I’ll merge that with my current dev version and go from there.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#35 2020-05-02 13:50:41

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,538
Website GitHub

Re: smd_textile_bar: Simple Textile insertion for the Write panel

This commit adds the ability to choose a starting point for the Form insertion button. Pick one of your forms from the dropdown and then each click will cycle from that point forward. This means if you use a form often, you can preset the widget to start from there.

It also uses the new widgets proposed by Phil, which improves dark mode support.

Things to do:

  1. Store the selected form so it remembers next time you use an article.
  2. Possibly truncate the form names if they are long.
  3. Do a similar kind of dropdown affair (perhaps) for the heading Hx button ‘start point’, or use a straight dropdown.
  4. Fold in some more changes to tweak the look of the toolbar.

The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#36 2020-05-03 12:09:16

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,493
Website

Re: smd_textile_bar: Simple Textile insertion for the Write panel

Bloke wrote #322794:

… adds the ability to choose a starting point for the Form insertion button. Pick one of your forms from the dropdown and then each click will cycle from that point forward. This means if you use a form often, you can preset the widget to start from there.

Does that select widget construct for forms need to be in a nested ui-controlgroup ? I am a bit worried how that behaves as far as accessibility is concerned (nested role=toolbar and so on).
That said it is certainly much more useable than the previous implementation. So that is a huge improvement.


Where is that emoji for a solar powered submarine when you need it ?

Offline

Board footer

Powered by FluxBB