Backdrop CMS Instructional Videos, 22 Sep 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Backdrop CMS Modules: Mosaic Grid

Description

This a short video about 12 minutes of me playing around with a brand new module for Backdrop CMS called Mosaic Grid. It allows you to use views to create a mosaic of your images.

A

Hi this is Tim st. called Tim on Twitter and other internet places and I'm just playing around with doing some videos tonight and thought. I would do a control video to show it a brand new control module that just got released this week that I found the control is.

A

hmm Yes, you can find it at background or called mosaic grid, and pavol it looks like is the maintainer and the person who wrote this github core run tari account. So thanks to for creating this module, I just played with it. It's a pretty brand new I think the release was just a couple of days ago.

A

The installing modules is similar to how you would do it for Drupal. If you're used to Drupal, you can put it in your modules directory and backdrop root, and then you just go to the functionality list modules and there it is mosaic great and we can turn it on. Just save the configuration.

A

So I'm installing this, it's the only module enabled in this particular backdrop, install I, mean I, am working on my local machine I did create a content type in advance, called animals, and my animals content type I created a image field, nothing special about it.

A

Configure pretty much all default settings, except that I did enable an alt and title fields. I can show you why, in a second and the other thing I did was I uploaded a bunch of notes about ten, with just images. That's pretty much yet I gave them a title, an image and some of them I put a short title text.

A

Okay, so that's it so for this module under configuration media, we find mosaic grid for configuration I'm finding a little bit of problem with this loader style and that so that you may need to keep this set to none. Although what setup for spinning ring for once will go ahead, if there's the problem, still there see if it's still there lazy loading I'm pretty sure this just means that the background isn't going to load the images until you actually show them on your screen.

A

So if the mosaic image is off-screen, it won't try to load all the images and, as you get close to work, actually we're trying to view the image or the mosaic. The images will load.

A

So there's nothing really. That needs to be configured here. There are some things you can play with, but what you do have to do to make this work is go to views and if we go to view- and we say out of you and let's put name our view- animals.

A

Content type of animals.

A

In here, under the format' there's a mosaic grid option, so we can do a mosaic grid of fields.

A

We don't need a pager, let's go ahead and.

A

Save that and now what we do need to do is we need to add the image field to our view, so I have an inventory one posts and I have a different one on animals. We want to add the one on the animals.

A

So I haven't fully played with this here. We're gonna want the formatter to be an image for sure and I. Don't know if this is going to be like the mat if it's gonna load, I'm doing a medium image style, because I know that all of my images are could I have something at least that big we could load the larger one.

A

Let's just do that and I didn't try this before either. But let's link this to the content, Oh.

A

Image display the image on the left to right now. I, don't think we want to do that. So that's how we want to do save that I, don't know if we need to get rid of the title, we're not going to be using it, but I, don't think we need to get rid of it.

A

We have a path animals, let's hit, save we saved our views. That's all we've done this great, a mosaic grid, Oh under settings for the mosaic grid. We can set the maximum row height the gap between images, a margin around the images we can also choose to do the image title tag as a caption which you'll see in a minute there's for maximum row, height policy things here and you can read them underneath tail skip cropping oversize, which is which, let's just start with a different fault, hit save. We have to save our view again.

A

I click on the page says it's not saved so. Okay, invalid field, type, I, think format requires one image field and may optionally have one text field as I recall. If I get rid of the title field, I think that'll take care of that problem.

A

There we go now, it lets us save it. So it's a few just up there. The preview doesn't seem to work for this. Oh it does work.

A

Well, maybe it works.

A

Let's go ahead and go to the page and see if that works better. Oh look at that.

A

So basically, this just creates a mosaic view now, because these images are so big we're getting some weird gaps, I believe that we want to make them a little smaller, so we go in here and we make the rows. Let's say 250 at the most at all. My changes save oh look at that. A nice neat grid I'm finding that most of the time this produces really nice like square cornered grids. Depending on this setting, sometimes you'll have a straight image at the end.

A

You can max it with. You know a few other settings that we can play with. We can do we go to the grid. One thing: where is it? Is it under more yep? It is under more. We can set the maximum number of rows so, for example, we could say only make a maximum of two rows.

A

If we save that now, we've only got two rows. I tried something as I was experimenting with this before like right now, it is showing them to the images depending on when we buy post-date. So let me try the preview again.

A

Okay, the preview shows you, okay, it's showing the captions on the images and showing you something, but it's not actually loading the images.

A

But basically, these these are listed in the exact order that we that I uploaded them another thing we could try a random display, so I can add.

A

Random- and this is interesting- just leave it at that and I'm gonna get rid of the post removed. So now the only short criteria is random and we only had two rows. So that means it's not going to show them all every time. So I found that when I do this and I load it the first time it tends to display better if I hit refresh in this case it did it changed the images we've got the the pheasant. Now that wasn't there before, let's refresh it again, hmm this seems to be working pretty smoothly.

A

Oh there we go I. Did it enough times, I'll get one, it just doesn't work, so it doesn't released. It doesn't work in terms of a nice square shape. That's it refresh again.

A

Okay, anyways, that's pretty cool. Let's see, if there's anything else, we want to quickly test.

A

The settings are all here in them, I mean we could do 20/20 instead, let's do that, show you how that works. Save it's just gonna be a bigger gap between the images, not just nice. That works well here. Let's do that, but add another row again settings more to three rows. I, don't know: I'm gonna make the row a little bit bigger again.

A

The rows won't be the exact same size every time, but there you go. Look at that. How nice most of these aren't working out well and we're getting four four images that do have a title: it's showing up here in the caption cold Fox, it's!

A

Where do we see there was someplace where we could customize caption style, so I can change what style is background. Opacity, 19.

A

And I just cried changing these settings a bit and see if we can improve the quality of.

A

Well, definitely, a much better caption, but here's a case where the images did not line up so well. I haven't figured out what the trick is here, but sometimes that happens. Anyways I think that's it for this. So there we go. If I refresh it look at how neat this came up again, not all of them have captions, so they're, not all showing up, but this is a pretty cool module. I encourage you to play around with it. You can find it at background.

A

Contribs are, if you go to backdrop CMS org, all the modules are under add-ons and because these are listed in terms of related state- and this was just released like a day or two ago. So it's right here at the top, but otherwise you could do a search, I'm saying much about the Gras anyways good enough. Thanks for joining me doctor later.