Getting Started

How to Activate BYOD

To activate BYOD for your website, please follow the below steps.

  • Login to your Muvi CMS.
  • In your Muvi CMS, go to Website->Templates->Select Template.
  • In the “Custom Templates” section, click on APPLY BYOD.
  • Once you click on APPLY BYOD, you will see the buttons “DOWNLOAD TEMPLATE FILES” and “UPLOAD TEMPLATE FILES”.
  • First click on “DOWNLOAD TEMPLATE FILES” to download the template files currently used by your website in a zip format.
  • After making necessary changes to the template files as per your requirement, put them in a folder and convert the folder into zip format.
  • Now click on “UPLOAD TEMPLATE FILES” and upload the zip folder (Which contains the modified template files)

Note: Only put html, js, css, jpg, png, gif files in the zip folder

Click on the “Preview Website” button on the top right hand corner of your CMS to see how your website looks after applying the new template.

Anatomy of a BYOD Template

BYOD is built using a powerful template system that enables designers and developers familiar with CSS and HTML to modify the presentation and structure of a website. The basic file and folder structure of a template is as in the below image.

templatestructure

Here is the details about all files and folders those need to be there in the template folder.

  • css: This folder contains all the stylesheet files used for the template.
  • images : This folder contains all type of images used for this template.
  • js: This folder contains all the javascript files used for the template.
  • views: This folder contains all the view files in html format.
    All the view files need to be at the same location as you see in the screenshot.view files provide the base HTML structure that wraps web page content.

    All files inside layouts folder are the commonly used files. E.g : footer.html is for the footer html codes

    layouts/main.html file is the file responsible for the backbone of all pages in the website.

    All other layout file corresponds to a specific page. For example, product.html refers to the page that’s shown when a customer is viewing the details of a product.

    Most layout files contain nothing more than references to individual panels to be shown on a page. These panels are contained in div tags that generally define left, center, or right columns of the page.

Requirement

You need to have basic knowledge in smarty. Our template integration is based on smarty.

BYOD (Bring Your Own Design)

You can design your own template for your website in Muvi.

Templates allow you to customize the look and feel of your websites in Muvi.

This is a reference for working with v.1 (Blueprint) template. You can ask further questions and seek advice in the Support Email.

Reference

Each of the view files in the template uses variables (also called placeholders) to show external content or content fetched from the database (such as the name of a content).

Add New Metadata Field (views/movie/show.html)

To show new metadata fields and values on your website, go to Go to “Website” –>”Templates”–>”Select Template” in your CMS. Click on the “Template Editor

1.In the “Template Editor” go to “Views” –>”Movies“—>”show.html

2.Type the following code to add single metadata field and value to your template. You can add the new metadata field at your desired place. (For example, you can add it below “Play Now” button or above cast/crew etc.)

{$content->”custom_field_unique_id”->field_display_name}
{$content->”custom_field_unique_id”->field_value}
3.Click on “Save” to save the new metadata field name and value
Note: Here the “custom_field_unique_id” is the Unique Key of your new custom metadata field. You can view this by clicking on the edit option of the new custom metadata field. (See Below Screenshot)

screenshot_1

To show the list of custom fields and values at one place, please type the following code at your desired place. (For example, you can add it below “Play Now” button or above cast/crew etc.)

1.In the “Template Editor” go to “Views –>Movies—>show.html

2.Type the following code to add list of custom fields and values at one place to your template.

{foreach from=$content->custom key=k item=custom}
{$custom->field_display_name} : {$custom->field_value}
{/foreach}
3.Click on “Save” to save the new metadata field name and value

 

 When you click on any content on your website, you can see the new metadata fields and values you have added to the content.

Content Summary

Content Id $content->id
Is Episode $content->is_episode
Content Title $content->title
Play Button $content->play_btn
Permalink $content->permalink
Poster Path $content->poster
Is Landscape $content->is_landscape
Release Date $content->release_date
Movie Unique ID $content->movie_uniq_id
Video Unique ID $content->stream_uniq_id
Is PPV $content->ppv
Payment Type $content->payment_type
Is Converted $content->is_converted
Video ID $content->movie_stream_id
Content Type ID $content->content_type_id
Primary Content Type ID $content->content_types_id
PPV Plan ID $content->ppv_plan_id
Video Path $content->full_movie
Content Story $content->story
Genres $content->genres
Content Type Name $content->display_name
Content Type Permalink $content->content_permalink
Trailer Path $content->trailer_url
Is Trailer Converted $content->trailer_is_converted
Trailer Player $content->trailer_player
Casts $conent->casts

