Creating a Photo Gallery In WordPress Using Oxygen Builder and Meta Box Custom Fields

[Music] hello everyone welcome to the next video in this one we are going to be making a gallery with the new metabox integration inside oxygen 3.9 alpha 1 or later so to start out i'm going to go to our media library i already have some images in here which i just got from unsplash.com you can search in here and pull out images and download them for free what i did is just got landscape images a bunch of different nature ones downloaded them all in relatively the same size and added them to my media library one thing i do want to note is that if you do want to include captions with your images you will want to add those captions in your media library under the caption field here which i've gone through and done that for all of mine just so we have some data in there so next what we are going to do is jump over to meta box and in our custom fields we are going to add a new field group and we're going to call this one gallery we're going to actually have to come back because we are going to have to set our posts to a specific page which i don't have in here yet i suppose we can just set pages for now that way it will show up so again we got to that by clicking on settings and change our location from post type posts to pages in this instance where you can set it wherever you need it to be but i'm just going to stick with pages for this tutorial then we'll click back on fields and add field and what we want to add is going to be single image i played around with this and tried out the different image fields and it seems like oxygen's gallery wants this one to be used in order for it to work so i'm just going to leave it as actually we'll change our label here to gallery images and we are going to click the checkbox cloneable and that's going to allow us to add multiple photos more than just one and we can also set sortable which is going to allow us to drag the order in which we want our images everything else you can keep the same and just go ahead and click publish i'm going to leave this open because we are going to need this id field so i'm just going to leave this here for now and i'm going to go up to my pages now and i'm going to right click and do add new in here we're just going to call this gallery and in order for oxygen to work for us we do have to click publish first and then update again and i'm just going to minimize this for a moment and you'll see down at the bottom we have our add media button so i'm going to go ahead and click that and just choose our first image and click select and then click the blue add more and it pulls up the add media button again and we'll just get all these added in here all right and we have those all added in now and now you can see we have this little dragger here which allows us to move the order that's what our field here is when we say that it's sortable so that way you can change the order of your images if you want to just by clicking that check box so we are good here so i'm going to go ahead and click update so that it saves us saves this now i'm going to open this back up and we're going to jump in and add it with oxygen i'm going to start by opening my structure panel and we are going to add in a section and i'm just going to give it some spacing right away i'm going to set it to stack vertically and center and then in here i'm going to add a div and this one we're going to do center middle and i'm going to set this to 90 percent now we can go to add in the top and either you can search in here or just start typing and i'm going to type in gallery this is just going to be oxygen's native gallery so we don't need any add-ons in order to make this possible to use and you see we have our gallery source and you'll see that meta box is in here so we want to go ahead and click that and then we're gonna have to jump back to this tab and we're going to copy this id here and this is what tells oxygen where we're pulling that from so we're just going to paste that in this field here and we see that we're getting our images pulling in you can set whether you want to link the images and then to lightbox which is what i typically typically choose if you choose no it's not going to light box for you so i always prefer to set it to yes i set my thumbnail resolution to full but you may do it differently depending on your needs and your images sizes next we'll jump into layout and personally i like to choose grid you can choose what grid you want if you want to do three four two across it's up to you i am going to click this check box and it's going to bring everything to be the same size and the other thing we can do is come down all the way to the bottom and we can choose to set our images to go more than to span more than one column and row for a specific image that's just a native gallery or grid option i apologize so i just wanted to mention that if you wanted to set yours up like that next i am going to click the little back button here and click on captions you can choose to show captions it defaults to yes so you can see when we hover over it we're getting our caption down here and it also shows at the bottom when we light box it so we'll look at that once we get to the front end here so i'm just going to leave this on yes and leave everything as is here you can go ahead and choose to hide captions below a certain size so we'll just choose lower than 768 so once we get to mobile click our back button here and we're going to go to hover and right now you see there's not really any hover effect besides our text showing up down here when we hover so i'm just going to set a little bit of a image opacity we're going to go to 0.9 just so you can see it changes just a little bit and again you can change your transition to if you want that to be more subtle or faster it's up to you so i'm going to go ahead and click save just so we have all that saved here and the one thing i've noticed that gets a little tricky is now when we start jumping into our mobile optimization or responsiveness so you can see that it it disappears on us here you want to make sure that you have metabox chosen here it's still pulling in your field and it's hard to see in here but there is a little bit of a outline here designating that it is chosen here but the important thing is coming down to layout and we need to go ahead and choose grid again in order for this to work again i'm going to leave our set image fit to cover and on our first breakpoint here i'm going to leave our first image to span multiple columns and rows and we're going to move down to the next size and you can see our layout jumped back to just the default so we choose grid again and we can choose if we want our columns to be different here in my case i am going to go to 2 here and we're going to come all the way down click on our first one here and i'm gonna set this back to one and one and that way our first image um should default back you can see that it's not doing it in the back end of oxygen but it should show up properly on the front end when we get there so next i'm going to drop down to our next size down and again i'm going to choose grid and this one i'm going to set to just one and again you can see our first image is not showing properly but on our front end it should do this for us and on our last break point here i'm also going to click grid and it should inherit the one but i'm going to type that in just so we have that i'm going to click save and we're going to jump to the front end i apologize i clicked the wrong thing there so let's try that again all right so you can see on the front end we have our gallery showing here and it was pretty easy to get that all showing up correctly you can see when we hover we get that little bit of image opacity and our text shows up at the bottom here and if i do go ahead and click that and light box it you can see it brings the image to basically full screen and you're able to navigate left and right and we have our caption down at the bottom so you can see we can navigate through here to our different images you can see some of our images are a little bit different sizes here and that they all are showing at full resolution and 2x you just click anywhere in the black so now let's go ahead and make this responsive so i'm going to click inspect and our little mobile icon here and responsiveness does it let me drag it doesn't i think that is only a chrome feature and i'm in firefox developer here but you can see that on our mobile size which is uh 320 for our width that we're getting just one across and everything is fitting here and if i make this a little bit bigger let's go up to maybe a little bit bigger iphone and let's jump up to ipad and again you can see it's showing as two across like it should be and if we rotate it on our ipad to be landscape here now you can see that we're getting our first image which spans two columns and two rows showing up properly again and we're getting three rows across so you can see our mobile responsiveness is now working so i'm going to go ahead and exit out of the mobile mode and inspector and just get back to our normal desktop view so again just to recap on that in the back end of oxygen it doesn't show up quite properly but always do double check on the front end to make sure that it is so in our case it does look a little bit weird here after we set each of our break points with grid but once you save it and go to the front end it does show up properly so that's how easy it is to use the new gallery integration with metabox jump back up to my all devices again we're just setting our gallery source to metabox we're pasting in our id from metabox which we find right here typically if you rename your your label here it's going to change that id i like keeping a extra window open just so it's easy to navigate back and copy and paste that but you paste that in and choose all of your different styles and everything here again you can choose what you need for years i chose grid for mine but you can choose to do flex or masonry i'm not going to jump into those in those videos because it for most most people i think grid is going to be the typical option again captions you can change your background color for when you hover and the text color you can choose to show it on hover or not so we can click no and you can see that it's gonna show our captions not just on hover so that is an option as well and again you can choose to show the captions at all break points or below a certain break point choose not to show them and again giving under the hover tab you can set a little bit of opacity there just so you get a little bit of difference there when you do hover over an image besides showing the caption so i think that covers this video certainly if you guys have any questions please do let me know but this is very simple to do and i hope you guys enjoyed this video and i will see you guys in the next videos

Channel: LocalSBM

Views: 977

Keywords: Meta Box, Oxygen Builder, WordPress, WordPress Dynamic Data, How To Use Meta Box, WordPress Relationships, Oxygen Builder 3.9, Meta Box WordPress Plugin, Meta Box AIO, Meta Box Custom Fields, Meta Box Custom Post Types, gallery

Id: IptCzmslA7U

Length: 15min 22sec (922 seconds)

Published: Mon Sep 06 2021