Can't insert image in TinyMCE

[AnotherAndrew]

I am using a file field to allow users to upload documents and images to link to in a textarea field that I have called documents. I can link to the documents, such as a pdf file, but not to an image file that has been uploaded.

When I select an image from the tinymce editor, the image file does not appear. I have an image field that I can see those images but not the ones that were uploaded to the document field. And yes, I have allowed jpgs, etc. to be uploaded to the document field.

I don't want to upload images to the image field since I am using this field for sidebar images.

Is this a bug, am I being dumb, or is there some other way to do this?

[apeisa]

I have always assumed that as an intended behaviour. Best option in your case would probably be something like adding new image field and calling it content_images.

[ryan]

When I select an image from the tinymce editor, the image file does not appear. I have an image field that I can see those images but not the ones that were uploaded to the document field. And yes, I have allowed jpgs, etc. to be uploaded to the document field.

You should be able to link to any file whether an image or not. Are you saying that you can't link to it? Or are you saying that you want to display the image itself (rather than a link to it)? If you are using the TinyMCE image insert function, it's only going to allow you to select images from a field of type 'Image', and not from a field of type 'File'. If I've understood your need correctly, I agree with Apeisa that adding another image field is the way to go.

[AnotherAndrew]

it's only going to allow you to select images from a field of type 'Image', and not from a field of type 'File'

OK, thanks, that is what I am hung up on. I will have to create another image field as suggested.

[AnotherAndrew]

O but wait!

How can I get the description text to appear?

I can put this in my template, but I want this to show in my "body" field. And I want it to be exactly where it was placed in the body field.

			foreach($page->body_images as $image) {
				$thumb = $image;
				echo "<ul>";
				echo "<li>";
				echo "<img src='{$thumb->url}' alt='{$thumb->description}' />";
				echo "<p>$thumb->description</p>";
				echo "</li>";
			};

[ryan]

If I understand correctly, you want the code snippet you pasted to appear at some place in your bodycopy that you designated. This is something that I do regularly with both images and fields. I tell the client to type either the word "images" or "files" in it's own paragraph with nothing else, and then all of their files or images will appear there in the right order with description, etc.. Here's the code I use to do it:

<?php

function bodytext($text, $page) {

        if(strpos($text, '<p>files</p>') !== false) {
                $out = '';
                foreach($page->files as $file) {
                        $out .= "<p><a class='file file_{$file->ext}' href='{$file->url}'>{$file->description}</a></p>";
                }
                $text = str_replace('<p>files</p>', $out, $text); 
        }

        if(strpos($text, '<p>images</p>') !== false) {
                $out = '';
                foreach($page->images as $image) {
                        // make the image small enough to fit bodycopy column, if it's too big
                        if($image->width > 500) $image = $image->width(500);
                        $out .= "<p><img src='{$image->url}' alt='{$image->description}' /><br />{$image->description}</p>";
                }
                $text = str_replace('<p>images</p>', $out, $text); 
        }

        return $text;
}

?>

<!-- later on in your code when you output the bodycopy -->

<div id='bodycopy'>
    <?php echo bodytext($page->body, $page); ?>
</div>

I've done this on a couple sites now, and am thinking I should just make it a Textformatter plugin or something.

[AnotherAndrew]

Ryan, that is exactly what I was looking for. Thank you. And yes I think this would be very useful for others!

[AnotherAndrew]

Ryan, there has to be an easier way.

Ok, so I created a body content image field, and when I use the tinymce editor, I call the image and it is placed in the appropriate field.

BUT, I want a user to be able to click on the image to link to either another page, file, or in this case to load a video.

AND, from a user standpoint it might seem a little confusing to have to type in "images" in the text editor to place an image. I think that a user would want to see that image immediately in the editor than rely on blind faith that it would appear.

[ryan]

BUT, I want a user to be able to click on the image to link to either another page, file, or in this case to load a video.

AND, from a user standpoint it might seem a little confusing to have to type in "images" in the text editor to place an image. I think that a user would want to see that image immediately in the editor than rely on blind faith that it would appear.

The typing of "images" in a <p> was just an example of using a little template file code to automate some specific runtime output. It's not a standard or even a recommendation, just a little code snippet I found handy in a couple cases.

Unless I've misunderstood, now you are asking for exactly what the built-in functionality does– Click on the photo icon in TinyMCE and add a photo. If you then want to link it to something, then click on the photo to highlight it and then click on the link icon to select what you want it to link to.

[joe_g]

Hello, I'm new to processwire. I was wondering if there is a way to do the above, but to reference a specific image with some kind of id?

From this

thanks for any eventual input,

j

[ryan]

I liked Diogo's reply on the other thread. I do plan to add the option for the MarkItUp editor back in ProcessWire, and this will enable the click-selection of images and placement in the copy by way of tagged filenames.

[diogo]

I do plan to add the option for the MarkItUp editor back in ProcessWire

That would be great! Don't forget to make it work for textile besides markdown

[ryan]

Of course, I'll make it work for Textile before Markdown.