Blog Post Page (views/blog/view.html)

This page shows the details for a single blog post.

{$post} : returns the details about a blog post in json format.

                
                {$post = $post|json_decode}
                {$post->post_title}
                {$post->full_desc}                    
                

Blog List Page (views/blog/index.html)

This page shows the list of all blog posts available for the website to show.

{$data} returns list of all posts in json format.

                
                {foreach from=$data|json_decode item=content}
                <div class="col-md-12">
                    <h3>{$content->post_title}</h3>
                    <div class="short_desc">{$content->short_desc}</div>
                    <a href="{$content->permalink}">View More</a>
                </div>
                {/foreach}                    
                

{$pagination} : shows the pagination for this page.

CMS Page (views/page/index.html)

This page shows the contents for a CMS page for the website.

                
                {$content = $content|json_decode}
                {$content->title}
                {$content->content}                    
                

Contact Page (views/site/contactus.html)

This page will show the contact us form for this website.

                
                    <form name="ContactForm" id="contactus_form" method="post" action="{$this->siteurl}/site/contactus">
                        <h4 class="caps">Fill in the form below</h4>
                        <div class="form-group ">
                            <label class="control-label required" for="name">Name</label>
                            <div class="controls">
                                <input type="text" required name="ContactForm[name]" id="contact_name" placeholder="" autocomplete="off" class="form-control" value=""   autofocus />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label required" for="name">Email</label>
                            <div class="controls">
                                <input type="email"  name="ContactForm[email]" id="email" placeholder="" autocomplete="off" class="form-control" value=""  required />
                            </div>
                        </div>
                        <div class="form-group ">
                            <label class="control-label required" for="password">Message</label>
                            <div class="controls">
                                <textarea rows="4" name="ContactForm[message]" id="message" class="form-control" required ></textarea>
                            </div>
                        </div>
                        <div class="form-group ">
                            <div class="controls text-right">
                                <input type="text" id="ccheck" name="ccheck" placeholder="" autocomplete="off" style="display: none;" />
                                <input type="hidden" name="submit-btn" id="submit-btn"/>
                                <button type="submit" class="btn btn-primary btn-green-small" name="contactus" id="contact_us">Send</button>
                            </div>
                        </div>
                        <div id="login-errors" class="error center"></div>
                    </form>                      
                
                

Transaction Page (views/user/transaction.html)

{$transaction} : returns the detail info of a transaction in json format.

You can access the following information for a transaction.

                
                    {$transaction=$transaction|json_decode}
                    {$transaction->transaction_date}
                    {$transaction->order_number}
                    {$transaction->amount}
                    {$transaction->invoice_id}
                    {$transaction->transaction_status}
                    {$transaction->plan->plan_name}
                

Account Page (views/user/profile.html)

This is the user profile page where a user can update his details and profile picture.

                
                            <form id="user-account-form" method="POST">
                                <div id="profile-loading" class="loader"></div>  
                                <h3>ACCOUNT INFORMATION</h3> 
                                <div id="profile-errors" class="error center"></div>
                                <div class="form-group">
                                    <label class="control-label">Name :</label>
                                    <div class="controls">
                                        <input required type="text" class="form-control" value="{$user->display_name}" placeholder="Name" name="name" id="name" />
                                    </div>
                                </div>          
                                <div class="form-group">
                                    <label class="control-label">Email :</label>
                                    <div class="controls">
                                        <input readonly type="text" class="form-control" value="{$user->email}" placeholder="Email" name="email" id="email" />
                                    </div>
                                </div> 
                                <div class="form-group">
                                    <label class="control-label">Password :</label>
                                    <div class="controls">
                                        <input type="password" class="form-control" placeholder="Password" name="new_password" id="new_password" />
                                    </div>
                                </div> 
                                <div class="form-group">
                                    <label class="control-label">Confirm Password :</label>
                                    <div class="controls">
                                        <input required type="password" class="form-control" placeholder="Confirm Password" name="confirm_password" id="confirm_password" />
                                    </div>
                                </div>    
                                <div class="form-group">
                                    <div class="controls">
                                        <button id="update-btn" class="btn btn-primary btn-green-small" type="submit">Update Profile</button>
                                    </div>
                                </div>
                            </form>                    
                

