When an HTML editor is used and images are added from the local computer, they are uploaded to a server and a link is obtained to put it in the image src attribute. What happens when the img element is removed from the editor? How would the image be deleted from the server? In this case I understand that the image deletion event could be detected and then call a service to delete it. But what happens if the user adds a new image and leaves the page? How would it be deleted in these cases?
In both cases, if the deletion of the images is not managed, it could happen that the server is filled with unused images. How do you usually solve this problem? How is the proper way to solve this?
That's a nice question there. And yeah, for sure the server would fill up with unused images in some point. I'm not an expert on this but I'll try to suggest something so I can implement it too in my WYSIWYG editor haha. I suppose you have a custom modal for the insertion of the image. Upon clicking the button you could save the image link to an array and at SAVE || on leaving the document edit || on popstate event you could make a regex that checks the innerHTML of the editor for the specific SRC. If is not found then you could push an ajax request with the image name so you can deleteit. For sure there are more efficient and complex ways to achieve that. Such as creating text ranges and track elements on keydown - Backspace(8) / Deletekey(46).
An other way is that you could track the images that are in use. When the document is saved regex out the images in the document, push them to a db table and periodically make a check from the back end so you can delete those that are not in use.
I don't know if my suggestions are helpful or not. I just saw an interesting subject so I jumped in. Cheers mate.
Related
I've got a script that finds all matching bits of text and puts them in a content control. I noticed there was a functionality to remove the content control if the text was edited ContentControl.removeWhenEdited = true. Is there a way to run this same trigger/event of when the text content changes, but instead of removing the content control trigger some custom code instead?
I figured since there's already functionality to trigger on the exact event I need, it surely can't be too complicated. I tried ContentControl.onDataChanged = MyFunction() but this only ran the function when the content control was added and couldn't rerun it when the data was infact changed.
Any and all help greatly appreciated!
In the SAPUI5 control explorer in the busy dialog section there is mention of a sap.m.sample.BusyDialogLight.C control. Essentially this is an unframed dialog with the busy indicator 3-blue blobs image over it. I intend to use this whilst long JSON fetches are running.
My version of OpenUI5 which is v1.40.10 does not have a file or folder with that name in the sap.m.* folders. It only has sap.m.BusyDialog.js which I read (dbg version) and see no obvious mention of a light model.
So can anyone tell me if there is actually a BusyDialogLight control and how to define it?
This is just the controller which handles the view. The name used there is the same as in the view's controllerName attribute. And light is in this context just the BusyDialog without text and buttons.
I'm trying to create a MailChimp template where an image is editable using mc:edit
Here's the code:
<img class="flexibleImage" mc:edit="top_image">
This seems all good, but once I edit this image using the MailChimp editor, I lose the original class "flexibleImage" and all other class and style info related to that img element.
How can I create a template with an editable image and maintain (or add) that class?
For anyone else with the problme, this answer is based on a response from MailChimp support:
It looks like it isn't possible to keep a custom class attached to an
editable image. What you could do instead though is apply the class
to the image's containing element. So if the image is in a <div>, add
flexibleImage to the div, and then update your CSS rules to point to
.flexibleImage>img.
This happens because the image you want to edit is inside an mc:repeatable block that in turn is inside another mc:repeatable block
Even four years later this is still an issue.
The other route is to put mc:edit on the parent container, and have images managed through there, but you lose the Image uploader box, which is poor user experience.
You can go into Settings when you have uploaded a new image and put the sizes in there. Not ideal, but Mailchimp is to blame here (no such issue on Campaign Monitor templates).
First of all drag and drop works correctly in my stages in version 4.3.0, so I just want to understand why I get the following problem with 4.3.3.
I have three stages. One sits in a container in a document in an iframe. The others sit in containers in the iframe's parent document, one displaying a complex layout of shapes and the other a single simple shape for testing. The document in the iframe which controls all the action has a viewfinder overlay that drags and drops correctly. However the shapes in the layout and test stages do not release on mouseup.
Any idea about what's going on would be appreciated ... I like to try and keep up to date.
Well, since I can't see any of your code I can only help so much, try doing the following.
For each shape that you have, add this attribute:
dragOnTop: false
example:
Kinetic.Rect({
fill: 'blue',
dragOnTop: false
});
Let me explain how I found an answer by first amending the structure. There is a holding file which contains shared files and two iframes - one for a machine-like index and one for a display each with its own scripts. The main shared file is nameset.json which lists all the objects and their key/value couplets. These are sent to 'fill out' the machine and display frameworks. I thought I could do the same with the Kinetic Global object, referring to the Global.stages array. It seems obvious now that each of the iframes needs its own Kinetic link (rather than pointer) and these need to be used to marry machine/display interactions like the map shown here. Anyway all the dragging and dropping works smoothly as promoted. Thanks for that!
Will mark as answered but if anyone has any comments would be pleased to read them.
There's a module to do this in Drupal land, but I've been frustrated with the hacks that've been necessary in Wygwam. What is the best way to go about implementing this in such a way that you don't need to totally override the default image handling in ChannelImages/Wygwam?
Assets is a good suggestion, but I believe Devdemon's channel images might be a better fit for the workflow you're suggesting.
http://www.devdemon.com/channel_images/
Clients can add (and see) a caption and more and it's fully integrated with Wygwam and other editors. Devdemon's support is also excellent.
The Assets module from Pixel & Tonic allows you to double-click on the image (or any other file) and add metadata. You then have access to the metadata in your templates.
Check the screenshot: http://pixelandtonic.com/assets
You can also add metadata using the native File Manager. Click the edit icon from the File Manager and you'll see a few fields. You can use the File Entries tag to access it.
http://expressionengine.com/user_guide/modules/file/file_tag.html
I typically use Matrix with one column for the image, one column for the caption, and if a link is needed another column for the link. This of course works best if the image is in a fixed location within your template.
On possible way to accomplish this that I have used is to run some jQuery that looks for images within a certain area, and if they have alt attributes, rewrite the image tag within a tag with a tag inside.
so:
jQuery(document).ready(function() {
$('#page-content > .wrapper img').each(function(){
if($(this).attr('alt') !== undefined && $(this).attr('alt').length > 0){
if(!$(this).parent().hasClass('content-image')){
$(this).replaceWith("<figure class='content-image "+$(this).attr('class')+"'>"+$($('<div></div>').html($(this).clone().attr('class',''))).html()+"<figcaption>"+$(this).attr('alt')+"</figcaption></figure>");
}
}
});
});
will do just that. It's looking within a #page-content div for img tags with alt attributes. And then rewriting it as
<figure><img src='....' .... /><figcaption>This is the text that was in the alt attribute</figcaption></figure>
Soooo, that kinda works. The only caveat is that you had better not use any double-quotes within your alt text, or it will break thangs. Not the cleanest of solutions, but a solution, nonetheless.