Module Image Tags

[diogo]

This is my first module, and you can see how it started on this conversation http://processwire.c...0302#entry10302

It allows you to add images from an image field to any place of a text area by inserting this tag {fieldname:n}, where "fieldname" is the name of the image field, and "n" is the position of the image in this field. It will output markup on this format:

<img src='$image->url' alt='$image->description'>

To activate it on a text area field, go to the DETAILS tab on this field EDIT page, and choose it from the Text Formatters options.

edit: on version 1.1 you can output all the images from one field at once by giving a 0(zero) index: {fieldname:0}

IMPORTANT!: At the same time as I built this module, adamkiss started building a more robust module with the same functionality http://processwire.c...ld-tags-module/. We decided to merge efforts on his module so, possibly I won't work on updating this one anymore.

I'll keep the download file in this thread for reference though.

EDIT: created a GIT repo for this module.

For downloading the module, head to: https://github.com/ocorreiododiogo/PW-ImageTags

Edited July 27, 2012 by diogo

[SiNNuT]

Nice module diogo! With my lack of php skills i wouldn't be able to come up with modules like this but it does seem quite easy in PW to make stuff like this.

On line 17 and 18; shouldn't the variable name be $nobrackets?

The module doesn't output width and height attributes. Is this intentional?

[ryan]

Nice job Diogo!

I suggest adding this line to the top of your format() function, just so that it doesn't have to perform the preg_match (a heavy function) when it doesn't need to:

// check if we even need to perform a preg_match and exit if not
if(strpos($str, '{') === false) return;

One idea for a future version is that if you just type the field name without the index, i.e. {images} it could output them all. Another idea is to add a class name to the <img> tag like "ImageTags" so that one could style them independently of other images.

[diogo]

Thanks for the comments! I uploaded a new version based on those suggestions.

On line 17 and 18; shouldn't the variable name be $nobrackets?

Corrected. I'm glad PHP doesn't punish bad English yet

The module doesn't output width and height attributes. Is this intentional?

I want to add this feature on a future version, but I don't want to implement it directly on the tags because it should be the designer, not the editor, to have control over it. Maybe adding it to preferences of the module would be the way to go. I don't think it would be possible to make it on a per field basis...

I suggest adding this line to the top of your format() function, just so that it doesn't have to perform the preg_match (a heavy function) when it doesn't need to:

// check if we even need to perform a preg_match and exit if not

if(strpos($str, '{') === false) return;

Done, thanks!

One idea for a future version is that if you just type the field name without the index, i.e. {images} it could output them all.

I implemented this but, at least for now, instead of {images} it will use index zero {images:0} to output them all. There are several reasons for this: It was faster to implement; it uses only one preg_match instead of two; and it prevents accidental use of tags by the editor — it's more unlikely that someone will type {images:0} on a text than {images}.

Another idea is to add a class name to the <img> tag like "ImageTags" so that one could style them independently of other images.

Done!

[diogo]

By the way, I like the typeface used on the site and forums. But the zero... aaarggg

[ryan]

it's more unlikely that someone will type {images:0} on a text than {images}.

Good call -- that makes sense to me. Fewer unintended side effects.

[Adam Kiss]

Oh my god! Great minds thinking alike indeed. Please read this:

[Marty Walker]

Hi Diogo,

I'm looking forward to giving this a go later. I can only think of one suggestion and that is being able to customise the CSS class on a per image basis.

Regards

Marty

[ryan]

Here's some PW (Dictator) tag stuff from the past. Stillmovingdesign mentioned CSS classes, so thought maybe some would be interesting. Dictator CMS (the one before PW) used tags like this for images, except that each image could be assigned a tag directly in the editor. Then you would type the tag (like "image" for example) in any text field like this:

{image}

If multiple images had the same tag, it would display all of them. Any image could have multiple tags too.

If you wanted to assign a CSS, class, you'd do it like this:

{image}.class

So you could create a CSS class like "left" and "right", and display an image like this

{image}.left

If you wanted to grab an image from another page, you'd do this:

{/some/other/page:image}

You could actually do the above with any field. So if you wanted to display the 'body' field from some other page, you could use this tag:

{/some/other/page:body}

While I'm less keen on tags nowadays, I actually kind of miss enabling an editor to use tags like this in their text fields. So am glad to see Diogo's module as a step in that direction. If people like being able to do this, we could always bring back some of the older tag options like above.

[Marty Walker]

Hey diogo,

Are there any plans to allow multiple images ("{images:1,2,3,4,5} or even {images:1-5}") as you mentioned in this new thread? I don't think Adam Kiss has gotten around to rounding off his alternative module. And are there any plans to allow a template for the image html in the module settings rather than having to mod the module?

