DEPRECATED: Discourse masonry gallery theme component


(Joe) #1

A theme component to that creates responsive grid galleries in topics if the markup matches a certain pattern.

Repo: GitHub - hnb-ku/discourse-masonry-gallery

Samples:

Desktop:

Mobile:
click for full size


About

This theme component does not have any color / background styles in it. It will inherit the current theme’s styles.

Here’s the theme component running on a different theme:

This theme component also maintains the default Discourse lighbox behavior, this means that clicking any of the images will open them in the native lightbox viewer.

This theme will not have ANY effect on lightboxs that don’t match the pattern above.


Usage


The quickest way to create a grid is

1- upload multiple images at once using the default Discourse uploader

2- highlight the code for the images in the composer

3- click on the gallery button:

The rest is automatic.


Extra details about the markup

This being a theme component (as opposed to being a plugin) my options were a bit limited.

If the html structure follows this pattern (For now)

<div dir="rtl">
<!-- line break-->
![nice house|529x500]![another house|830x500] <!-- uploaded images... -->
</div>

Or, if your app uses a right to left language:

<div dir="ltr">
<!-- line break-->
![nice house|529x500]![another house|830x500] <!-- uploaded images... -->
</div>

A responsive grid will be created automatically with all the images in the div

If your app uses a right-to-left language, you can use the opposite version. or <div dir="ltr"> and the rest is the same


How does it work?

Most the weight lifting is done by the Discourse upload process, this is complimented by David Desandro’s Masonry and ImagesLoaded libraries - ( MIT license )

Masonry creates the grid layout and ImagesLoaded makes sure Masonry is not initialized untill all the images have fully loaded.

I ended up binding the script to the ajaxComplete thanks to @Mittineague’s :sunflower: help here:


TODO

Help appreciated if any of this is possible under site customization:

1- whitelist a class for the gallery instead of the dir hack I’m using now. Ideally I would really like to either use <div class="m_gallery"></div> or - and this is a stretch goal - use [gallery][/gallery]

2- :x: add a button to the composer - (Thank you @Dax for the script and @cpradio for the translation fix )

3- find a more targeted way to fire the script consistently in topic pages. ajaxComplete is the only thing I found that works, but it fires multiple times in each page reload. (api.onPageChange does not work for me when loading topic pages but works great in the topic list)


How can I whitelist a class in a theme?
(Sam Saffron) #2

We should probably just allow admins to whitelist div classes via a setting


(Daniela) #3

I use this to add a table button on my site:

<script type="text/discourse-plugin" version="0.4">
    api.onToolbarCreate(function(toolbar){
      toolbar.addButton({
        trimLeading: true,
        id: 'table',
        group: 'insertions',
        icon: 'table',
        title: 'tabella',
        perform: function(e){
          return e.applySurround('<table>\n<tr>\n<th>Nome 1 colonna</th>\n<th>Nome 2 colonna</th>\n</tr>\n<tr>\n<td>item 1 colonna</td>\n<td>item 2 colonna</td>\n</tr>\nTitolo Tabella', '</table>', '')
        }
      });
    })
</script>

Note that the script is a bit old (I think I added it more than two years ago, long before the markdown tables were supported).

This is the only known problem:


(translation string for that element is not in any yml file = no traslation)

which is why usually the buttons on the composer are added with a plugin.


(Joe) #4

Wow @Dax that was incredibly helpful! :sob:

That’s exactly what I wanted in terms of behavior. :clap::clap::wine_glass:

The translation string is really a minor issue compared to the issue you solved with your helpful tip.

I’ve already added this to the repo:

<script type="text/discourse-plugin" version="0.4">
    api.onToolbarCreate(function(toolbar){
      toolbar.addButton({
        trimLeading: true,
        id: 'Gallery',
        group: 'insertions',
        icon: 'picture-o',
        title: 'Gallery',
        perform: function(e){
          return e.applySurround('<div dir="rtl">\n\n', '\n</div>', 'Upload Gallery images here')
        }
      });
    })
</script>

And here’s the result:

composer button to add gallery markup

I will update the instructions for adding a gallery in the OP tomorrow.


(cpradio) #5

I believe to fix the translation you simply need to add this above your api call (with the appropriate key/values)

I18n.translations.en.js.composer.upload_gallery_images = "Upload Gallery Images here";

In your case, ‘Upload Gallery images here’ would become ‘upload_gallery_images’


(Joe) #6

YES! :grin::ok_hand: You’re absolutely correct @cpradio that worked like magic and I have already added it to the repo and the result is:

translated string working

this leaves only one really small detail since everything else is done here, the string for the composer button (when hovered) is still untranslated. but I am totally fine with that being so for now. :grin:

thank you so much @cpradio :wine_glass::wine_glass:


(Daniela) #7

You can update the version here:

<script type="text/discourse-plugin" version="0.4">

to 0.8.16. (the same as the other script you are using). As I said it was an oldddd script :smiley:


(cpradio) #8

If you provide a screenshot of the hover translation, I can help fix that too.


(Joe) #9

Awesome @cpradio
apologies for not adding this earlier :upside_down_face:

Thank you so much :sunflower:


That’s great @dax :ok_hand:

In that case I will merge the the two tags together since they both run under 0.8.16

I updated the repo :boom:


(cpradio) #10

I think this will do it.

I18n.translations.en.js.composer.Gallery = {text: "Gallery", title = "Gallery"};

(Joe) #11

@cpradio I get a syntax error when I add that.

So, just in case it’s something silly on my end (Most likely :sweat_smile:)

Here’s what it looks like: (i stripped the other script out)

<script type="text/discourse-plugin" version="0.8.16">

I18n.translations.en.js.composer.upload_gallery_images = "Upload Gallery Images here";
I18n.translations.en.js.composer.Gallery {text: "Gallery", title = "Gallery"};

    api.onToolbarCreate(function(toolbar){
      toolbar.addButton({
        trimLeading: true,
        id: 'Gallery',
        group: 'insertions',
        icon: 'picture-o',
        title: 'Gallery',
        perform: function(e){
          return e.applySurround('<div dir="rtl">\n\n', '\n</div>', 'upload_gallery_images')
        }
      });
    })
    
</script>

And here’s the error I get after saving

SyntaxError: unknown: Unexpected token, expected ; (5:41)

It’s strange that it’s saying the error is on line 4 when it goes away if I remove line 7


(cpradio) #12

Sorry, missed the = before {, fixed my post


(cpradio) #13

Just realized that line might not do it, it might actually need to be

I18n.translations.en.js.Gallery = "Gallery";

(Joe) #14

This worked beautifully! :champagne::champagne:

I added it to the repo

Thank you so much @cpradio :heart::boom:


(Bliketto) #15

How to install plugin?

      - git clone https://github.com/hnb-ku/discourse-masonry-gallery.git
      # cd /var/discourse && git pull && ./launcher rebuild app

but no luck, the button did not appear in the editor


(Joe) #16

@bliketto

I will add installation instructions to the OP later - I totally forgot that part :sunflower:


For now:

You don’t need to install this as a plugin. You should install it as a theme.

Once installed, you can add it as child theme under your current theme.


(Donald Swofford) #17

but no luck, the button did not appear in the editor

I also don’t have the photo gallery button?


(Joe) #18

Did the installation go ok @Donald_Swofford?

Are you seeing any errors in the console?

What version of Discourse are you on?


(Donald Swofford) #19

Version [v2.0.0.beta3 +11]

I didn’t get any error on the install and everything seems fine but it doesn’t even show up under plugins I installed spoiler alert at the same time and rebuilt and that is working fine. I also installed automatic featured image which doesn’t seem to be working either


(Donald Swofford) #20

Do I need the image gallery plugin as well? I don’t have that Image Gallery Plugin