A plugin for adding layout classes to post elements

(Simon Cossar) #1

Note: this plugin works, but I have made a better and easier to use plugin that does the same thing. You can find it here GitHub - scossar/discourse-grid: A basic grid system for Discourse posts

Continuing the discussion from Image Alignment:

Here’s my first attempt at making a plugin for adding css classes to the post markup in order to control its layout. GitHub - scossar/post-styles: user configurable post styles for Discourse

It whitelists a group of classes that are then used to set the width on figure and div elements in the post. It wraps uploaded images in figure tags. The whitelisted classes are mainly intended to be applied to the figure tags, but for more advanced layouts they can be applied to div tags that are added to the post.

It lets you do things like this:

At this point, for mobile devices the classes are all set to display at width: 100%; height: auto.

If you are going to use this in a production environment, make sure you really test it out first! I have a use for this plugin, so I’ll keep working at it.

(Anton) #2

So, you first have to upload an image and then wrap it with a <figure> tag and add some classes - have I understood it correctly?

(Simon Cossar) #3

Use this instead

(Anton) #4

Does it mean this plugin is discounted?

(Simon Cossar) #5

I think it should still work, but I haven’t looked at it for a while. The discourse-grid plugin does the same kind of thing, but the markup for it is simpler.

(Anton) #6

May I ask you to update the first post in this topic and link to the one that you do support. Thanks.

(Simon Cossar) #7

The post is too old for me to be able to edit it, but that information is at the top of the plugin’s readme. I’m sure there is a better way to do this. The way I do it in these plugins is too complicated for a casual user on a site.

Allow user to edit post that is older than the allowed edit time
(Régis Hanol) #8

Just wikifi-ed the topic so that you can update it :wink:

Allow user to edit post that is older than the allowed edit time