Jump to content


Photo

Insert image in text without TinyMCE

image placement

  • Please log in to reply
9 replies to this topic

#1 joe_g

joe_g

    Jr. Member

  • Members
  • PipPip
  • 40 posts
  • 4

Posted 08 April 2012 - 06:45 AM

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

#2 AnotherAndrew

AnotherAndrew

    Sr. Member

  • Members
  • PipPipPipPip
  • 163 posts
  • 24

Posted 08 April 2012 - 07:48 PM

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

#3 diogo

diogo

    Hero Member

  • Moderators
  • 2,015 posts
  • 1098

  • LocationPorto, Portugal

Posted 09 April 2012 - 07:40 AM

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]*}/".

#4 joe_g

joe_g

    Jr. Member

  • Members
  • PipPip
  • 40 posts
  • 4

Posted 09 April 2012 - 11:42 AM

fantastic!
thanks
J

#5 diogo

diogo

    Hero Member

  • Moderators
  • 2,015 posts
  • 1098

  • LocationPorto, Portugal

Posted 09 April 2012 - 11:50 AM

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.

#6 ryan

ryan

    Hero Member

  • Administrators
  • 5,812 posts
  • 3141

  • LocationAtlanta, GA

Posted 09 April 2012 - 02:10 PM

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.

#7 diogo

diogo

    Hero Member

  • Moderators
  • 2,015 posts
  • 1098

  • LocationPorto, Portugal

Posted 09 April 2012 - 02:14 PM

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 :)

#8 diogo

diogo

    Hero Member

  • Moderators
  • 2,015 posts
  • 1098

  • LocationPorto, Portugal

Posted 09 April 2012 - 03:59 PM

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 by diogo, 10 April 2012 - 07:53 PM.


#9 ryan

ryan

    Hero Member

  • Administrators
  • 5,812 posts
  • 3141

  • LocationAtlanta, GA

Posted 10 April 2012 - 10:04 AM

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 
} 


#10 diogo

diogo

    Hero Member

  • Moderators
  • 2,015 posts
  • 1098

  • LocationPorto, Portugal

Posted 10 April 2012 - 01:25 PM

Thanks Ryan, I will apply that




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users