{"action":"created","issue":{"url":"https://api.github.com/repos/silverstripe/silverstripe-framework/issues/4337","labels_url":"https://api.github.com/repos/silverstripe/silverstripe-framework/issues/4337/labels{/name}","comments_url":"https://api.github.com/repos/silverstripe/silverstripe-framework/issues/4337/comments","events_url":"https://api.github.com/repos/silverstripe/silverstripe-framework/issues/4337/events","html_url":"https://github.com/silverstripe/silverstripe-framework/issues/4337","id":90221107,"number":4337,"title":"Shortcodes for Image references in HTMLText fields","user":{"login":"jonom","id":1079425,"avatar_url":"https://avatars.githubusercontent.com/u/1079425?v=3","gravatar_id":"","url":"https://api.github.com/users/jonom","html_url":"https://github.com/jonom","followers_url":"https://api.github.com/users/jonom/followers","following_url":"https://api.github.com/users/jonom/following{/other_user}","gists_url":"https://api.github.com/users/jonom/gists{/gist_id}","starred_url":"https://api.github.com/users/jonom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonom/subscriptions","organizations_url":"https://api.github.com/users/jonom/orgs","repos_url":"https://api.github.com/users/jonom/repos","events_url":"https://api.github.com/users/jonom/events{/privacy}","received_events_url":"https://api.github.com/users/jonom/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-06-22T21:47:09Z","updated_at":"2015-07-29T16:32:55Z","closed_at":null,"body":"Carrying on from a discussion at https://github.com/silverstripe/silverstripe-framework/pull/4328#issuecomment-114239415, there seems to be a long term issue with the CMS where images inserted in to a `HTMLText` field via `HTMLEditorField` are not properly linked back to the image object.\r\n\r\nWhen a HTMText field is saved, any resampled images are generated as necessary and a fully translated URL is used to reference the resampled or original image. This causes a couple of problems:\r\n\r\n* If the referenced resampled image is deleted from the filesystem (e.g. using `Image::deleteFormattedImages()`) any links to that image from SiteTree or other objects will be broken until the object containing the link is re-saved, which triggers re-generation of the image.\r\n* If the original Image is renamed in the CMS, any references to that image from a HTMLText field will no longer be able to find the original image so will not be able to be resized or regenerated anymore.\r\n\r\nThink a good solution would be to make `img` tags in HTMLText use ShortCodes, just like internal hyperlinks do. This way they will be evaluated whenever the content is displayed and the images can be regenerated if necessary, and since the image will be referenced by ID it won't matter if the image is renamed. This should also protect against any future changes to filename output for generated images."},"comment":{"url":"https://api.github.com/repos/silverstripe/silverstripe-framework/issues/comments/126009280","html_url":"https://github.com/silverstripe/silverstripe-framework/issues/4337#issuecomment-126009280","issue_url":"https://api.github.com/repos/silverstripe/silverstripe-framework/issues/4337","id":126009280,"user":{"login":"jonom","id":1079425,"avatar_url":"https://avatars.githubusercontent.com/u/1079425?v=3","gravatar_id":"","url":"https://api.github.com/users/jonom","html_url":"https://github.com/jonom","followers_url":"https://api.github.com/users/jonom/followers","following_url":"https://api.github.com/users/jonom/following{/other_user}","gists_url":"https://api.github.com/users/jonom/gists{/gist_id}","starred_url":"https://api.github.com/users/jonom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonom/subscriptions","organizations_url":"https://api.github.com/users/jonom/orgs","repos_url":"https://api.github.com/users/jonom/repos","events_url":"https://api.github.com/users/jonom/events{/privacy}","received_events_url":"https://api.github.com/users/jonom/received_events","type":"User","site_admin":false},"created_at":"2015-07-29T16:32:55Z","updated_at":"2015-07-29T16:32:55Z","body":"Sweet module Shea! That would definitely be handy to look at as a starting point.\r\n\r\n@kinglozzer you're right - I just had a skim through the Asset Abstraction RFC and it does indicate that images would need to start using shortcodes as part of that change. So I guess this issue could be closed or maybe it's good to have a place to discuss this specific issue?\r\n\r\nFor a generic way to present shortcodes (including Images) in HTMLEditorField, would something like this be possible:\r\n\r\n1. When loaded in to the CMS, `HTMLText` content is parsed and any shortcodes rendered as they would be in templates, with the difference that each shortcode has an additional `div` or `span` wrapped around it as appropriate, with a `shortcode` css-class and all shortcode properties attached as `data` attributes.\\*\r\n2. Content in these wrappers can be presented a bit differently to distinguish them as shortcodes - perhaps with a border and/or translucent coloured overlay indicating they can't be directly edited like the surrounding wysiwyg content, but clicking the content opens a modal editing form\r\n3. After editing the shortcode attributes and submitting the modal form, perform an ajax request to re-render the edited shortcode content and update it within the wysiwyg content\r\n4. Before saving the content, parse it again and turn any `.shortcode` divs or spans back in to shortcodes\r\n\r\n**\\*Example:**\r\n```\r\n[image, id=1, alignment=left, width=120, height=106, alt='The SilverStripe Logo', caption='This is an image caption']\r\n```\r\nbecomes\r\n```html\r\n<div class=\"shortcode\" data-image-id=\"1\" data-alignment=\"left\" data-width=\"120\" data-height=\"106\" data-alt=\"The SilverStripe Logo\" data-caption=\"This is an image caption\">\r\n\t<div class=\"captionImage left\" style=\"width: 120px;\">\r\n\t\t<img class=\"left\" title=\"\" src=\"assets/Uploads/_resampled/ResizedImage120106-SilverStripeLogo.png\" alt=\"The SilverStripe Logo\" width=\"120\" height=\"106\">\r\n\t\t<p class=\"caption\">This is an image caption</p>\r\n\t</div>\r\n</div>\r\n```"}}