FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Portfolio Items, Label & Rating

In this lesson we’ll add in fluid items with content. Then we’ll add a label over the top of our images, and finally a rating system.

5.1 Portfolio Items, Label & Rating

Hi, guys. Welcome back to getting started with semantic UI. And in this lesson, I want take a look at the portfolio page. So for the portfolio page I've added in a few more images. And we just have p1, p2, and p3. So three images ready to use in our portfolio page. Now the first thing I want to do is take a look at adding in items into our portfolio page. So if you're curious to see what I'm on about with items. Go underneath the Views menu and right there you'll be able to see Item. And you'll be able to see that by default these items are very rigid. If I scale down you'll notice this snapping onto a new line. We can see that the items themselves can be grouped together and they can have content within them such as images, and text, and so on and so forth. They can also have some extra data down below as well and then you have a few variations. For example, you have stackable. So when you go down to a certain resolution, you will notice that they will stack one on top of the other. You can also have connected, where there's no gap between the items. You can then also have a specified column count. So changing it from being rigid to fluid means that you must specify column count and then everything will scale down in proportion. And so there is the item and I want three items and I'd like them to have images in, labels, and a bit of text as well. So let's take a look at putting that into our portfolio page. So in order to do this, I'm gonna put a div in here with the class of, first of all, ui, then we're gonna put in the class of items. Make sure that's a plural right there, and then also we have the specification for the columns. This makes it fluid, so I'm going to have three columns. So now it's time for me to put in three div elements with the class of item. Then inside of each individual item we want a div with the class of image. And so inside of the div, you guessed it, we're going to have our images. So these are the images that'll be right at the top. They don't need any specific class. We just need to look in the images directory and pull out the correct image. Also, let's put on the alt attribute. I'll just say Coffee, just like so and then we'll modify the other images so we have p2, p3 in just a second. But after that, we want to put in the main content so that the user can understand what this item is all about. So, we're going to create a div with a class of content, and so this is the main content of the item. And first of all we're gonna have a div for the class of name. So this div element with a class of name is the main title running along the top of the Item, and then we have some paragraph text. And optionally you can have some extra text as well at the bottom, which we'll put in. So first of all the main name or title of this item. So I'm just going to say coffee for each individual one. We're also going to have a paragraph element with a class of description. And inside of there, we're going to paste in some lorem ipsum. Now after the paragraph, we can have some optional extra data. So I'm just going to create a div with the class of extra and we'll say something like 200 likes. So once we have this in we can save it, go back over and hit refresh in the browser. And now we have these three columns. I can change the images right here. So we have the three different images, just like so, looking really nice. We can shrink it down and you can see there that everything looks really nice. And we have that extra data at the bottom. Now when we go down to a certain resolution, things get a little bit squashed. So again I can put the class of stackable onto the main divs. Let's say stackable and then can save it, go over to the browser, hit refresh, and now they will stack one on top of the other after a particular screen resolution. So after I have my items in here, what I would like is a nice little label over the right hand corner of the image, and that way they can click the little heart icon inside of there and of course that relates to the likes. So what I'm going to do is, I'm going to take a look at each individual div element that has a class of image. And inside of there I'm going to add the label just above the image. So let's take a look at this Semantic UI documentation. So I'm gonna open up the menu. And then under Elements, you will find Label and the label has many uses. You can see here that it can display information like so. You have the label over the left and the right of a segment and also an image as well. You have the ribbon. You have attachments to the segment again. You have variations such as colors and so on and so forth. And you can just scroll down and view, and you can see here we have some for the form elements. Very, very nice indeed but at the moment I just want to concentrate on getting that nice little label to overlay the image in the top right hand corner. So again I can just go ahead and view the code and you can see here that we just have an anchor with a class of UI, then you define which corner you want. So, I could say left or right and then you say corner label. And then of course you have the color variations as well so I can make this a nice red color, just by putting that red class onto there. And it doesn't have to be an anchor. It could be a div element, if you wanted it to. So now that we have that information let's put it into our page. So I'm gonna have an anchor that they can click on and then we're gonna give it the class of ui. We also want to say, I'll gonna make this say corner label. Then also we can say which side do we want this label to be. It's either left or right. I'm gonna make it the right. And then also I'm gonna make the color red. Then inside of there we want the icon, so we put the i tag in here. Then we have the class of icon heart. Now also with your anchors, let's go ahead and put in the href attribute, and then make it a domain link by just putting a hash in there. So now that we've done this we can save it, go back over and hit refresh. And there is the nice labels over the top of the images within the items. So now I would like to target the paragraphs in the items so that they have a line height of 180% and the nice coloring. So I'm gonna flick on over and take a look at the main.css file and I know that we're adding to the selector under the about page section, but there's no point in me repeating these css properties and values again onto another selector making the css file larger unnecessarily. So let's take a look at very quickly just targeting the paragraph element with the class of description. And also I've noticed here that homethree has the same stylings, so what I'll do is I'll cut this out. And then I'll put in a comma again. And just space this all out just like so. And delete that. So I'm saving a bit of space with the css. So if we go back and hit refresh, there's the styling in there. And the next thing I want to do is put in the rating for that individual item, so I'd like that rating system underneath the main item name. So I'm gonna scooch on over, take a look at the Semantic documentation. Open up the menu. And if you scroll down underneath Modules you will find Rating. So the default rating is very simple. You'll notice the mock up is very clean. You just have a div for the classes of ui and rating. And then inside of there you have how many icons you would like. So you could have 10, 20 or just 4. It's entirely up to you, and there is the basic rating. So once I click you'll notice it just saves that rating for us. Also you have the ability to have a few different types, so you have the star rating, which I know these are stars right here. But however if you add the class of star on to the parent, you'll notice that when we hover over we get the outline of the star and then when we click you'll notice it will fill the stars in. You can also have the class of heart. So it will change the icons to the heart icons instead of the stars. You have the size variation as well. So we have small. Then we have the normal size. Then we have large. And then we have huge. So if you actually view the code you'll notice we have small for the normal size. We don't really have to define any size on there. Then we have large and then we have huge. So now that we have discovered the variations and types, it's time to take a look at the usage. So with the usage, all I need to do is target the parent element that is wrapping around the icons. So that will be this div right here. And you can see it has classes of UI and rating. And so I can tell jQuery to target an element that has both of those classes. And then I can run a rating method, and that's how easy it really gets, and that gives you the basic functionality. But however you can also have behaviors. So for the behaviors, you can just pass them in as arguments to the rating method, and you have set rating, and then you can give the rating value. You can get rating, you can disable, enable and you can also clear the rating as well. For the settings you have the initial ratings so when the user visits the page I could say have an initial rating of four stars. So as soon as they come on they can see that rating. Then also you have clearable. That's a boolean set to false. If enabled, clicking on the current star rating will clear the rating. And you also have interactive, so that determines whether the user has the ability to rate. Also you have call backs, which is unrate. So if I say unrate, it will call back once I have rated it and it will give me the value. Then also you have a few DOM settings, so you can choose the namespace. You can also choose the selector right here. And you can also choose the className. So the className is again active, hover, and loading. You could change those classNames and then obviously reflect that in your styling and so on, and so forth. And then also you have the debug settings as well for any errors that you may incur. So now that we have this information, it's time to add this into our portfolio page. So in all of the content sections within each individual item what I'd like to do is go underneath the div with the class of name. And then we're gonna put in a div and it's gonna have the classes of ui and also rating as well. And inside of there I'd like to put in a few icons. So I'm gonna put in the i tag, and it needs to have the class attribute and so there we're gonna give it the class of icon. So now I can simply copy this out just like so and then paste it in. And what we'll do is we'll paste it in five times. So now we have five icons. And we can take a look at just saving that and previewing it in the browser. Which you can see there that it is doing the basic styling but again we have no interaction. And that's where the script.js file comes in. We need to target the element with the class of ui and also it needs to have the class of rating as well, so make sure you don't put a space in there. And then we can call the rating method just like so. Save it, and then simply hit refresh. So now you're able to see we can rate. So after we have places in here, let's just take a look at you know, a few options. Now this is very general, you may want to start using IDs at this point. But we can set an initialRating and we'll set that to the value of 2. So I'm passing that in. I can save this and we can hit refresh and you'll notice that we have an initial rating of 2. Also you have the onRate callback. So I'm just going to run a function. Once they have rated. And then inside of there, we can say console.log. And then we can say thanks. Something like that. All right so once I've gone ahead and done that we can save this. Go back, hit refresh. Open up the console just like so. And when we click, you'll notice we've got already three thanks because we've initially set it. But however when I click, you'll notice we get another thanks, and so on and so forth. Also, if we wanted to get information such as what did they actually rate this as. I can say get this so this would refer to the current rated system that has been clicked on and then I can run the rating method again and then I can pass in a behavior. So if we take a look at the behaviors and big usage, we can say get rating and we pass that in as a string. So if I say get rating and go back and hit refresh, and then we can go ahead and click. And I'll open up the console again and you'll notice now we get the value. So now it's 4, then it's 5 on this one and so on and so forth. So thank you for watching me in this lesson, and please join me in the next lesson where we'll continue on with the portfolio page.

Back to the top