[Article] Building a Movies database - using plugin and some styling
- Replies 35
- Created
- Last Reply
Top Posters In This Topic
-
Jimi Wikman 17 posts -
SC36DC 12 posts -
Davyc 3 posts -
sgimc 2 posts
Most Popular Posts
Jimi Wikman
Updated 😉
Davyc
Fantastic - I cannot say thank you enough; just brilliant 🙂 Â
kodload
I like you post and sharing for modification thing and now I also already bought a license for seft host and now play around with that and will be learned from you often. 😉
- Owner
comment_4284This week I took a look at a plugin I had and decided to style it a bit to fit the image I had in my mind. As it turned out this was very easy and the only thing that stopped me for a while was how to use custom fields. Once that was done it was smooth sailing and quite fun to customize. This is how I did it, so you can do it yourself if you want.
The app that we will be working with is the Movies & TV Shows by Adriano Faria. This is an amazing app that use the TMDB database to fetch data for the movies and TV shows, making adding movies and TV shows fast and fun. Adriano has several similar apps and I also have the Books version that I probably look at later as well.
In order to modify the app we need to go to the themes (customization -> Apperance -> Themes) and click the Edit HTML & CSS button. This takes us to the templates for our theme. There you will have two tabs, one for templates and one for CSS. In both of those tabs we will have a section called "Movies". This is where we find the app templates and the CSS that the app use.
Â
Inside the templates we will focus on a few templates to make the design that we want to make.
We will also work with the CSS that is located in the CSS tab:
Â
Changing the view
The first thing I did was to change the View template. I had the idea that I wanted to have a big background image behind the content. This is a bit tricky since the content is trapped inside a div that have a fixed width. The second thing I wanted was to add more data and I especially wanted to add a custom rating icon for my rating since I will use this as my recommendation site of sorts.
So first I needed to figure out how to add custom fields and decide what fields I wanted. I decided on the following fields:
In order to show these fields I need to use this little piece of code:
I then just change the field_1 to the field I want to display. You can see what the id of your field is by hovering over the edit button in the custom fields view.
I also want to be able to add some conditions, so I only see things if the field is filled in and in order to do that I use this:
With that we can now add our custom fields to the template and start looking at how to style them.
Â
The Backdrop
The backdrop is shown by displaying the file that we uploaded, but it will be constrained within the content and we want to break it out from that. This is where we use a little hack in CSS and I added a class to the div surrounding the backdrop and then added this CSS to it:
.full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top:-15px; min-height:800px; background-image:url(https:{media="528"}); background-color: #294459; background-position:top center; background-repeat:no-repeat; background-size:cover; }This now show the image in full width and I have this idea that I want to add a play button to the backdrop that show a trailer when I click it. There are several ways to do this, but I decided to use the built-in function in Invision Community called ips.ui.dialog. This nifty function allow me to open a modal and either populate it with a link or content inside the same page. As it does not work to refer directly to the url of the trailer, we use the embed code instead and place the content in a hidden div in the document.
In the code I refer to the custom field I created for the official trailer that hold the movie ID. I also wrap the code in an if query, so it only shows if a value is entered. I use FontAwesome to show the play icon and I define the modal to be full view using the data-ipsDialog-size attribute. Currently, narrow, medium, wide and full screen are supported as values for this option.
I then style this with the following CSS:
Â
My Rating
Adding a rating icon to make the rating number look cool is next, and I wanted a circle with numbers inside. This can be done in any number of ways, but I decided on a fairly simple version of a SVG circle using css keyframes for animation.
As you can see in the code I have two versions of the circle, one for when I have added a value and one for when I have not. I had to add a condition to the second version because as I have a number field it will always be 0, which means that it is never empty. This means that the first condition will always be true, even if I have not added anything to the field.
To this I added the following CSS:
Â
As you can see I have variants for the indexBlock and featuredBlock as well as adustment for the category list. This because the images are different for those areas and we need to adjust a bit.
Â
Let's put it all together
With this I now have all the custom fields shown on the page, a backdrop that cover the full width of the page and I have a visual representation of the rating. All that is left is to put things together in the templates and add styles to it. We also need to adjust a bit for mobile view.
With permission from Adriano, I will show you the code I use, and you can copy and paste it into your own movies theme files to get the layout I use here on this site. I have not cleaned these up, so there are some areas that need cleaning, but it works.
Â
Â
Â
Â
Â
Â
I hope this will help get you started building your own Movie database. If you use this for your own website, please drop a link here, so we can see how it turned out. Also if you need help, just drop a comment here or in the forum and I will try my best to help you.
Good luck and enjoy!
View full article
Link to comment
https://beta.jimiwikman.se/forums/topic/4111-article-building-a-movies-database-using-plugin-and-some-styling/Share on other sites