image facilities in tinycme

Hi Daniel,

thanks for that, I have added the tool but it still doesn't provide the facility to add padding to the image to prevent text butting right up to the edge of the image.  Could you advise how we achieve this facility?  I would have thought would be a pretty basic requirement when adding an image so I must be missing something obvious here.

Thanks again

Steve

Hi Steve,

If you want to add padding to an inline image in the editor, a good option for you to look at is the style selector that can be configured for TinyMCE. This can let you apply custom classes or styles to specific elements - such as images. Dave wrote up some instructions on how to enable this here: https://www.interactivetools.com/forum/forum-posts.php?postNum=2242695#post2242695

Let me know if that works for you!

Thanks,

Hi Daniel,

In theory that will be a way to solve the spacing issue however I also need images to be responsive, using bootstrap I can manually add code class="img-responsive" which solves that issue but I cannot expect clients to edit the code and enter this.  I have tried various ways to add this code into the wysiwyg_custom.php code below but it just breaks the file and the toolbar doesnt load.  Is there any way to have class="image-responsive automatically applied to any/all images.

{ title: 'Image Left',    selector: 'img', styles: {'float': 'left','margin': '0 10px 0 10px'} },

Given that websites these days have to be responsive and that bootstrap is so widely used in website design I am sure there must be a simple solution to this

Thanks again for your help.

Steve

Hi willydoit,

If you want to make all images on a site responsive, I think the easiest option would be to add custom CSS to do so. Something like this should work, added to a custom CSS file that appears on all pages (after the Bootstrap CSS):

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

Note that this will apply to all images, and so may need to be overridden for some design elements if that's not the desired behaviour.

As for the custom style, I'm a little less sure about why that would be breaking the toolbar. I was able to get it to work using the following block:

style_formats: [
  { title: 'Image Left',    selector: 'img', styles: {'float': 'left','margin': '0 10px 0 10px'} },
],

Let me know if you're able to make any progress, or if I can help with anything else!

Thanks,

Hi Daniel,

The code I provided works fine, it broke when i tried to add the class= "img-responsive" to it which is a built in element in bootstrap. I will try the css you provided, could it be added to the wysiwyg coding above?

Steve

Hi Steve,

Sorry, I had misunderstood. If you want to also add the "img-responsive" class to the style, you can combine it with the styles like this:

{ title: 'Image Left', selector: 'img', classes: 'img-responsive', styles: {'float': 'left','margin': '0 10px 0 10px'} },

Or, if you'd like to have a separate format for the responsive class, this should work:

{ title: 'Image Responsive', selector: 'img', classes: 'img-responsive' },

It would also work to simply add those responsive styles directly into the "styles" section, though I find using the class creates a bit "neater" result.

Let me know if that does the trick!

Thanks,

Thanks Daniel,

that worked a treat, I can only think that I had my syntax wrong somewhere, now I have a working version I should be able to build on that for other items.

Thanks again for your help.

Steve