- Read Tutorial
- Watch Guide Video
As I mentioned in the introduction in this section of the course we are going to get into image management mostly going to close off our last set of tasks so we've finished with our Javascript integrations So finish deliver except and we're good to go here. Now if I click and drag image management into our current backlog I'm going to start it up and let's take a look at the tasks that we have. So we're going to first talk about a manual integration of images so how we can simply add images into our application. We've already done this a little bit with our placeholders but we're going to take a little bit of a deeper view then we're going to take a look at the Rails asset pipeline for images and then after that we're going to see how we can actually integrate videos because everything we're going to talk about in the beginning is image based but videos are actually relatively similar to images and we have some nice helper methods available in Rails. They'll let us do all of this so what it will mean is that our home page here in the about me and the contact pages will have a cool looking video background. We'll walk through how we can do that.
So now that we have all of this in place let's switch over to the terminal. Right now we're on master and type in
git status
to make sure we have no changes. So i can say
git checkout -b image-management
Now we can start up the rails server because we are not making changes to say the database schema or something like that and open up Sublime Text. So starting off we're eventually we're going to get into the application CSS file and we're not gonna need this. We need that in the last guide. So let's first start off with seeing exactly where we want to start with images. So if I come right here I'm we're eventually going to have a background image and then eventually a video. But for right now let's talk about the about me page. So what I am picturing and you can completely customize this however you want but what I want is to have a little image right here of myself and those is going to move all of this content over to the right-hand side and have a little thumbnail of myself right there just so my portfolio has that. Now we're going to first start off with a manual integration so I have a URL here just coming in from Facebook with an image of myself. You can pick out an image or roll from anywhere and after. You don't have to worry about having access to an image. If you don't have quick and easy access to it because after we implement this manually we're going to walk through how we can call it straight from the asset pipeline. So if you do not have an image of yourself on your computer then you can just use a placeholder for now and then eventually put yours in. But before we can do that let's start with how we can structure this.
We know simply based on our contact page essentially what we want to do. So we want to create a row and then we want to have a couple of columns in the row. So let's come over to Sublime Text and open up the about me template. I'm going to right here create a div and this is going to be a class row and inside of this, I'm going to put a few more down. This is going to be a div of class col-md-4 and the div. Copy and put this one here. But remember because this is a grid layout we need this to be col-md-8 because we need both our columns to add up to 12. Now let's put all of this content right here and indent it and then our image is going to be right here. But before we do that let's come and hit refresh just to make sure everything is structured right. And yes this gives us a good amount of space for the image. I am gonna come and grab the URL and if you're following along and you want to have a URL based system then you can do this come over here and like I said we're going to start off by doing this manually. So to have a manual call this is going to be an HTML image tag and the syntax for this is just inside of the less than and greater than symbols we are going to have IMG followed by source and alt. Alt is simply something that's there are more for browsers that aren't going to render images or for people that are visually impaired that are accessing the site a screen reader would read this so I could just say somebody like profile image. Then for the source, I can pace in that URL from Facebook or Instagram or wherever you get it from.
So now if you come back over here and hit refresh Oh look at that we have the image but the image is not quite fitting in with where we want it. Now there's a few things that we could do in regards to this one is we could start passing in a size so I could pass a width and this could be something like 300 hit refresh and there you go. Now this is working and the sizing is proper and this is definitely one way of doing it. You'll see this kind of code through all kinds of HTML sites but Rails actually has a little bit better way of doing this. So the way that I'm going to do is you can start by using embedded Ruby. So we're going to start this way and we're going to use what's called a view helper and this is going to be image tag. Now one thing that is important to note whenever I say something like view helper you can almost think of this the same way as our application helper methods so whenever Rails has these view helpers these are really just methods exactly like what we created. One of the differences is these are simply provided to us but they give you some cool functionality. So the very first argument for the image tag is going to be the path to the image and then from there you can pass in arguments and these are named arguments such as width so I can say width three hundred. You could also say alt and say profile image and then end the embedded Ruby. So let's cross out this other image tag.
Now if I come back and hit refresh you can see that nothing has changed and if you right-click on this image and click on inspect you will see that essentially what this is generated is identical to when we were manually placing that in there. So your first question is maybe well why do we need it. Well, one reason is that whenever you have the ability to use a view helper like this it's usually considered a better practice and it usually reads a little bit better and I personally like having an argument kind of syntax. Now the other reason that's actually more important is this gives us a direct line into the Rails asset pipeline. So I am going to get rid of this URL and now if I come in to images and this is an app assets images and click on reveal in Finder then you can see here on the left hand side I placed on my desktop a number of images and videos that we're going to use throughout this section of the course. Right here this is my images directory you can see them in dev camp portfolio app assets images and I'm going to bring over the profile image which is identical to what we have except now it's going to be actually in or app. Because I did that what I can do now is type in profile dot jpeg and you can see that it matches the exact name.
Now if I hit save and come back here I can hit refresh and everything still works perfectly but one of the nice differences is now this image is being called from within our app. Whenever you call an outside image from a URL you run a number of risks especially if you call it from something like Facebook or Instagram. The reason is that you notice this crazy long set of numbers and this letter T with these values. What this means essentially is that this is coming from a CDN and that this URL is going to expire at some point. So this may work right now but a week from now maybe even just a day or even a few hours from now. This URL is going to expire and you're not going to use it or you're not going to be able to use it and you'll just have a broken image link. Tthe reason why is Instagram Facebook and a lot of people do this is one so that people don't go just rip off images from them and use them for streaming their images and videos and also just for some performance reasons. So that is it's typically not something that you want to do. If you can keep your images stored locally with in your application is definitely considered a better practice just because you know the image is going to be there. You also have the added benefit that you're going to be able to use it off line. So if you're working from a spot that has bad cell reception or an internet or you're working from a clean or something like that you want to be able to see your images while you're working on your project and whenever they're stored locally you have the ability to do that.
So that is how you can add images both manually and also by leveraging the rails asset pipeline. I'm gonna say
git status git add . git commit "Updated images for about me page" git push origin image-management
So I'm going to come back and click on manual integration and then Rail's asset management for images so we're making our way this is we're going to definitely be a little bit of a shorter section at least for this part. I'm saving up some of the harder things we're going to integrate for later in the section when we build our own uploading system so that our portfolio can accept uploads and store them on a separate server. And some things like that. So now that we have that in the next guide we are going to walk through how to add a full size image and then a full size video background to our home page.