Insert image in text without TinyMCE

[joe_g]

Hello!

I'm here from Symphony CMS. I'm just about to try this CMS out for a smaller project. Looking forward!

I have one basic question. I'd like to avoid wysiwyg (TinyMCE) as it offers too many options (especially the possibility to resize the images). I'd rather have the client insert images with some kind of tag. Like "{image_22}" or something, for more precise control.

Would this be possible with processwire, what would be the best way to get about?

In symphony I would make a composite type with the help of 'subsection manager' that contains the image and an ID, that can be dragged into a place in the text

thanks!

J

[AnotherAndrew]

Joe, I was having a similar issue and this is how I was able to solve it. Read this discussion.

[diogo]

I built a function that does exactly what you asked for, it recognizes the format {image_1}, {image_2}, {image_22}, etc:

function imageTags($p, $field){
  $string = $p->$field;
  preg_match_all("/{image_[0-9]*}/", $string, $array);
  foreach($array[0] as $match){
 $number = preg_replace("/[^0-9]/", '', $match);
 $index  = $number-1;
 $image  = $p->images->eq($index);
 $image  = "<img src='$image->url' alt='$image->description'>";
 $string = str_replace($match, $image, $string);
  }
  return $string;
}
echo imageTags($page,'body');
// first parameter is the page object, second parameter is the field name.
// you can also do this: echo imageTags($pages->get(123),'summary')

edit: did some cleaning on the code.

if you want another format for tags, {img:22} for instance, just change the regex on the 3rd line from "/{image_[0-9]*}/" to "/{img:[0-9]*}/".

[joe_g]

fantastic!

thanks

J

[diogo]

You're welcome! And by the way, I also came from Symphony and I think you will like to work with PW because they share a lot of good things.

[ryan]

I built a function that does exactly what you asked for, it recognizes this format {image_1}, {image_2}, {image_22}, etc:

Well done. This could make a nice Textformatter module too.

[diogo]

Well done. This could make a nice Textformatter module too.

Maybe this would be a good opportunity to get my hands dirty with module making

[diogo]

It didn't take long

here is an alpha version of the module. I will open a new thread for it as soon as you guys tell me that it's well built.

For now it uses the format {img:n}, but would be nice to have this as a module option.

edit: I used the Textile formatter module as a working base.

------------------------------

edit2: Updated the module to version 0.2

The first version was assuming that the image field was called "images". This new version takes the first part of the provided tag between the opening bracket and the colon, checks if there is any field with the same name, and uses that field to look for the image in the provided position. This way, you can have different image fields feeding the same text area. So, now the format to use for tags is {ImageFieldName:22}

Besides checking for the existence of the field, I also want to check if it is a "Image" fieldType, but this code is not working for me:

if($this->page->$field->type == "Image")

edit3: I opened a new thread for this module. It can be downloaded from there: http://processwire.c...ule-image-tags/

Edited April 11, 2012 by diogo

[ryan]

Looking good Diogo!

The way to identify if something is an image is like this:

$image = $page->get("image_field_name"); 
if($image instanceof Pageimages) {
   // WireArray of multiple images
} else if($image instanceof Pageimage) {
   // a single Image 
} 

[diogo]

Thanks Ryan, I will apply that