10 replies to this topic

[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/o...go/PW-ImageTags

Edited by diogo, 27 July 2012 - 06:16 AM.

[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.

[adamkiss]

Oh my god! Great minds thinking alike indeed. Please read this: http://processwire.c...ld-tags-module/

[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.