Advice on best method for image layout manipulation please

Help / Discuss
#1

Hello,

Over the last couple of months I’ve had several users ask me how to correctly position images in wiki articles, most notably when you have several images and you want to align them next to each other or in table 2x2 arrangements with padding.

Ideally I’d like to be able to suggest a solution that works well when viewed on mobile platforms too (or even create a macro to make it very easy for people unfamiliar with web layout techniques). For example have a 2x2 arrangement turn into a vertical stack.

People seem to be inserting a table at the moment and then adding the images in after. I’m not particularly happy with that solution.

Any suggestions?

Thank you,
Ben

#2

If you want responsiveness then you probably need to use Bootstrap’s Grid System. E.g.:

<div class="row">
  <div class="col-sm-6">
    <img src="..." />
  </div>
  <div class="col-sm-6">
    <img src="..." />
  </div>
  ...
</div>

So you’d have to write a macro that generates this kind of HTML.

#3

Thanks Marius, that looks like exactly what I was looking for.

I’ve just tried using the image macro inside your html snippet, but can’t edit the images in WYSIWYG mode. Just brainstorming here, but if I combine the standard image macro with a custom macro is there a way to allow editing of the embedded image macro? (double click always opens the html macro)

Thanks,
Ben

#4

Yes, unfortunately when you have nested macros you can edit directly only the outer-most macro. This limitation comes from the fact that macro content is a black box: only the macro itself knows what to do with it. Most of the macros don’t support wiki syntax inside their content. Moreover, the macro output is often the result of applying some transformation on the macro content so what you see in the WYSIWYG editor is the output. If the output has an image it doesn’t mean that image appears in the source, it can very well be generated by the macro itself based on some parameters so you shouldn’t be able to edit it directly.

#5

I thought as much, I suppose I am best to build on the existing image macro then.

I’ve been trying and failing to find the source in : https://github.com/xwiki/xwiki-rendering/tree/662407dd0f429a35e9569d2d1c1a2b528203092d, could you point me in the right direction please.

Thanks,
Ben

#6

I can help you find sources for macros but we don’t have an image macro and I’m not sure which macro you’re referring to.

Note that some macros are also avail at https://github.com/xwiki/xwiki-platform/tree/master/xwiki-platform-core/xwiki-platform-rendering/xwiki-platform-rendering-macros

We have a simple image macro on xwiki.org but it’s a wiki macro and not a default macro that’s released: http://www.xwiki.org/xwiki/bin/view/Macros/ImageMacro

#7

Sorry, I think I’m using the wrong vocabulary!

Essentially I want to write a custom CKEditor plugin that allows a user to insert multiple images with a defined layout as suggested by @mflorea (and probably force the use of thumbnail style clickable images like Wikipedia).

Something very similar to the existing insert image popup menu but with a field that would allow a user to define the grid layout and then select/upload images to each grid location.

#8

Ah sorry, I misunderstood. You must be referring to the CKEditor Image plugin I guess. AFAIK we extend this plugin https://ckeditor.com/cke4/addon/image2

See https://github.com/xwiki-contrib/application-ckeditor/tree/master/plugins/src/main/resources/xwiki-image

1 Like