Website Project MotionPark.nl

This is one of the website project from my friend at Rokin. His name his Martin and he is a a videographer for his own company MotionPark. For this project he had a clear idea what the website should look like. He had already made the design therefore everything was quite straight forward for me.

Website Overview

The website is the compilation of his portfolio. In the homepage will be a glimpse of what his expertises are. Moreover, he divided all of his past previous into 3 main categories. They are Experience, Showcases, and Broadcasting.  In each of this page, there will be a collage of his recent projects belonging for each category.  In addition, he also wants another section to list all of his expertises. These are animation, video editing, sound design, directing, and video sfx.

 

The Challenges

For me personally the challenge was for each of the project he has a specific templates. Every project in his portfolio has description, vimeo video and small picture. Therefore, it is a component based. For this website I decided to use make custom element in visual composer (width the option to select the title) as a results he can place it wherever he wants. These are the templates:

1. Big Project (title, video, description, image) – video on the left.

motionpark-showcases-template-1-2

2. Big Project (title, video, description, image) – video on the right.

motionpark-showcases-template-1-1

3. Small Project (title, video, description) – two per row

motionpark-showcases-template-1-3

 

The Solutions

After searching on the internet, these were the steps:

1. Create a new custom post type with CPT UI plugin, I called this post type “Showcases”

2. Create a custom field with ACF plugin for Showcases post type, this is a filed to placed vimeo embed url. I decided to use the default featured image, description, and title field.

This is what it looks like after the step 1 and 2. As you can see here we have created new custom post type with an extra field. Therefore, It is now very convenient for the user just to placed the embedded vimeo link here.

motion-park-showcases-cpt

3. Make a custom element in Visual Composer plugin.

The Backend

I have another post explaining how to make custom element in visual composer. In brief,  you need a class to extend the WPBakeryShortcode. These are vc_**_mapping element and the vc_**_html element. Please see the example below. In this case I decided to name the class vcShowcase extending the WPBakeryShortcode and for the elements vc_showcase_mapping and vc_showcase_html.

Registering the custom element

The next thing is to define what are these two functions, the first one (vc_shocase_mapping()) is what we will see in the backend. We use this mapping to get input from the user. In this case, what we want is the title of the showcase, whether it is a big or small project (with or without picture), and the position of the video (left or right). We will do this by defining the parameter of the mapping.

Collecting user input

Code line 8-24 is to get all the titles already registered in the databases. In this case, we want all to the post belonging to post type “showcase” and from every post we want to get all the title and ID and placed them in an array. We named this array $lists. Line 34 is to sort the array therefore it is easier to select. We then define the mapping in line 28-70.  There are several fields you can filled in, such as name, base, description, category, icon. But the parameter is the most important, it contains what the user can fill in the backend.

User view

motion-park-backend

 

Here, we except three parameters (title:id, big/small, and position). This is what the user will see in the backend. There, you can select based on the title and also whether it is a big project and where the position of the video. Which is very neat!

The Frontend

The next thing to do is determine what the outcome will be. This is handled by vc_showcase_html(). Depending on the input we filled in, we can do conditional statements. Here is the code for it and return the $html element. We extract all the parameters and make them a variable. Based on the title and the id selected, we can get all the information for that particular posts.

After all that effort, this is what it looks like on the website. What is so special about this element is that the user have freedom to play around with the website because it is very super friendly.

motion-park-final

Finally, please visit MotionPark.nl. This is truly one of the first website that I talk to the client and custom-built it from nothing. I really learnt a lot about WordPress and working with visual composer. While at the same time, also thinking about how user-friendly it is for the owner to update the website in the future. See you in my next post!

 

Leave a Reply