Silverstripe 3.1 Gridfield page-type design using tabs on front-end. Part 2

Welcome to part 2 of this series. I recommend you check out part 1 before reading this article. In this part we write the theme tabs code, add the specification lines to tab one and  add the video from YouTube to second tab.

1. Lets add the video line for Product.php

add 'Video' => 'Text', to private static $db like so:

private static $db = array (
        'Title' => 'Varchar',
        'Description' => 'Text',
        'Color' => 'Text',
        'Size' => 'Text',
        'Video' => 'Text', //Video
);
and also fields like so:

public function getCMSFields() {
        $fields = FieldList::create(
            TextField::create('Title'),
            TextField::create('Color'),
            TextField::create('Size'),
            TextField::create('Video'),
            TextareaField::create('Description'),
            $uploader = UploadField::create('Photo')
        );
 
        $uploader->setFolderName('Product-photos');
        $uploader->getValidator()->setAllowedExtensions(array('png','gif','jpeg','jpg'));
 
        return $fields;
}

2. Dev/build your code by opening http://your-site.com/dev/build?flush=1 in your preferred browser

3. Now we need to add the video ID. You can find a YouTube video ID by looking at the video URL, the video ID is the part after v= In this article I am using the video: https://www.youtube.com/watch?v=kSmQDld8QTY so the ID for this video is: kSmQDld8QTY

youtube-video-id
4. Now lets add the scripts lines to the themes/yourthemename/templates/Page.ss :

<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/waypoints-sticky.min.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/jquery.tabslet.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/rainbow-custom.min.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/jquery.anchor.js"></script>
<script type="text/javascript" src="{$ThemeDir}/js/vendor/waypoints.min.js"></script>
<script src="{$ThemeDir}/js/initializers.js"></script>

5. Add ProductCategory.ss to themes/yourthemename/templates/Layout/ folder using code:

<h1>$Title</h1>
<% loop Products %>
<div class="Product">
<h2><a href="$link" title="$Title">$Title</a></h2>
<a href="$link" title="$Title">$Photo.SetHeight(150)</a>
<div class="clear"></div>
</div>
<% end_loop %>

6. Add ProductCategory_show.ss themes/yourthemename/templates/Layout/ folder with code :

<% loop $Products %>
<% loop Photo %>
<img class="left" alt="$Title" src="$SetHeight(200).URL">
<% end_loop %>
<p>$Description</p>
<div class="clear"></div>
<% end_loop %>
<div class='tabs' data-toggle="tabslet">
<ul class='horizontal'>
<li><a href=".Description">Description</a></li>
<li><a href=".Video">Video</a></li>
</ul>
<% loop $Products %>
<div class='Description'>
<table style="text-align:left;" border="0" cellpadding="0" cellspacing="0">
  <tr class="$EvenOdd">
    <td>Color:</td>
    <td>$Color</td>
  </tr>
  <tr class="$EvenOdd">
    <td>Size:</td>
    <td>$Size</td>
  </tr>
</table>
</div>
<div class='Video'>
<p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/$Video?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<% end_loop %>
</div>

7. Flush the design changes using ?flush=all  at the end of your website URL.

In next part of this series we will build the code we just added with CSS and also add the 3 tab with its content

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under SilverStripe CMS | Leave a comment

How to change the background of unread posts in phpBB

Today we are going to discuss how to change the background color of unread posts in your PHPBB forums. Now this does take a bit of understand and I assume that you know how to access and edit your templates. For this example, we are going to use prosilver. It’s a default theme that comes with PHPBB. So what do we do? Learn More

Tags: , , , , , , , , , , | Posted under phpBB | Leave a comment

Understanding the Textpattern `category` and `section` tags

admin-ajax

Textpattern CMS uses, amongst other things, sections and categories as methods of managing its content. The significance of sections and categories relates primarily to articles, rather than images or files. Broadly, it breaks down like this: a text article is assigned to a section (mandatory), and can optionally have one or two categories. With this in mind, the statement can be turned on its head: sections can refer to articles, and categories can also refer to articles. Images, files and links can (optionally) be assigned to one category. This article explains some of the things that the Textpattern `section` and `category` tags can do; both of these tags refer to the articles, and not images, links or files, with an exception toward the end. Confused? OK, let’s go. Learn More

Tags: , , , , , , , , , | Posted under Textpattern | Leave a comment