Jump to content

Textformatter image fields markup


diogo
 Share

Recommended Posts

https://github.com/ocorreiododiogo/pw-image-fields-markup

http://modules.processwire.com/modules/textformatter-image-field-markup/

This is an old idea that I felt inspired to finish after reading this discussion https://processwire.com/talk/topic/9164-release-inputfield-ace-extended/?p=88717

This textformatter does more or less the same that my Image tags texformatter, but instead of using it's own tags, it tries to be completely agnostic while doing this, so you can use whatever method the markup language applied to that field uses. So, for example, If you are using Markdown on your that field, you would insert all images of a field called "images" on that page with:

![](images:0)

or inserting the second image from the field called "images" with and alt text of "overriding alt text":

![overriding alt text](images:2)

While for textile you would do this:

!images:0!
!images:2(overriding alt text)!

As I said, this is language agnostic, so it should work with any markup language. The trick is to collect the images when they are already html img tags, and intervene only on those that are not urls by changing their attributes accordingly. I used the php native DOMdocument class for this.

There are still things to be done, like targeting fields on other pages, defaulting to the first image field from that template and cleaning up a bit. But I'm not planning to do those at this point. Consider this beta.

  • Like 4
Link to comment
Share on other sites

YOu might consider using the new formatValue(page, field, value) method in textformatters? https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/core/Textformatter.php#L62

I had some strange things with DOMDocument in the past with encoding and I hate it cause a saveHtml() does return the a modified html structure with adding a <html> etc.

  • Like 1
Link to comment
Share on other sites

YOu might consider using the new formatValue(page, field, value) method in textformatters? https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/core/Textformatter.php#L62

I'll have a look at it. But I noticed that the core text formatters still use the deprecated format()...

I had some strange things with DOMDocument in the past with encoding and I hate it cause a saveHtml() does return the a modified html structure with adding a <html> etc.

Yep, you're right. Not perfect, but you can reduce the output to a targeted node with as a parameter to saveHtml(), so I reduced it to <body> and trimmed the body tags.

$str = $dom->saveHTML($dom->getElementsByTagName('body')->item(0));
$str = ltrim(rtrim($str, '</body>'), '<body>');

--

Edit: updated the module with this change

Link to comment
Share on other sites

diogo, great one, thanks.

I'd prefer a syntax that might be more intuitive?

instead of:

images:0 // all
images:1 // first
images:2 // second

rather: 

images // all
images:0 // first
images:1 // second

What do you think?

Edit: Ha, did not know about the DOMDocument class, that's very useful.

  • Like 1
Link to comment
Share on other sites

diogo, great one, thanks.

I'd prefer a syntax that might be more intuitive?

instead of:

images:0 // all
images:1 // first
images:2 // second
rather: 
images // all
images:0 // first
images:1 // second
What do you think?

Edit: Ha, did not know about the DOMDocument class, that's very useful.

 

Agree with only "images", but not the 0 index form. That may be more intuitive to some developers, but surely not for clients

images and images:0 all

images:1 first

 

Exactly :)

  • Like 1
Link to comment
Share on other sites

I don't know how Bea's ImageExtra module is working, but as far as I can tell one could give an image a custom name field, so how about supporting that, perhaps configurable, so that one can reference the images via name. This would make it sorting agnostic.

images:header
images:intro
images:foo

The image field is an extension of WireArray, right? So in your code module's you should be able to get it easily via $images->get('name=foo');

  • Like 1
Link to comment
Share on other sites

I don't know how Bea's ImageExtra module is working, but as far as I can tell one could give an image a custom name field, so how about supporting that, perhaps configurable, so that one can reference the images via name. This would make it sorting agnostic.

images:header
images:intro
images:foo

The image field is an extension of WireArray, right? So in your code module's you should be able to get it easily via $images->get('name=foo');

It's a good idea, but has other implications because I test for the fieldtype to check if the field is multiple. Not a showstopper, but I can't work on it at the moment.

Link to comment
Share on other sites

  • 3 months later...

@diogo

I installed Image Tags to use with Inputfield ACE Extended while writing plain html. I do not know, should I switch to using this module (it is formally compatible with 2.5 while Image Tags is not). Could you please tell about the differences between the modules? Are you planning to support both or merge them in one?

Edit: I did install this Textformatter image fields markup and couldn't manage to use it in plain html input. I did not ret the imahe url rendered. Is it even possible to use it imn this case, or is it for Markdown/Textile only?

Edited by Ivan Gretsky
Link to comment
Share on other sites

I changed both modules info to compatible with 2.6

The MarkupImages hijacks the html markup after any other text formatter already did it's work, so I don't see why it wouldn't work with plain html. Can you post here the code you used? If you're doing something like this this, it should work:

<img src="images:2"/>
Link to comment
Share on other sites

  • 2 weeks later...

Hi diogo,

unfortunately I get a notice with your module:

Notice: Use of undefined constant field - assumed 'field' in *** on line 44

This happens if image referer (markdown) are entered into the textarea, not before. The images render fine nevertheless.

I'm on 2.6.1 in debug mode.

EDIT:

unfortunately it also cuts off parts of the html code (namely the "d" in my first div). I'm mixing html and markdown.

Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...