For profile picture update feature in the same page you can add the code below.

                
                                    <img src="{$user_picture}" alt="" title="" class="thumbnail center" /><br />
                                    <a class="link txt-right" href="#" data-target="#avatar-modal" data-toggle="modal">Change Your Picture/Avatar</a>
                <!-- Cropping modal -->
                <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content"  style="height:500px;">
                            <form class="avatar-form" method="post" action="{$this->siteurl}/user/upload_image" enctype="multipart/form-data">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title" id="avatar-modal-label">Change Profile Picture</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="avatar-body">
                                        <!-- Upload image and data -->
                                        <div class="avatar-upload">
                                            <input class="avatar-src" name="avatar_src" type="hidden">
                                            <input class="avatar-data" name="avatar_data" type="hidden">
                                            <input class="" name="fileinfo" id="fileinfo" type="hidden">
                                            <div style="float:left;font-weight:bold;font-size:16px;padding-right:20px;">Upload Profile Picture</div>
                                            <div style="float:left;">
                                                <input class="avatar-input" id="avatarInput" name="Filedata" type="file">
                                            </div>
                                        </div>
                                        <!-- Crop and preview -->
                                        <div class="avatar-wrapper"></div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-primary avatar-save" type="submit">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div><!-- /.modal -->                    
                

Transaction List Page (views/user/transactions.html)

{$transactions} : returns all the transactions done by this user for this website in json format.

                
                    {foreach from=$transactions|json_decode item=transaction}
                            {$transaction->transaction_date}
                            {$transaction->order_number}
                            {$transaction->amount}
                            {$transaction->plan->plan_name}
                            {$transaction->permalink}
                    {/foreach}                    
                

Sign up Page (views/user/register.html)

Keep the form, form field names and ids same as it is bwlow.

                
        <form id="membership_form" name="membership_form" method="POST" class="form-horizontal">
            <div id="loading" class="loader"></div>
            <div id="errors" class="error center"></div>  
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" autocomplete="off" placeholder="Enter Your Full Name" id="name" name="data[name]" required />
                </div>
                <label for="email" class="col-sm-2 control-label">Email Address</label>
                <div class="col-sm-4">
                    <input type="email" class="form-control" autocomplete="off" placeholder="Enter Your Email" id="email_address" name="data[email]" required />
                </div>                    
            </div>   
            <div class="form-group">
                <label for="join_password" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" autocomplete="off" placeholder="Password" id="join_password" name="data[password]" required />
                </div>
                <label for="confirm_password" class="col-sm-2 control-label">Confirm Password</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" autocomplete="off" placeholder="Confirm Password" id="confirm_password" name="data[confirm_password]" required />
                </div>                    
            </div>                          
            <div class="top20"></div>
            {include file='../layouts/listplans.html'}            
            {$payment_form}
            <div class="form-group">
                <div class="col-sm-4">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="over_18" name="data[over_18]" value="over_18" required/>
                            I am over 18 and agree to  <a class="link linkcol" href="{$Yii->getbaseUrl(true)}/page/terms-privacy-policy" target="_blank">terms</a>
                        </label>
                        <label id="data[over_18]-error" class="error" for="data[over_18]" style="display: none;"></label>
                    </div>
                </div>
            </div>            
            <div class="clear"></div><br>
            <div class="form-group ">
                <div class="controls">
                    <div class="pull-left">
                        <button id="register_membership" class="btn btn-primary" onclick="validateUserForm();">Register</button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>                   
            <span class="error" id="plan_error"></span>
        </form>                          
                

If your website has any membership plans set up by admin, the membership plans can be shown in the file views/layouts/listplans.html.

{$payment_form} : will show the payment form as you have set up from your CMS.

Forgot Password Page (views/user/forgot.html)

