Sneak Peek

Supercharged Gallery Element

Sneak Peek: Supercharged Gallery Element. Good morning, good afternoon, good evening and good wherever you are JP here with Brizy and in this sneak peek, I’m going to show you the bachelor multi-image upload in the upcoming update for the gallery element in Brizy Pro, and that is of course, for cloud and WordPress. That disclaimer wants more, and that is this is a work in progress, which means I may run into some bugs while we’re doing it, you know you have to overlook that. It will be perfect in the end and, secondly, that don’t expect it tomorrow give it some time it will come eventually. What I’ll do first, is I’m going to show you how the gallery element looks currently and what you can do with it, and then I’m going to show you what it’s going to do in the future? It’s going to give you Goosebumps.


I’ll add a new block here – and this is the current versions that we have for both Brizy cloud and Brizy WordPress and I’ll bring in a gallery element. The golden drag comes in with two images: let’s duplicate that a few times. Let’s make it six, so we have something to work with, and then we go to our columns and we make that three now. What we need to do here is bring in an image for each of these, and then we can also style them out to the way we would like them to look, but what I’ll do is first to bring in a few images. Let me just see here to make sure that we’ve got good images that can work all right, let’s go for the next one, while that one is being uploaded.


What I can create now is a masonry layout, which means I click on the image and I drag, and this is kind of what we mean by masonry and often there’s a little bit of space as well, and we can probably add another image as well, and this is what we are used to within the gallery of course, one of the features that were added recently is that you can reorder the images as well. If I wanted this image in another place, I click on it and then I can use these arrow keys to move it around. Let’s I move that one to the left. Then we have this kind of setup.


It’s just do this and there we go and if we look again at the settings of this gallery, element you’re going to see that we have the option to enable tags. If we want to use tags, we can change how many columns this is the space between it. So if I drag it on all the way to zero and then you also have the option for lightbox I’m going to hop on over to the work in progress, let’s also bring in a empty block here and then, let’s search again for gallery this is our supercharged gallery, as I drop it and I select any of the images you’re going to be underwhelmed, because everything looks exactly the same, but this is where you now go to the element settings and if I select it, I go again here to gallery. You will see that we have now a number of options I mentioned at the beginning, I’m going to show you batch upload, but you’re going to be impressed by a number of other features in here like layout and hover animation. Let’s just look at images first, because this is going to speed up your workflow and it is done properly.


I’M really excited about this one. I click on images and lo and behold, it gives me the option to hold Ctrl and I can go ahead and just select various images that I want to use. Did you see what I did? There click click click and I held control. While I did that I’ve selected what year I’ve selected six images and then let’s go ahead and say select effect and look at that it brings in the images all at the same time and also from your context menu.


You can see the images appear here. Let’s put it again in three columns: there we go and it comes in to the aspect ratio of each photo, so you can clearly see it’s got the masonry layout by default. Let’s look at a few other cool things here. First, you can delete images directly from here. You don’t have to go and click on each image.


If you want to delete it, you can simply click here and remove that image and if you want to add more, you just click again on the plus and then you select which images you want to bring in. Let’s choose those two, and then they are added that is so smooth. The other great thing about this one is: you can shuffle them from here, so reorder them simply by dragging them around seems like a good idea. If you want a quick layout order for them, but remember the great thing about the gallery element in Brizy is that you can simply click on the image and you can move it around with these arrows to the position that you want just like before for masonry. You can click on the image and drag it, so you can create a real nice masonry image and remember that if you want a specific part of the photo in Focus, click on it, select the image and drag it so that you can have that part of The image always focused on all good and well, you may say, Frederick, but let’s look now at two other great features.


One feature: that’s always been pretty difficult to achieve with this, and that is to make a nice grit. Let’s see how we’re going to do that. Go again to the settings of the element over here and now next to layout, you will see we have this drop down menu. It’s set by default to masonry. Now I can put it on a grid.


Yes, and with grid, you get aspect ratio, so I can put it on one to one gives me squares three to two look at that: how lovely, let’s remove one of these images go7, never make full rows and 16 to 9, really nice and then, as you can see if we put it on something like 21 to 9, an amorphic then just go and click on the image and make sure that you put your focal selector on those parts of the image. That is the main focus. Let’s do that this one as well fabulous! I love it. I truly love it, and, apart from grid, we also get justified.


We’ve justified you’re, going to get the images slotted next to each other and stretches it so that it can fill the hole with from justified. We have basinry and then we have big image, and this is going to give you a single image at the very top, with a grid below that right. Love that, let’s just jump back to grid – and we also put it on something like one to one – which is one of my favourite aspect – ratios now – the third one I’m going to show you in this supercharged little gallery element for the future is hover animation. Currently, it said to none if I select zoom in – and I hover over any of these images now look at that little bit of animation and you also have the transition speed here with duration set to 500 milliseconds, which is half a second. If I wanted to occur quicker with that transition, I drag it down, and now you see it will just pop right in and if I want a little bit more of a delayed approach, I put it on a thousand milliseconds.


You cannot see that zero. It’s one! Second, and then you have this slower Ken Burnsy effect that zoom in there’s a number of other options. Here, let’s see, there’s move left, let’s just move the duration to something more manageable and now they will slide to the left. Lovely.


Just look at that. Then. The same features like we’ve seen before the columns the spacing and then open in the lightbox. Suddenly this is something to write home about really excited about it, and I want to show you just one more thing: combined with the new shape masks for images in the previous sneak peek, we looked at shape, masks for images, but it’s also applicable to the images within the gallery, so I select any of these images and you’ll see here that it gives us the option to put it on mask exactly the same features here. If I put it on this circle, I’ll put it on fit to make sure, but it’s one to one.


So that’s why it’s going to work like this, I’m going to put it on fit and you can then change the position. Repeat. I’m curious, I haven’t tested repeat repeat: shouldn’t: do anything, let’s put it on no repeat and look at that: a gallery of wonderful tunnel visions. So remember this is a work in progress. It’s not available, yet it’s a sneak peek and I’m only allowed to show you a little bit, but it’s something to get excited about for the future.


When this is ready. The first thing that will happen it will be released as a beta version for testing. If you’re interested in that kind of thing, you have the time for some beta testing, check the link in the description below and sign up to become a beta tester. It’s nice, sometimes just to play around just remember, never ever use a beta version on a live website. You’ll be crying.


Those crocodile tears from me JP until next time go well good morning, good afternoon, good evening and good wherever you are welcome back to another sneak peek at what is happening behind the scenes at Brizy – and there are a number of things that you can be expecting for the future releases and in this video I’m going to show you the gallery multi-batch ad and like before I’m struggling.