What's the most elegant way to replace a copy image?

[alan]

I have an image field with setting 'Maximum files allowed' set to 1 (in case that's relevant).

I drop an image in it and save and then use that image in a textarea field when editing copy (with TinyMCE if relevant).

But is there a neat way to replace such an image for a new version?

Right now I am dropping in a new image and saving except then the textarea shows a placeholder space not the image which makes sense as the original is gone but if I select the placeholder and click the image icon in the TinyMCE toolbar then I get an error (saying the image is gone) rather than an opportunity to choose the new version.

I know I can delete the image placeholder in the copy and add the new one but then I loose stuff like any alignment or size settings.

Anyone know if there is a neater way to perform the replacement of images?

[ryan]

At present I don't think there's a better way since those images are hard-coded in TinyMCE's output and the filename essentially changes when you upload a new one. But one way we might accommodate it is to provide a new setting with the images field that lets you enforce a specific filename… perhaps [field-name]-n[index].[ext]. That way if you replaced an image, the new filename would be the same as the old (so long as you didn't go from JPG to PNG or something). No doubt might cause some unexpected browser cache issues, but most solutions have compromises of some sort or another. This could be a worthwhile option to provide.

[alan]

I like that idea. My inspiration was an aspect of Textpattern where images may be centrally stored and then referenced by an ID when used. That allowed the actual image to be replaced without updating the ID and so allowed for easy image replacement.

I think your idea sounds ideal.

Re: the cache issue, perhaps the solution could be that use of this setting for an image field would henceforth cause the value returned as the src URL for the field to be the URL but with a query string appended. There is some debate over there as to the string to append; it seems to me to make sense that something like a unix timestamp for when the field's content was changed would be ideal, then it would (I think) force most browsers to re-get the image only when it's actually changed.

[Joss]

Hi Ryan

I like the option of being able to decide to replace an existing image (when uploading) or rename. You could also make that a switch in the image field settings - overwrite automatically or ask for confirmation.

I generally find the caching issue is okay as long as you do it in the morning, go out for a really long lunch and play a round of golf or something. When you come back it is fine!

Of course, the incredibly complicated (and ultimate) way of doing this is with short codes. In this case, the image would be saved with a database reference that includes things like size. The shortcode in TinyMCE would be interpreted appropriately on the fly (you would need a custom plugin for TinyMCE I would guess).

You would then be able to change the actual image that the database refers to without changing the entry in the TinyMCE field since it is pulling the information live.

The bad side of this is that it is incredibly complicated and makes a mess of everything.

The up side is that you can store a large amount of content with the image (including any metadata), keep track of usage, originating source, licensing, user who uploaded it and the rest.

Okay, probably only useful on a big news site .... stick to just overwriting the file.

Joss

[Soma]

Don't use images in text wysiwag. Seriously.

I think u can avoid a lot of issues. Think if you replace img with a different size and ratio. I stoped doing it and use other ways a long time ago. You just give away control, and editors start to think they need to do design. All websites we done with free images in text are horrible after 1 month in hand of a client and lots of maintenance needed.

Use repeater to make blocks with images and a option to align or size. Or intext tags where to put image. Theres even a module. And your back in control. And other nice effect.

[alan]

@Joss I like the idea of playing golf to cure the cache thing But actually that stackexchange solution looks like it would neatly solve this problem.

@soma

Theres even a module

do you mean this module? http://modules.processwire.com/modules/textformatter-image-tags/ If so then that looks interesting but can it be used to allow alignment and size changes in the same easy/visual way as if I insert an image in-line? I hear what you are saying about clients making pages look bad though. I suppose a lot comes down to who edits the content.

But ruling out adding images in a textarea feels to me a little like too draconian a solution. For me coming from a CMS where there was NO visual representation of how copy looked until it was saved and viewed on the front end I find my ability to see copy roughly as it will be when rendered very helpful indeed.

Perhaps if an field image could have designer-controlled limits as to the width it would allow images to be rendered and maybe defaulted to align_right(?) etc then that could help non-technical copy editors avoid a majority of simple design-hurting mistakes while not loosing the real benefits already noted?