FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Image & Full Page Dimmer

Next up is our About page. We’re going to start by adding in an image and some paragraph text. After that we will add a dimmer to the image itself, and a dimmer for the whole page.

4.1 Image & Full Page Dimmer

Hi guys. Welcome back to getting started with semantic UI and in this lesson, I want to take a look at adding content to the about page. So in this lesson, we're going to be using a new image. So inside of the images directory, you'll notice the about.jpg. So now it's time to open up the about.php file and get started. So I have all the relevant files open, the main CSS, script.js, and the about.php. Now it's time to add the first bit of content onto the about page. And that's gonna be the breadcrumb inside of the semantic UI. So inside of here I just wanna take a look at what's available. So it's quite simple, you just have a div with a class of ui breadcrumb. And then inside of there you have the anchors and then also you have. The dividers. And the dividers can be different. So for example, this one is just a backslash. However, you could have an icon. And it can be any icon you would like. So for example, you can have an arrow, and so on and so forth. And then of course you have variations, which is the size of. The breadcrumb. So we can go with small. Then you have large and then you have huge. So let's stick with the small breadcrumb. I want there to be an icon as the divider, and I'm gonna choose the play icon as the divider, I think that's nice. And then also we have the very last section, which is div class active section. So that one doesn't need to be a link because that's where they're currently at the moment. So let's go ahead and integrate that into the about page. So let's, first of all, create a div with the class of ui. And then, also, it needs the class of breadcrumb. And then we want the size to be small. Inside of the div we need to, first of all, have an anchor. And let's make this go to the index.php page. And the label will be home. Then we want an icon divider, so I'm gonna put the I tag in here and we need the class attribute. Then we need to set this as an icon. I want to use the play icon and then I'm going to a divider as well. Then after that, we have the active section. So if I say div. And it needs the classes of active and section, and then inside of there we can say about. So, go ahead and save that, refresh the browser, and there is my little breadcrumb. Now, we do need a bit of styling on here. So in the main.css you'll notice I put a new comment in here. So I know what stars are underneath and I can take a look at targeting the div element with the class of breadcrumb. And what we can do is target the anchors. So I want the text decoration. To be none. That will get rid of that underlining on the anchor, and also I want the color to be something that's fairly dark or something like that. Let's go with 777, something like that, and then. After that we can save this and hit Refresh, that's okay. But we need a hover state in here, so let's go ahead and copy that out. Put in the pseudo hover selector. And we'll change the color to be, I don't know, just orange color again. Go ahead and save that, refresh, and there's the orange color, but now we have the main section. So if I inspect that element, so right here you'll notice it's adding the font weight to 700. So what I can do is copy this selector right here, copy that out. And then I can paste that just below. Now we need to do a bit of top trump, so again, we need to make sure that it goes a level up. So I'm gonna say div and that way it's gonna say this specific element must have these classes and that way it. Overrules the previous selector. And then we can set the font weight to normal, and the color can actually be quite light, let's make it CCC. So I'm gonna save that, and hit Refresh. And there it is. All right, so there's my little breadcrumb. So now I want to take a look at adding in an image element. We need to look in the images directory, and then we're going to grab the about.jpg file. We are gonna put the alt attribute on here, we'll just say about. Then,also, what I want is to. Apply some classes, so it's UI image, then we want it circular, just like so. And then also we want it to float to the left, so if we take a look at the image under elements. You'll notice if we scroll down that we have the ability to float the image over to one side or the other. So, I can also set the size as well, but I'm going to say left floated and then I can have a paragraph next to it. So, let's go ahead. And paste those two classes in. Then also let's put the paragraph in, just like so. And let's just go ahead and put a second one in for good measure. All right, so we have. Our two paragraphs. Let's go back into the browser. Hit Refresh. And now all of a sudden, yes, we have the image. That's looking pretty good. But, however, the text needs a bit more styling. And also the breadcrumb I would still like to align over to the very left hand side edge. So, if we review the styling that's being applied, to the breadcrumb, you'll notice that it's being displayed as an inline block again. So ideally we want this to display as a block level element. So go back to the main.css I want to look for a development with a class of UI and also with the class of breadcrumb and then we can paste this in. And we can set the display to block level and then I can save that and hit Refresh and now it will not go over to the right hand side. Also you'll notice that the text isn't sort of. Going down but it will do in just a second when I increase the line height and we sorta change the coloring a little bit. So I'm just going to take a look at adding in id onto. The body, so we'll say about. And then we can reference that ID, so I could say about and then the paragraph. I can set the line height to 180%, and again we've got the. Devil's gray. And then I can save that, hit Refresh. And there we go, it's easily clearing that image now. So the next thing I want to do is take a look at hovering over the image and applying a nice dimmer. So, I'm just going to review the documentation. Let's open up the menu and then we should have. The dimmer under modules, there we go. And so you can do quite a lot with a dimmer. You could have the dimmer come over the top of a particular section of your page. You could also have a page dimmer, which goes over the entire page. And also you can actually have. A dimmer that goes over the top of an image. And even a circular image in this case. So this is really nice. And you can see here that it's very easy to implement. We're just targeting those images. And then we're saying dimmer on hover. But the content of the dimmer is defined in the DOM. So, if we take a look at the use case you have a div for the class of ui page dimmer. And then inside of that you have a div with a class of content. Now, even though you can put your content in here. There's also a div for the class of center so that the content of the dimmer stays centered. In the dimmer. So, now that we have seen that, let's take a look at the examples right here. And I can't really see the code that's being introduced here for the image. So, again, if you want to find out, just right click and inspect. And you can see here that we have. The div with the class of UI circular image dimmable. And then inside of there, you have your UI dimmer with the content in the center. And then those buttons. And then you also have below there the actual image. And we don't need to set it to circular or anything like that. Because. The main div will actually take care of that, so that's very useful. So now it's time to modify our code so that we can have a nice demo going over the top of our image inside of the DOM. So the first thing I'm gonna do is create a div element and we want to stick our image inside of the div. Then also we wanna get rid of all the classes now cuz we don't need those. And then, we are going to take a look at this div right here and add in a few classes. So first of all. I want to say ui dimmable. Then also, we need the class of circular image, and then inside of there, we need to put the dimmer in, and then we have our image down here, so. We have the div with the class of ui. And then also it needs the class of dimmer as well. Then inside of there we have the div with the class of content for the content of the dimmer. And then we have a div with a class of center. So this will center up the content within the dimmer. All right, so once we've got that, the next thing I wanna do is put in a header two. And let's give this the class attribute and we'll call this UI header. And then we'll just say something like 1997. So, once I've gone ahead and done that I can save it and nothing will currently happen apart from. This will no longer float to the left. But you'll notice we're still getting the nice circular effect. So everything should be good to go. So the only thing I'm going to do is take a look at adding in the class left and floated. And once we do that. Let's save it, go back, hit Refresh and now it floats all the way over to the left. Perfect, that's exactly what I'm looking for. So now it's time to integrate the JavaScript so that we get this dimmer working over the top of the image. So the element that we need to reference. Is this div that is wrapping around the dimmer and also the image as well. So it's very easy to target this div because it has multiple classes. So we'll check to make sure that the div element has the class of image and also dimmable as well. Now, if you have multiple instances of this, I would recommend. Putting an ID on here. And in fact, just for use case, we'll just actually put an ID on here called dimmer. So once I've done that, let's take a look at the JavaScript. And we want to target the element with the ID of dimmer. And then we want to run. The dimmer method. And then you can pass in an object and you have a whole host of options. So for example I can say on and then I can say if we hover over it we can show the dimmer. So if I save that, go back, hit Refresh, I hover over it, and there we go. And you also have other events that can trigger the dimmer as well, such as click. But there is a little bit of a problem with the circular one where you can see it doesn't clip. When it's animating. So I'm gonna change that back to hover. Now let's take a look at creating a page dimmer. So go back to the about.php, and right here what I want to do is copy out this UI dimmer. And paste that above. And then let's format it properly. So now we have a demo all on its own and just for use case let's put in another element inside of this demo. So we could have a paragraph. You could have whatever you like in here. Images, icons, all the. >> Whole range of selection of things and once we have this in here I just want to make sure that we have a line break and we need to also include page as well, so we need UI page dimmer, we need all those classes and then you can have your content center. And then all the content that goes in the dimmer. So I can see that now and what we're gonna do is target the development again and we're gonna say if it's clicked then we want to show the page dimmer. So go back to the script.js, we're gonna target the element with the ID of dimmer again and then we're gonna wait until it's clicked. So I'm gonna say on click. Once it's clicked we are going to run a function. And then what we can do is target the element with a class of page and also it must have the class of dimmer as well. And again, you can use any type of identification but we mainly want to target that dimmer. And then we want to run the dimmer method, and then in there we're gonna say show. So if I do that, it will trigger it when we click on it, so if we go ahead and click, you'll notice that there. Is the page dimmer. And you can put whatever content you'd like inside of there. You also have the ability to call back a function once the process is complete. So I can say console.log('finished'). And we should do that. And we can go ahead and save this, Refresh, open up the console and once we open that up, we can go ahead and click. And there we go, now it should say. Finished right there in the console. So if you wanna take a look at all the settings that are available to you, again under the Settings tab you know you have closable, so where they can click off and it will close it and transition and duration. And so on and so forth. So there's lots and lots of options. You have callbacks and so on and so forth. And also if you wanna take a look at the Behavior, under Usage. You have the ability to show, as you've already seen right there. Hide, toggle, and there are lots and lots of other behaviors that you can pass in to the dimmer method. So thank you for watching me in this lesson. And please join me in the next lesson where we'll continue on with the about page.

Back to the top