Learn how to work with fields inside a layout - MODX 2.4.2
Transcript
Hi. I’m Jason from Dash and in this video, we will be covering fields within Content Blocks. I’m already editing a page that has Content Blocks. So I’m just going to scroll down to the Content Blocks area and to begin with, I’m going to close all our layouts just to make it easier to follow.
So our first layout here is a single-column layout. So opening that, we can see we already have a rich text field with some content. But let’s add a new field of a type button. So you can see there by clicking the Add Content button, we get an Add Content overlay which gives us a bunch of options with the different kinds of fields we can add anywhere in content box.
So there’s a rich text field which we’re already using in this layout but I’m going to go ahead and click the button field. The label on the first field here asks us to start typing the name for resource, external link or email address. Content Blocks is actually smart enough for us to be able to enter the name of any page on the site and create a link directly to that.
So I’m going to go ahead and create a link to our blog page and I’m going to label it See Our Blog. We also have options for which side of the page to render this button on. So I’m going to leave it as left for now. You also want to have options for colours and things like that depending on how the button has been implemented.
So hitting Save now and reloading it front end, we should have a button at the very top. See Our Blog which links off to our blog. So coming back into the editing page, just going to close single column quickly and right down the bottom here, we have a blank space ready for useful links. So I’m going to use a special field type here called a “link list” right here.
So you can see we’ve got these new input options. So I’m just going to close these arrows, so that we go through things one step at a time. So this new field called a “link list” and within that, we have one item and that item at the moment is empty but it gives us an option for a downloadable file or a link target and a label.
We will see here the text and this says “overrides link”. So if you’ve uploaded a file, it will ignore what we’ve entered in link. So to begin with, I’m just going to choose an image to download so there’s that logo and give it a label and I’m going to add one extra one. So we see now we’ve got the same options again. So this is for our second link but this one I’m going to link over to our blog and save that.
If I reload the page, right down the bottom under useful links, we see we’ve got our logo and our blog and you will notice that for the file download, we have a download icon and for the blog link, we actually have a link icon. So, Content Blocks are smart enough to give you a different icon based on the kind of link that is.
Another common field type is an image. So I’m just going to add one of those after this link list here and I’m just going to choose a normal image file. So it lets us either choose a file that’s already on the server or upload a new one. I already have our logo here, so I’m just going to choose that.
We can save and we can see the choices, the preview of the image from where it’s going to sit and if I reload the frontend here, it should be right after our links.
There’s also another special kind of field called a gallery. So going to add one of those quickly and I’ve already got a few files here prepared. So you will notice it says we can choose upload or drop images. So I’m just going to open the folder that has these images and drag that straight in. We will see here we’ve automatically uploaded all of those and they’ve all got slightly different names. If I hit Save and reload the frontend here, we should have a small gallery in the sidebar. Automatically by clicking one of these, we get a lightbox popup that lets us scroll through all the images on the page.
So you will notice with the gallery preview that we’ve got these labels down the bottom which at the moment are just saying the label that the original image file had, which isn’t overly useful to people coming to the site. But we can easily change that back on the editing page. Underneath each of these images, it automatically pulls the name, but we could change this to anything we like.
If you just save this and refresh, we should have new subtitles. For more training videos, visit dash.marketing/web-design.
