Theming Views in Acquia Site Studio

hi everyone in this video i'm going to walk through the process of actually um or briefly walk through the process of styling or or theming out a view using standard drupal features like preprocess functions and tweak templates and then i'll contrast that with how you can actually easily theme out a view using acquia camp site studio so for this video i went ahead and set up a demo site that we use here at aqua it's just got some content on there but we're actually going to style out a specific view i'm going to go into this articles page or url here and this is the view we're actually going to be building it's all done through cohesion and we're actually i've got one set up here and this is how it starts off it's just a standard view with the whole node and everything turned on so we'll start from there go ahead and log in and we're logged in i i actually have two links here this is the end what we're going to be striving for something similar we've got a little bit of uh animation treatment and then just the simple you know laying out of the actual teaser i'm going to click on the other link here which is just the standard view built off of just drupal features so it's just it's just a view so we'll go in there and we're actually going to edit it and this is something that's very familiar for most of you which is just a standard view it's an article unformatted list content and then i've got this view mode that i created called teaser site studio now one of the things that any developer or themer is going to do is check out the preview and you can see here everything's sort of previewed out and we can see that right now we've got the author information is being put in there it's a full body field that's coming in we even have the add new comments um just as a refresher let's go ahead and jump into the article content type and manage that display this is where all that sort of magic happens so we go into the manage display and again this is all through just standard drupal functionality i've got all these teasers already turned on or not teasers the view mode's already turned on and if i scroll down you can see i've got this teaser site studio that i created so i just need to turn that on so i'm going to save that it's now that view mode is now available so in our view that we were looking at earlier we can actually use this as so by default it's going to have you know the body the tags the comments and we can change those things out and it's pretty simple we just start dragging things into the disable like i don't want to show that i will want to show my subtitle i don't want to show the links so now what we have is basically just the body and the subtitle and let's go ahead and change the default so that it's you know just a summary and we'll trim that down to maybe you know just 150. let's go ahead and save that and if we go back to the actual site and look at that view you can see we've already sort of just within the gui we've actually controlled what's being laid out now one of the things that's hard is this piece here is we have the author being shown that's not actually in that view mode it's actually spread out so if we go to article and we go the display setting and then we turn that off now but this is going to affect all of the content types so now you can see it's sort of changed and we've got sort of our teaser and then the title and then this is that subtitle piece but it's all this is not the way it really looks or the way we want it to look but it's a start it helps us sort of get things together but that just one aspect of theming out something within drupal or steaming out of view within drupal so hopefully that helped refresh when you're actually building out the view or styling out the view using just drupal features what you can do you can also do some inline styling and add classes and things like that but it starts to get pretty complicated when you're trying to build something like this so in order to build something like this you would have to go into the twig templates and start defining and overwriting the tweak templates themselves so let's see what that looks like again just as a refresher to see what what is required using just drupal sort of traditional approaches to theming out a view looks like right now this is using a specific theme so this is the theme that will actually from a code perspective want to put our tweak template overrides you can also create a custom module we're going to keep it simple just because this is just sort of a refresher let me jump over into my ide here and within the actual code base itself i've got my themes and this is the actual theme that's being implemented right now so i've got some templates already in here what you'll typically do is you know create a new folder we'll call it views and then you'll start putting all of your override templates in here so where the override templates they're in core modules views and templates and here are all the core views that come from core so you know i'll just take all of these and copy them so i went ahead and copied and pasted all of them into my theme or the theme that's being implemented so right now these are actually overriding the actual site itself and to see how that kind of works again we're not going to go too much into the detail of this but if you recall in our view we use the unformatted list format and the teaser site studio content so now we know what we're using for this particular site let's go back to the site itself so i already went ahead and enabled the twig debugging functionality for drupal which then basically allows us to go and view source code here and see the tweak templates that are in there so we know that this is a view and we can kind of see and go through and so this is typically what what you would have to go through is come in and see okay this is a node um we actually want to view the twig for the views itself so i've already gone too deep in so maybe i'll go up a level and click on that and now we can see this is the view view html and then as you dig in deeper you'll find the views view unformatted so this is the one actually that we can start with so if you go back to the cloud ide itself we can go into our theme and this is where we had copied all of our templates and here's that views view unformatted so we can come in here and we can override the standard one but typically you're going to want to you know rename it where it's views view unformatted dash dash and then the name of the view so in our case it's um article site studio so we would have that article site studio so anyways there's all these naming conventions which you're probably already familiar with i'll just throw in some standard html and i save that we come into our articles which then allows us to refresh this page and we should see our text in there and there you can see the text that shows up i was here so that's typically how it go now there's a lot of caching issues you have to turn off it gets really slow sometimes in order to capture some of these changes so this is this is the traditional approach so jumping back into the actual site itself now we're going to actually theme everything out and see what it looks like to actually create these twig templates or modify or override these quick templates directly within the user interface of drupal itself using aqueous site studio there are a couple things that we're going to have to do i'm going to start off sort of with the view itself so let's go back into the view and i want to point out a few things the first is this unformatted list here now i'm going to go ahead and click on that and i want to show you a few things you notice that there's blazi grid grid html list leaflet table unformatted and then there's this view template so if i click on that view template basically this is saying let's go ahead and use site studios view templates that we create so i'll apply this and at this point we get another option or page that decides which locations there are now i've already pre this particular demo has some view templates already created one of them is called articles i'm actually going to create our own sort of articles view template so let's go ahead and do that real quick so we'll jump out of here we'll go to site studio go to templates and then go to view templates and these will look familiar these were basically the ones that were in that drop down that we just saw earlier articles article sliders and we're going to create a new view template and it's actually pretty easy you just come in we'll go into ad views template we'll call it article site studio and with this layout canvas this is where everything kind of gets um easy because it's all just drag and drop into this drop zone area you get a few views here um i like to use this listview it's a little bit easier for me to see and we can search for stuff so i'm going to say view so some of the elements in here these are the key elements that you're actually going to be using to build out your view so the first thing we need to add is a view container that's going to be sort of the outer sort of template piece that we're defining so that's the view container and then we're going to put in the view content and we're actually going to put in a view item so there's another piece here that we actually have to put in which doesn't show up because i have it filtered and it's called a pattern repeater so i drop this pattern repeater in here and what that does it's going to loop through all the different items now remember the view is actually a group of rows and a row is actually a group of fields which is defined by the view mode that you choose so actually this view item is the actual row itself or the fields that are going to be displayed and it's going to repeat through each of these so we've actually built everything all out now each of these has its own settings and it shows what they are we can see the default view modes and things like that that's in there so let's go ahead and click on each of these so you can see each one has its own settings you can change and you can add different things on there now that we have our basic structure for our view template we're going to go ahead and save and continue we can actually now go back to the actual view itself and we can set the template that we want to use so i'm going to go back to the view and i'm going to click on my settings and we now see our article site studio so i'm going to click on that and i'll apply it and it's now set so that we can see it i'm going to go ahead and create a couple tabs here so we don't have to keep going back and forth but i'll save this first and you see there hasn't been much of a change because it's actually just showing the view it's coming through it's actually just kind of going through the processes we have to change a few things on that as we start moving forward so here's where the real fun starts to begin let's go back to our templates and i'll put that in its new template so we don't have to go back and forth we can just kind of refresh it and we're in our site studio notice that each of these headed settings the view item itself we can come in and we can choose the drupal view mode that we want it to show so i'm going to go ahead and change this to our teaser site studio this is now tied into that you're not going to see a huge difference but notice that one of the things is we can actually now start applying the various factors to it so i want to go ahead and put a container so what i'm going to do is i'm actually going to put this inside of a container and a container is essentially a div so that div is actually going to come in and i'm actually going to make it say a style so these are this is when you can start applying our css style so let's say we just want to put a box around it so put a border we'll say the border style and the border color oh we'll go ahead and put a border width and maybe even a radius that's in there as well so now we have all these different options that we can start applying to it so we can say equal width it's all going to be you know maybe two pixels um let's go ahead and put a rounded corner on that and then we'll make it uh dashed for whatever reason and we'll apply that so now i've just just like that i've added sort of some treatment to it we'll save it and now we see that we've put our entire thing inside of this treated box with what we just described now see how everything's all bumping together what if we want to do something internally inside of the actual thing itself so we can come into the canvas and just say okay let's do the same thing but let's do it for inside so if i can i can go container and i can put my individual row inside of there and do the same thing we're going to come in and this time we'll we'll add a style to it we'll do the same thing we'll do some some borders that's the easiest i'll just add all those different things we'll say two a bigger radius on there and then instead we'll make it grooved but i don't even know what that looks like so we'll apply and then again i'll just save that it's been saved and we'll refresh our and now we've got the grooved boxes internally so you can see just right now we did a bunch of stuff we actually modified the tweak template itself and then we also applied some styles to it without having to really go to the code and recheck and do all the paddings we're doing it straight in this gui and we're actually seeing it happen live at the same time we can now go ahead and maybe change this so that we space it out a little bit differently so let's go ahead and remove this container i don't really need that well let's go ahead and keep that in there now we know that this is actually inside there is a row for columns so just like bootstrap we can actually drop in a row for columns and i can put my view item inside of these different columns and it's going to repeat them so i can say there's my row and here's my column and then i drop my view item inside my column which means i can now get rid of that and so now i've got this pattern repeater that's going to create these columns why did i do that because what if i wanted it to tile out so i can click on this column and i can say well i want the width to be 4 which is going to be 3 of them and i'll apply that so now we've got a view item that's going to show up three in these sort of columns i'm going to save that and we've got this sort of in there now this is interesting i wanted it actually to tile and i actually put my containers improperly so let's go ahead and fix that so what i actually really needed to do was and then put my pattern repeater in that row so now i've got this pattern repeater in there and then i put my columns inside and let's go ahead and save that and we now have our our row for columns things are now starting to kind of take shape you can see it's now starting to style out but we really can't tell which is which right now so let's go ahead and maybe put some shading around that as well so same process i can put a div on there i've got my contain my view item is now inside of a container and i'll apply some treatment to it this time i'll just apply a background we'll just put a little bit of a background and i'll choose that for whatever reason and then apply and see what it looks like so now we're starting to see all the different things that are happening things are kind of hidden in here because i chose the wrong color but there's not some there's some spacing issues that's going on here we can start playing around with those pieces so that's sort of how you can start laying things out within your actual view template and how easy it is to start changing things around now for the last part of this video what i wanted to show is how easy you can just change everything so that it looks really nice i already have a pre-built actual teaser view which is this one and we can jump into it real quick at the end of this so you can see so now i've got that saved and i'm going to save it and boom we've got that teaser view that's already set up and we've got our our styling the way we want it to be you're probably wondering how just by changing that view mode did it change it so that it's all styled out nicely well the teaser mode is actually a template itself it's a node template and if we go into site studio and run into um and go to our content types we can see here that that teaser template looks like this it's the container which is um let me go to the page so you can kind of see there's this first container in here that's the the image itself this is the inline date there's that inline date and then finally the heading which is down right here now one of the things that you'll wonder is like how is all the styling site studio will actually put some classes in there and you actually have some base classes that have sort of this animation and the css transitions already in there so let me just show real quick what happens if we change some of these things around so let's say um i just want it to be flipped around so now i've got my article on the top and then the container image on the bottom i'm just going to save that and now we've got it on the top and we've got it on the bottom what does the styling look like so in this case here we've got sort of this hover effect that's going on if we inspect that i can quickly see okay it looks like it's some sort of um hover effect which is this probably this before not before but the the image class itself because i think only the image itself is being um affected so you can see there's this this style the coh style link card hover image these are defined through our styles so if you go to custom styles we'll probably see something like that in there if not it'll be in the base styles actually i think it's actually the coh style link card yeah it's this one here so if we went to that style link we can come in and we can see yeah there's this hover image and here's the scales so 1.1 and 1.2 so right now it's 1.1 and 1.2 we can actually probably lower it so we can say and it'll be a slower let's just see what happens point one and see how it changes so we saw that change really quickly and you can see well hopefully this was a good um intro into what the differences are and how easy this aqua stype studio can make it for you when it comes to thieving out views

Channel: Acquia

Views: 172

Rating: 5 out of 5

Keywords: Acquia Site Studio, Acquia, Blog

Id: DQN6TGLPZ-4

Length: 24min 39sec (1479 seconds)

Published: Tue Aug 10 2021