Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#21 2020-04-27 17:30:39

jrmartin
Member
Registered: 2013-03-07
Posts: 83

Re: smd_textile_bar: Simple Textile insertion for the Write panel

jakob wrote #322709:

The textile bar will now have an insert form icon (a hexagon with a +). Click on that to insert <txp::your_short_tag /> into the Body or Excerpt field. If you have several such forms, clicking again with the cursor in the same place rotates between your custom short-tags.

So the writer will still need to add something like “id=12” to the short form to add a particular photo to an article? Hmmmm. It’s still a bit awkward if that’s the case.

Offline

#22 2020-04-27 19:43:44

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,474
Website

Re: smd_textile_bar: Simple Textile insertion for the Write panel

jrmartin wrote #322724:

So the writer will still need to add something like “id=12” to the short form to add a particular photo to an article?

How else do people specify an image if not by its ID? How do you want them to use this feature?

There are plenty of ways you can set up shortcodes to make people’s lives easier. There are plugins too. People don’t even need to enter an ID if you code it to get the ID from other fields.

Tell us how exactly you want people to be able to do what you want and we’ll see how best to help.


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

#23 2020-04-28 00:16:42

jrmartin
Member
Registered: 2013-03-07
Posts: 83

Re: smd_textile_bar: Simple Textile insertion for the Write panel

I’m trying to make it easy for someone without the slightest interest in code to take one or more of their pictures and put them in the article at the appropriate points. I can tell them to copy the image code I use where they want the image and change it to add the proper id, but that’s quite clunky. It would be better to have the toolbar put the image code on the page with a text box so that the author could add the id or something like that.

In fact, instead of the image button putting !! on a page, if it could be re programed to drop <txp:images id=“xx” form=“images” /> in there I’d be happy happy.

(I understand I can use the article image for inputting the id for a single image, but I usually use that for the OG image.)

I hope I’m being at least somewhat clear here. I love the toolbar as it functions, but adding an image in Wordpress is so much easier—and that’s the CMS I have to convince them to abandon.

Offline

#24 2020-04-28 06:08:25

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,006
Website

Re: smd_textile_bar: Simple Textile insertion for the Write panel

jrmartin wrote #322726:

I’m trying to make it easy for someone without the slightest interest in code to take one or more of their pictures and put them in the article at the appropriate points. I can tell them to copy the image code I use where they want the image and change it to add the proper id, but that’s quite clunky.

I think that short-codes have opened a can of worms here. In reality, I do not think that there is a universally accepted way to insert images or any other short-codes within the text. I found that adi_notes offers the best way regarding reminders like that. By residing on the bottom of the pages tab, all they will need to do is copy/paste/edit. Furthermore you will have control as to what will be appearing in more complex shortcodes, such as in the example of a figure with custom caption, alt, etc.

(I understand I can use the article image for inputting the id for a single image, but I usually use that for the OG image.)

Are all your other custom_fields taken?


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,474
Website

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,015
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.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,474
Website

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: 3,849
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

Online

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

etc
Developer
Registered: 2010-11-11
Posts: 3,697
Website

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: 9,474
Website

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

Board footer

Powered by FluxBB