Responsive images code on upload in tinymce for resources

General
1

Hello there!

I dont know if there is an easy solution for this, but Im asking anyway:

Do you know if there is a way, to automatically place responsive code (like an image+ template) when a client loads up some image in a resource?

Best,

your random kangeroo

2

Maybe instead of mixing text and images in TinyMCE you can use a block editor like ContentBlocks to separate them. Then it is easy to change the template of the images.

1 Like
3

I’m not saying this is efficient but what I usually do in a case like this is create a series of image TVs i.e. *Image01, *Image02, *Image03 etc and then create a chunk for each with relevant template and including the image tv. Then get the client used to placing the chunk where they want the image. I’ve found they soon get used to it if you keep the chunk names simple i.e. [[$Image01]], [[$Image02]] etc. It’s not going to work well for any more than 10 or so images but generally fine.

1 Like
4

maybe another solution

1 Like
5

Another alternative I use outside of modx is http://adaptive-images.com/. I have a lot of different type of users so I try to find solutions outside of multiple point uploads.

1 Like
6

I am usualy using javascript to accomplish that…

var contentImages = $('#content').find('img');
    if (contentImages.length) {
        $.each(contentImages, function (index, item) {
            $(item).removeAttr('width').removeAttr('height')
                    .addClass('img-responsive')
                    .wrap('<a href="' + $(item).prop('src') + '" class="fancybox img-hover-v1"></a>');
        });
    }
1 Like
7

You can also add to the TinyMCE configuration, something like this
image_class_list: [
{title: ‘img-responsive’, value: ‘img-responsive’},
]
Exactly how to do that depends on which package you have installed.

1 Like
8

I created two classes in CSS:

 .img-full {
      width: 100%;
      height: auto;
  }

  .img-static {
      height: auto;
  }

In the system variables, I set tinymcerte.image_class_list
[ { "title": "img-full", "value": "img-full"}, { "title": "img-static", "value": "img-static"}]

and thanks to this, by default we have the class img-full - that is, all graphics have a width of 100% , but if we want any graphic to have a fixed width but be responsive downwards then we set the class img-static