Tiles Image Gallery

theme-component

(Anabel ávila) #61

I’m not able to see the icon when creating a post and below there’s a prove it was added as a component to my theme… What am I doing wrong?

Thanks in advance!


#62

Hey Joe

I appreciate your time and effort with the experimental branch. Will give it a shot in some test category and go from there! :slight_smile:


(Joe) #63

Do you see any errors in the browser console?

Can you share a link to the site you’re having trouble with?
(you can PM me the link if you prefer)


(Caroline Early) #64

Thanks! We added this to our forum.

But it automatically added it to the 7th from the left on the nav bar, and I’m wondering if there’s anyway to add it to the left of the upload button, so 8th from the left. The reason being that we constantly tell people to use the upload button, 7th from the left, and now that is no longer accurate.


(Sam Saffron) #65

This is surprisingly tricky it would require some changes to core.

At the moment in the theme component says add to “insertions” group, which it does diligently. Trouble is that upload is an extra button which is added after the theme component did its work.

I can think of some hacks we can apply to make core comply here, but they are risky and not the kind of things I would recommend carrying long term.

Best solution I can think of though is amending our toolbar to render with flexbox, then you can order it in CSS however you see fit which is very easy to explain to people for cases like this.

@awesomerobot I wonder how often this kind of stuff pops up, is it worth tracking flexboxifying the toolbar?


(Kris) #66

We already moved the toolbar to flexbox when we redid the composer :mage: — so @Caroline_Early, to rearrange the buttons this CSS can be added to your theme:

.d-editor-button-bar {
  button:nth-of-type(n+7),
  div:nth-of-type(n+2)  { // Tiles button, divider, and gear dropdown
    order: 2;
  }

  button.upload { // Place upload button before above elements
    order: 1;
  } 
}

What this is doing:

By default order is set to 0.

Adding order: 2 to the tile button and all elements after it means they’ll be placed after anything with a lower order. Since they all share the same order value, they’ll fall back to the sequence of appearance in the HTML.

Adding order: 1 puts the upload button before everything with order: 2 and after everything with the default order: 0. So this puts it to the left of the tile button instead of the right.


(Caroline Early) #67

Thanks! That’s great.

…but I’m a total n00b when it comes to CSS. Where do I add this within the existing CSS?


(Kris) #68

It might be best to add this as a theme component, so it’s separate from your current theme.

How to do that:

  1. go to admin>customize>themes then click new

  2. name it something like “Tiles button order”, select “component” from the dropdown, click create

  3. Then you can click Edit CSS/HTML, copy & paste the CSS above to common > css

Now the component is created and you need to add it to your current theme

  1. go back to the previous page, then switch from the components tab to the themes tab

  2. select your currently active theme (it’ll have a green check mark)

  3. within the theme settings here there’s a Theme Components section, find your new component from the dropdown and then click “add”

  4. :tada: Now when you return to your forum homepage and refresh, it should be active.


(Caroline Early) #69

Okay we’re all set over here. Thanks for your help @awesomerobot @sam :slight_smile:


#70

since the introducing of font awesome 5 as SVG icons some used icon fonts are now missing in this theme-component, like the search-icon on the thumbnail overlay.


(Joe) #71

I pushed a few fixes:

  1. dropped waitForImages (total component size is now ~1.8kb)
  2. fixed zoom icon
  3. removed load backgrounds. Discourse now offers tiny fuzzy images and this component now matches core behavior and shows those while full size images load. There’s no special magic in this component as far as fuzzy images go, I’ve only removed some things that were causing it not to work the same way.

Here’s what that looks like now:

before anything loads

fuzzy image load first

full images load after that


#72

Hei @Johani

A small :bug:


(Penar Musaraj) #73

I can’t reproduce this. Those should be arrows (and they’re coming from Discourse core, not the gallery component.) Are you up to date with Discourse core?


#74

Yes, I use the latest version - v2.2.0.beta8

Check this screenshot:


(Penar Musaraj) #75

Ah, well, that’s not the same component, it’s the Slick image gallery component. (And yes, icons are broken for that component. Will work on a fix.)


#79

I think since the lazy load of images was implemented this component is a little bit broken but I don’t know for sure since when. I observed two strange things:

  1. When I add some images with the composer and format them as tiles everything in the preview looks good but when I post the message the little thumbnails of the pictures are all aligned to the right. So I have to wait some minutes before this behaviour is gone. Maybe the thumbnails for lazy load need to be generated?

  2. Some images won’t be shown (there should be 4):

Only after I rotate the screen to landscape and back to portrait view all 4 are shown:

We run version 2.20b10 of discourse and the tiles component. Site is running in Firefox 65 on android 9 and we use the material design theme. this is the post:

Thanks for any help! :slight_smile: