Drupal Bootstrap - 19 - Creating Article Views - Grid Layout

now we are create a layout using bootstrap 3 this time in fact the process is more or less the same before we create the views let's install one module called image URL formatter to use in this tutorial let's go to module page this is a nice module you can output image URL of the image view directly in views now let's scroll down and install the module let's copy the link back to our site go to module install new module paste link here and install let's enable module as such for URL and turn this on image URL for matter now let's go to views structure views article now we click on page thumbnails we are going to clone from these views since the layout is more or less the same I'll click on this clone page thumbnails I'm gonna rename this to creat layout for format we change it to bootstrap grid our number of columns which was tree apply sure we can choose views we remove the default view report elements to clean it up let's click on image style setting now we remove this default classes and add a wrapper for this image we can create a CSS class have a use D Drupal image apply for title the same thing and check this diff for title maybe we use hash tree right so I applied that body same thing and check this and rub it without div give it to hook our description maybe apply now if you go down and preview let's take a look the structure this time so we have an image wrap by a div and whereas tree we have also description that's great it's much cleaner and tidy now let's go back and continue tough change it to greet only apply for thumbnail change again apply so let's see what else we should update then you lose okay so we are safe save the views let's go to the front page and check it out greet all right I think we have a hand that image itself is not responsive at the moment it does look okay let's take a look at a structure inspect element so we have an image but we have no responsive class here IMG - responsive so we have to add a responsive class to the image other than that it looks fine so let's go back to the view edit view now this I'll add one more view is called an ID node ID apply I'm going to hide this one so I'll type it as hidden ask root from display I'll rearrange drag this to the top apply for image this time for matter if you remember we have install more you call image your alpha matter so you should have one more option here image URL our choose absolute file path which is recommended so I'm going to form my own image element so I'm going to rewrite result provide the output of this field start with angle type it's going to be / node /y and ID right I'm not sure yet what an ID is that so close it and I will use image Palamon source equal to whatever it is and I will give it a class a responsive class of a call it I am G - response if there are many way of doing you know so there's one other way that I can construct my own HTML structure as I like alright I'm showing this to you so that you know how to rewrite result for certain views in the future now let's replace this image URL with a token as Phi this in replacement patterns or use back the same of this view I put it here it's going to output the image path for this one we are going to use the not token which is an ID now it says remember this not that due to rendering order you cannot use fields that come after this field if you need a few not listed here we arrange your fields I mean if I want to use the few to include in this image view this view has to be above view that you are going to render it alright so I will put it back here I think that should be fine apply it and check it out or dozen books let's go back to our view and check image I see so for link image URL - we shouldn't make a link at all put it bad thing apply check again that's great now this thing comes up I check a structure again it's the element so we have a class image responsive you should work this time let's close it let's save that we use oh great you close it and check it out nice now let's go back to the views and do a little changes instead of using fuse we can actually use in thumbnail small as the same I can use image again title for body body apply oh check HTML so you have a caption this all add a thumbnail they are so you can actually combine them together right so let's save the view that's great let's resize the browser has a responsive all right let's look fine inspect element now I would like to change this Greek column from last screen call LG to medium screen which is for MD now we know this module only provide one Gris which is for the last screen tells you but we can all write a theme to change it last week so we close this let's go back to the views and view scroll down on the advanced this tab is one core theme information this click on this now there are many templates here you can overwrite if you haven't learned this yet what we need to alright is this style output let's click on it and check it out scroll down now here the class is actually hot code it's two places one for horizontal another for vertical we can actually overwrite this so let's close it first click one more time now for the sty output color Lee is using this template in both there are many templates you can overwrite here this is on top here it order roughly from the list specific to the most space fee so is from the list specific to the most specific let's copy the name of this template the last one in the list the most specific one so that you will only apply to this space fee views without affecting others control-c or command-c go to our text editor go to sites or themes push wrap sock theme templates now here I add a new file PHP flying far now I'll paste the name what I copy just now I'll finish and go back to our Drupal site now click on skype output this time I will copy the whole thing copy again back to this site and paste it here there are two places we need to change the first one is here for the horizontal okay so I change u 2 MD this time medium here also MD and save the file now after saving this file back to our views I click ok now click one more time we need to scan the template so that you will use the last one now scroll down here this is a very important step now below this one rescan template files now after generating that fast you have the scan now this time from this in BO is already detected and it's using this one it's ours alright so click OK I'll go up and save the wheel now this time we'll check the HTML structure great use MD in SAP let's resize the browser in C so in the medium screen still displaying three columns now you may be thinking since we can all write the theme why not we'll just add more breakpoints ourselves well we can let's do it back to our template now this time I will add one more break point here I call it core - small as m6 space the same thing here as SM - 6 so that our spec there's only two columns on a small screen I will see if our back here refresh our pitch let's try it again inspect element it looks good now let's resize the browser scroll down there's a space here let's inspect the element in C now you will notice the columns are the items are grouped by three one two three group by a roast if they still remain the same and change which we actually ideally it should be grouped by two columns this time right well that's what we expected as this is the module has not yet designed or the support multiple breakpoints at a time of recording but I do believe this feature will be added soon there's some discussion about this need in some issues you can follow up with like this one limited views great settings no breakpoint control or the merger view bootstrap responsive grid at support for different greet column sizes there are all issues and the views bootstrap module you can check it out from time to time and there are some patches provided as well so if you need features do follow up with a post or you can write something about your own issues now back to our Drupal site now if you don't feel like to overwrite a theme you want to restore back to the original settings you can simply delete a template file will close this file click on this and click delete now there's no mode is file like your Drupal site and flash the catch check again inspect to the original in the next tutorial I will show you on how to resolve some other limitation of the current module by creating our own views without using the views to strap module so let's proceed to the next

Channel: Drupal Legoland

Views: 19,345

Rating: 4.8904109 out of 5

Keywords: Bootstrap (Software), Grid, Web Design (Interest), drupal, Responsive Web Design (Industry)

Id: UiKvLgP9nIQ

Length: 14min 46sec (886 seconds)

Published: Mon Oct 05 2015