Jump to content
diogo

Textformatter image fields markup

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

That may be more intuitive to some developers, but surely not for clients

You're right, that actually came to my mind as well.

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
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"/>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Will look into it later. Make sure this text formatter is the last one being added in the field settings

Share this post


Link to post
Share on other sites

It's just a simple typo diogo: 

// if this field doesn't exist continue
if(!field) continue;

You're missing the $ :)

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...