Jump to content

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

Recommended Posts

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?

  • Like 1

Share this post

Link to post
Share on other sites

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.

  • Like 2

Share this post

Link to post
Share on other sites

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.

  • Like 1

Share this post

Link to post
Share on other sites

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.


Share this post

Link to post
Share on other sites

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.

  • Like 5

Share this post

Link to post
Share on other sites

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


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?

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Roberts R
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
    • By Mithlesh
      Changing it to null
    • By Mithlesh
      Hi, I have one URL - writerrelocations.com/contact-now/

      I have one issue where my header Image is appearing again after the contact form, for your reference:

      I have checked my processwire template section where have not added any Image field besides Header Image, attaching the same for the reference:

      PLEASE help me to get rid of the image below contact form

      Waiting for the swift response!

    • By tonicastillo
      Hi. Can I ask why this happens?
      When I upload a jpg, the meta keywords and description of the file loses the accents and spanish symbols of the words.
      Original image on the left, and the image generated by PW on resize on the right.

      This happens on resize. The uploaded file is ok.
      How can I control which meta keep in the photo?
      Thanks a lot (and sorry for my English)...
  • Create New...