[diogo]

I want to do it, but still didn't think seriously about it, so I don't have any idea of how much time it would take and when I can dedicate to it.

[diogo]

I just realized that there is a problem with the module. If you echo a field that has this textformatter from another page, it will look for the images field on that other page.

echo $pages->get(123)->imagetagsfield;

This is so obvious, but didn't even cross my mind... problem is, textformatter modules receive a simple string to work upon, so they are not aware of what page it comes from, and this module uses "$this->page" to look for the field, so, the page from where it is called, and not the page where it is from.

Ideas are welcome

Edit: I found an immediate solution, but only for Processwire's DEV version. It's not the ideal for sure, so I'm still wanting ideas:

Create a new php file (name it .php or .inc, or whatever you want. I named mine imagetags.php and put it inside a "renders" folder) and put this code on it:

<?php echo $page->imagetagsfield;

On the template do this instead of the first code from the post:

echo $pages->get(1001)->render('renders/imagetags.php');
 

[diogo]

One other immediate solution is to use Ryan's Hanna Code.

I adapted the module to Hanna code, and it seems to be working pretty well, although the tags are a bit different:

{fieldname:2} and [[images f="fieldname" n=2]]

It looks a bit more complicated at first, but it's not really. Here is a resumed explanation:

defaults:

[[images p="0" f="0" n="0"]]

where p is the page number, f is the field name and n is the image position on that field.

The above is equivalent to simply:

[[images]]

And it will get all the images from the first field of the "image" type on the same page of this Hanna Code field. Because:

if $p="0"; // $p will hold the $page object
if $f="0"; // $f will hold the first images field found on $p
if $n="0"; // $n will echo all the images from $f

From here you can have any combination:

[[images n="4"]] // echoes the image on the forth position of the first image field of this page

[[images p="1" f="myimages"]] // echoes all the images of the field "myimages" in the homepage

That's it. Here is the string to import this Hanna Code:

!HannaCode:images:eyJuYW1lIjoiaW1hZ2VzIiwidHlwZSI6IjIiLCJjb2RlIjoiXC8qaGNfYXR0clxucD1cIjBcIlxuZj1cIjBcIlxubj1cIjBcIlxuaGNfYXR0cipcL1xuJG15UGFnZSA9ICRwID8gJHBhZ2VzLT5nZXQoJHApIDogJHBhZ2U7XHJcbiRmaWVsZE5hbWUgPSAkbXlQYWdlLT5maWVsZHMtPmdldCgndHlwZT1GaWVsZHR5cGVJbWFnZScpO1xyXG4kbXlGaWVsZCA9ICRmID8gJG15UGFnZS0+JGYgOiAkbXlQYWdlLT4kZmllbGROYW1lO1xyXG5cclxuJGluZGV4ID0gJG4tMTtcclxuXHJcbmlmKCRteUZpZWxkIGluc3RhbmNlb2YgUGFnZWltYWdlcyl7XHJcbiAgICBpZigkbil7XHJcbiAgICAgICAgJGltYWdlID0gJG15RmllbGQtPmVxKCRpbmRleCk7XHJcbiAgICAgICAgJGltYWdlID0gXCI8aW1nIGNsYXNzPSdJbWFnZVRhZ3MnIHNyYz0nJGltYWdlLT51cmwnIGFsdD0nJGltYWdlLT5kZXNjcmlwdGlvbic+XCI7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAgICRpbWFnZSA9IFwiXCI7XHJcbiAgICAgICAgZm9yZWFjaCgkbXlGaWVsZCBhcyAkaW1nKXtcclxuICAgICAgICAgICAgJGltYWdlIC49IFwiPGltZyBjbGFzcz0nSW1hZ2VUYWdzJyBzcmM9JyRpbWctPnVybCcgYWx0PSckaW1nLT5kZXNjcmlwdGlvbic+XCI7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG4gICAgXHJcbn0gZWxzZSBpZigkbXlGaWVsZCBpbnN0YW5jZW9mIFBhZ2VpbWFnZSl7XHJcbiAgICAkaW1hZ2UgPSBcIjxpbWcgY2xhc3M9J0ltYWdlVGFncycgc3JjPSckZmllbGQtPnVybCcgYWx0PSckZmllbGQtPmRlc2NyaXB0aW9uJz5cIjtcclxufSBlbHNlIHtcclxuICAgICRpbWFnZSA9IFwiXCI7XHJcbn1cclxuXHJcbmVjaG8gJGltYWdlOyJ9/!HannaCode

[Martijn Geerts]