This page will show the form to recover your password if you forgot.

                
        <form name="frmRP" id="frmRP" method="post">
            <div class="form-group ">
                <label class="control-label required" for="login_email">Please enter your email to reset your password</label>
                <div class="controls">
                    <input type="text" name="email" id="reset_email" placeholder="Enter Your Email" autocomplete="off" class="form-control" />
                </div>
            </div>    
            <div class="clear"></div>
            <div class="form-group ">
                <div class="controls">
                    <button type="submit" class="btn btn-primary btn-green-small" name="login_submit" id="login-btn">Submit</button>
                    <div style="float: right; margin-top: 10px;">Remember Password? <a class="link txt-right" href="{$Yii->getbaseUrl(true)}/user/login">Login Here</a></div>
                </div>
            </div>
            <div id="reset-errors" class="error center"></div>
        </form>                    
                

Login Page (views/user/login.html)

You need to keep the form, form field names and ids same as it is there.

                
                <form name="login_form" id="login_form" method="post">
                    <div id="login-loading" class="loader" style="display: none;"></div>
                    <h4>ALREADY REGISTERED?</h4>
                    <div class="form-group">
                        <label class="control-label required" for="username">Enter your Email Address</label>
                        <div class="controls">
                            <input type="email" required name="LoginForm[email]" id="username" placeholder="Enter Your Email" autocomplete="off" class="form-control" value="" />
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="control-label required" for="password">Enter your Password</label>
                        <div class="controls">
                            <input type="password" required name="LoginForm[password]" id="password" placeholder="Password" autocomplete="off" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="controls">
                            <label class="control-label" for="LoginForm_rememberMe"> 
                                <input name="LoginForm[rememberMe]" id="LoginForm_rememberMe" value="1" type="checkbox" /> &nbsp;Remember me on this computer</label>  
                        </div>
                    </div>            
                    <div class="clear"></div>
                    <div class="form-group ">
                        <div class="controls">
                            <button type="submit" class="btn btn-primary btn-green-small" name="login_submit" id="login-btn">Login</button>
                            <div style="float: right; margin-top: 10px;"><a class="link txt-right" href="{$Yii->getbaseUrl(true)}/user/forgot">Forgot Password?</a></div>
                        </div>
                    </div>
                    <div id="login_errors" class="error center"></div>
                </form>                       
                

Search Page (views/search/index.html)

This page shows all the results matched with the searched key.

            
            {if $item_count > 0}
                {include file='../layouts/listitem.html'}
            {/if}

{$item_count} : returns total number of matched records.

Pagination


                <div class="product-pagination text-center">
                    <nav>
                        {$pagination}
                    </nav>
                </div>                
            

Search page content list (views/layouts/listitem.html)

This page view of each item in the search result page.

Star/Cast Page (views/star/show.html)

This page shows the details about a star.

{$item} : returns the star details in json format.

                                
                                    {$item = $item|json_decode}
                                    {$item->name}
                                    {$item->celebrity_image}
                                    {$item->summary}

{$item->name} : returns the name of the star.

{$item->celebrity_image} : returns the image of the star.

{$item->summary} : returns the description/bio of the star.

Content Page (Single content type) (views/movie/show.html)

{$item} : returns the current content’s data in json format

{$casts} : returns the casts for the content

{$directors = $casts->directors} : returns the directors for the content

{$actors = $casts->actors} : returns the actors for the content

Content Page (Multiple content type) (views/movie/showparent.html)

{$item} : returns the current content’s data in json format

{$casts} : returns the casts for the content

{$directors = $casts->directors} : returns the directors for the content

{$actors = $casts->actors} : returns the actors for the content

{$all_series = $allseries|json_decode} : returns all the series for the content

To show the episodes for the content and series dropdown

                                <select id="series" name="series">
                            {foreach from=$all_series item=series}
                                <option value="{$series->series_number}" {if $default_series == $series->series_number}selected="selected"{/if}>Series {$series->series_number}</option>
                            {/foreach}
                            </select>
                            <input type="hidden" name="content_id" id="content_id" value="{$item->movie_id}" />
                            <input type="hidden" name="default_series" id="default_series" value="{$default_series}" />
                            <div id="episodes"></div>

Content List Page (views/media/list.html)

This is the page that render the content list page.

{$contentTypeInfo[‘display_name’]} : this returns the name of the content type.

{$contentTypeInfo[‘permalink’]} : this returns the permalink to the content type page