Hanacode is cool, I used it in combination of tags. (image tags)

[[images tags="cars bikes  boats"]]

Now you could render albums instead of images when there are more then 6 photo's groups or something.

There are two annoying things about HannaCode

01. after save it returns to the list of hana codes. 

02. I can't use tabs.

---

ps, Maybe we need a repository of good Hanna Codes.

[Pete]

I was just searching for this solution, started reading the thread and though "I hope I scroll down and it's been released as Hanna Code

Good job guys!

My only thought is that since the images field is installed by default it might be nice to skip the field name and have it check for a field called "images". Could go one further and, if fieldname is omitted, check for the first field that supports multiple images, but I'm getting a bit fancy there!

[Pete]

EDIT: Oh, I see you already covered that

[diogo]

[kixe]

I am not the best friend of tags which are translated later in html, that is one reason I stay with processwire.

Do you remember?

{{contao::*}}
<TYPO3></TYPO3>
<jdoc:include joomla! />

Thats why I don't like hannacode or something similar.
Except with images I would like to have option to give customers simple tags to put images in a textfield.
Diogos Module seemed to be a good and simple way to put an image in a textarea in PW-Surrounding. Thanks
I customized it for my use and want to share it.

It works in PW 2.4. Didn't tested it with other Versions.

Syntax

• includes an image-tag in the Textfield by using [[fieldname(optional),number(optional),class(optional)]]
• if using this module Names of Imagefields shouldn't start with a number
• If a class (CSS) is added Fieldname and/or Number and/or leading Comma is mandatory
•  Comma is mandatory from two Parameters and up

Look at the Examples for easy understanding.

Examples

• [[]]   matches the first or only one picture in the first or only one image-field if exists
• [[images]]   matches the first or only one picture in the named image-field
• [[4]]   matches the fourth picture in the first or only one image-field
• [[3,left]]   matches the third picture in the first or only one image-field and adds the class left
• [[,right]]   matches the first or only one picture in the first or only one image-field and adds the class left
• [[images,3,top]]   matches the third picture in the image-field named 'images' and adds the class top

I replaced the single curled brackets with double square brackets to keep brackets usable.
In contrast to Diogos Module here it's not possible to set more than one image within one tag. (never needed a list of images in a textarea)
Adding an optional class was important for me.
I am thinking about integration of resizing.

FEEL FREE TO USE IT!

EDIT: 06/09/15 updated configurable version go here

Edited September 15, 2015 by kixe

[purwa]

@kixe

I'm trying to use your version with Ace Editor but can't get it to work, do I need to uninstall the original module first? 

[Can]

@purwa do you added the textformatter to your textfield?

http://wiki.processwire.com/index.php/Text_Formatters#Adding_text_formatters_to_fields

if you'd done this already maybe another formatter disturbs it, then try rearranging them

[kixe]

Since there are existing many other methods to add images (Markdown, Diogos  Textformatter-image-field-markup , CK Editor ...) I am still using this module.

I updated my customized version, which is available here. I made the module configurable to define a markup wrapper and/or basic CSS classe/s

@Diogo I didn't put it in the modules directory until now. What do you think about merging our stuff?

TextformatterImageTags.zip

[diogo]

Hi kixe, thanks for working on this and for asking. Would be much better to merge than to create a new module with similar goal. Can you please wait that I give a test first? I'm hoping I can do it a bit later today.

[diogo]

Ok, you did more changes than only those two. I noticed that you changed from { to [[ and seems to me that you removed the ability to output all the images from the field. I also had trouble to output the images even after I changed the call to [[ and can't seem to figure out why.

I guess I would need more time to test the module before merging and won't have much time during this week. Would you prefer to wait or release the module on your own? Any is fine for me

[kixe]

To prevent an overflow    in the modules directory I will not release it there. If somebody is interested in the module it can be downloaded from this thread. I made the changes to double brackets, because it happens sometimes that I use single brackets in the text, but never double. And I found that square brackets are looking more like an image frame.
Have a look in the readme the syntax in my module is slightly different too.

[kixe]

After running in problems I made some changes in my derivation and I would recommend to do it in yours too. Function format() is deprecated and should be replaced by formatValue(). Especially since TextformatterImageTags uses values from another field of the same page this is very useful. Look at the following example

Example:
A field using the textformatter are called by the parent page. Assuming you want to get the images of the child and not the parent, textformatter needs to know which page is meant.

//  template
$imagetags = $modules->get('TextformatterImageTags');

foreach ($page->children as $child)  {
  $value = $child->textfield;
  $imagetags->formatValue($child,$fields->get('name=textfield'),$value);
  // ... other stuff
}