Order By Form

{$orderby} : this returns the currently active sort parameter

{$item_count} : this returns the total number of contents

                                <form action="{$this->siteurl}/{$contentTypeInfo['permalink']}" method="get" name="listingSearch" id="filterFormPopup">
                                        <fieldset id="body">
                                            <fieldset>
                                                <label for="email">Sort By</label>
                                                <select name="orderby" id="order_filter"  class="form-control">
                                                    <option value="lastupload" {if $orderby == 'lastupload'}selected="selected"{/if}>Last Uploaded</option>
                                                    <option value="releasedate" {if $orderby == 'releasedate'}selected="selected"{/if}>Release Date</option>
                                                    <option value="sortasc" {if $orderby == 'sortasc'}selected="selected"{/if}>Alphabetic A-Z</option>
                                                    <option value="sortdesc" {if $orderby == 'sortdesc'}selected="selected"{/if}>Alphabetic Z-A</option>                                           
                                                </select>
                                            </fieldset>
                                            <input type="submit" class="btn btn-primary btn-green-small pull-right"  value="OK" />
                                        </fieldset>
                                    </form>

Contents (views/layouts/listitem.html)

In this file you can show the content view for the list page.

Parameters you can show in this page has been listed in bottom of this page.

Pagination

{$pagination} : this returns the pagination for this page

                                <div class="product-pagination text-center">
                                    <nav>
                                        {$pagination}
                                    </nav>
                                </div>

Home Page (views/site/index.html)

This file is used to render the contents for home page.

This page has mainly shows banners and featured sections.

Banner Section

Login to your Muvi CMS and go to Website->Templates->Banners.

bannersetup

You can upload banners and add the text to be shown for banner.

There you can also enable/disable button for sign up with custom text.

{$banner_sections} : This returns your banner section with the banner image, banner text and sign up button.

{foreach from=$banner_sections|json_decode item=banner_section}

{foreach from=$banner_section->banners key=counter item=banner}

{$banner->banner_full_path}

{$banner->banner_text}

{$banner->join_btn}

{/foreach}

{/foreach}

In the above code sample above

{$banner->banner_full_path} used for the banner image full path

{$banner->banner_text} used for the banner text

{$banner->banner_full_path} used for sign up button on banner

Featured Sections

Login to your Muvi CMS and go to Website->Templates->Home Page.

featured-setup

You can add as many featured sections as you want by clicking Add Featured Section button.

After creating featured section you can add featured content by clicking Add New button.

In the pop up you can type the name of the content, then you can see a suggestion for your search. You can select and save the content as Featured content.

To show the featured sections and content in your template you can follow the below sample codes.

{foreach from=$sections|json_decode item=section}
{if $section->total > 0}
{$section->title}
{foreach from=$section->contents item=content}
{$content->poster}
{$content->title}
{$content->play_btn}
{$content->permalink}
{/foreach}
{/if}
{/foreach}

In the above code sample
{$section->title} : Title of the featured section you have set.
{$content->poster} : Poster for the featured content.
{$content->title} : Title of the featured content.
{$content->play_btn} : Play button action.
{$content->permalink} : Link to the content page.

Global Variables

You can use the global variables in any of the view files. Here are all the global variables available for a BYOD template.

  • {$this->siteurl} : Full path of your website or link to home page.
  • {$Yii->theme->baseUrl} : Full path to active theme folder.
  • {$this->pageTitle} : Current page title.
  • {$this->pageKeywords} : Current page keywords.
  • {$this->pageDescription} : Current page description.
  • {$this->favIcon} : Fav icon for the website.
  • {$this->siteLogo} : Logo for the website.
  • {$this->studio->name} : Name of the website.
  • {$this->user_menu} : User account related menus like login, logout, sign up, profile etc in json format.
  • {$this->main_menu} : Main menu of the website in json format.
  • {$this->studio->fb_link} : Link to your facebook page as set from your admin.
  • {$this->studio->tw_link} : Link to your twitter page as set from your admin.
  • {$this->studio->gp_link} : Link to your google plus page as set from your admin.
  • {$this->Footerlinks} : CMS pages menu of the website in json format.
  • {$this->copy_text} : Copyright text of the website.
Contact us for any further assistance/queries on BYOD template customization.