Page templates

Page templates

July 9, 2009  |  documentation

In BigFeature there are several custom page templates, to change the look of pages. The default pages contains the sidebar, but there is a template to remove the sidebar. The about and contact pages on this demo site is using this template. The look of the pages is created with html code, so therefore the code will be listed here so it’s easy to copy and paste to get the same layout.

pagetemplate-01Image on the left is showing the “no sidebar” page template is chosen.

 
About Page Code | View
<div class="col1">
<h1>We are a colorful bunch</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui. Fusce ante leo, mattis vitae, lobortis vitae, cursus porta, nisl. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. Aliquam erat volutpat. Quisque iaculis velit sollicitudin pede. Etiam arcu mauris, interdum id, placerat at, convallis vitae, orci. Etiam magna. Donec at sapien quis dolor adipiscing ullamcorper. Morbi vitae arcu. Aliquam vitae arcu porta erat interdum fringilla. Nullam eu ipsum vitae est molestie mollis. Donec egestas consequat enim. Phasellus tincidunt ante rutrum urna. Suspendisse faucibus.</p>

<h2>Lorem ipsum dolor sit amet.</h2> 
<p>Vestibulum non lectus ac enim consectetuer consectetuer. Cras tortor tortor, aliquet ac, sagittis non, adipiscing nec, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis convallis. Quisque at ipsum sed lacus porttitor sollicitudin. Fusce lacus ipsum, euismod ac, euismod auctor, mattis eget, lacus. Aliquam mi. Nulla elementum, risus ac varius laoreet, purus neque porttitor odio, a auctor massa lacus in neque. Duis et purus.</p>

<h2>Sed sed erat. Sed pharetra.</h2> 
<p>Curabitur interdum neque sit amet nibh. Vestibulum vitae risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tempor. Fusce sed purus. Maecenas enim dolor, facilisis in, cursus non, accumsan quis, odio. Nam blandit scelerisque erat. Curabitur auctor lacus quis ligula. Donec quis ipsum. Duis justo arcu, luctus sed, dictum non, blandit ut, erat. Vivamus varius consequat eros. Aliquam fermentum nulla sed elit. Nunc cursus sapien ut est. Fusce ultrices. Pellentesque placerat massa eget nisi.</p>
</div>

<div class="col2">
<div class="box">
<h6>Sed mauris lorem</h6>
<ul class="checklist">
<li>venenatis ut, lacinia ut</li>
<li>Maecenas pede metus, ultricies non</li>
<li>Curabitur dapibus vulputate nibh.</li>
<li>Quisque eget lectus ut ipsum luctus facilisis.</li>
<li>Mauris convallis leo sed risus. Phasellus sit amet sapien ut velit aliquet vulputate.</li>
<li>Praesent hendrerit tempus risus. Donec sed purus.</li>
<li>Pellentesque id nisl. Etiam velit.</li>
</ul>
</div>

<h2>Duis arcu tortor</h2>
<p> suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui.</p>

<p><a href="/bigfeature/wp-content/uploads/2009/06/flowers2.jpg"><img src="http://www.vfxdude.com/bigfeature/wp-content/uploads/2009/06/flowers2.jpg" alt="flowers2" title="flowers2" width="269" height="257" class="alignright size-full wp-image-53" /></a></p>
</div>


<div class="col1"></div>
<div class="col2"></div>

This is for a 2 column layout.


Contact Page Code | View
<div class="col1"><h1>We are located in the Docklands</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<hr>
<h2>Contact Form</h2><br>
[ easy-contact ]
</div>
<div class="col2">
<p><a href="http://www.vfxdude.com/bigfeature/wp-content/uploads/2009/06/map.png"><img src="http://www.vfxdude.com/bigfeature/wp-content/uploads/2009/06/map.png" alt="map" title="map" width="382" height="515" /></a></p>

<h2>Vestibulum purus quam</h2>
<p> scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.</p>

<p> Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui.</p>

<h2>Aenean ut eros et nisl sagittis vestibulum.</h2>
<p> Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>

<p> Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit.</p>
</div>


[easy-contact]

This is the code for the easy contact plugin. Any other contact plugin can be used, but styles for this one has been added to the theme.

Frontpage Code | View
[ bfslider height="348" ]
[ bfthumbs category="portfolio" numposts="3" ]

Remove the space after the opening bracket and before the ending bracket for it to work (must have it like that to not trigger the shortcode).

Frontpage3 Code | View
<div class="feature"><img src="http://www.vfxdude.com/bigfeature/wp-content/uploads/2009/08/fp-banner-design.png" alt="fp-banner-design" title="fp-banner-design" width="848" height="250" /></div>

<div class="col1">
<h1>Welcome to Big Feature</h1>
<p class="intro">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p><span class="dropcap">I</span>n enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>

<p> Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. </p>
</div>

<div class="col2">
<p> Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. </p>

<blockquote class="alignright">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</blockquote>

<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>

</div>
<div class="clear">&nbsp;</div>

<h5>Latest News</h5>
[ bfthumbs numposts="3" ]

<h5>Featured Posts</h5>
[ bfthumbs category="featured" numposts="3" ]

<h5>Latest Work</h5>
[ bfthumbs category="portfolio" numposts="3" ]


Thumbnails Template

This template shows posts from a specified category as thumbnails. This template can be used for for a portfolio or a frontpage. The Category ID is specified in the custom field with name: category and ID of the category as value (the category ID can be found by hovering over a category link in the Categories section (under posts) and the ID will be in the status bar of the browser). From version 1.2 the category name can be used instead of the ID. In version 1.1.2 2 new custom field variables was added, numposts (limit number of posts shown) and showposts (number of posts per page).

pagetemplate-02Image on the left is showing the “thumbnails” page template is chosen.

 

pagetemplate-03category ID or Name is necessary to list posts.

Frontpage2 code | View
<div class="mb40" style="border: #eee 1px solid;"><div class="alignleft mr40"><img src="http://www.vfxdude.com/bigfeature/wp-content/uploads/2009/07/fruit.jpg" alt="fruit" title="fruit" width="283" height="323" class="size-full wp-image-705" /></div>
<div class="mt40 mr20">
<h1>At vfxdude we speak in code and dream in <span style="color:#660000">colors</span></h1>
<p class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. <a href="#">Check it out  &raquo;</a></p> </div>
<div class="clear"></div></div>

<div class="col1">
<h2 class="pt0 mb0">beautiful websites</h2>
<h1>We create the web</h1>
<p class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque. Cras venenatis ultrices nulla. Quisque at dui.</p><p>Fusce ante leo, mattis vitae, lobortis vitae, cursus porta, nisl. Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non eros suscipit egestas. Aliquam erat volutpat. Quisque iaculis velit sollicitudin pede. Etiam arcu mauris, interdum id, placerat at, convallis vitae, orci. Etiam magna. Donec at sapien quis dolor adipiscing ullamcorper. Morbi vitae arcu.</p>
</div>

<div class="col2">
<h6>What we can do for you</h6>
<ul class="checklist">
<li>venenatis ut, lacinia ut</li>
<li>Maecenas pede metus, ultricies non</li>
<li>Curabitur dapibus vulputate nibh.</li>
<li>Quisque eget lectus ut ipsum luctus facilisis.</li>
<li>Mauris convallis leo sed risus. Phasellus sit amet sapien ut velit aliquet vulputate.</li>
<li>Praesent hendrerit tempus risus. Donec sed purus.</li>
<li>Pellentesque id nisl. Etiam velit.</li>
<li> Donec posuere vulputate arcu.</li>
</ul>
</div>
<div class="clear"></div>
<br/>
<h5>Our latest work</h5>

The portfolio (first one) use no html code at all. There is only a default image (can insert a big image and put a link around it too) and a category ID. The frontpage example (first one) is using the bfslider at the top and the thumbnails template below.

The thumbnails shortcode

In version 1.1.2 a thumbnails shortcode was added. It inserts thumbnail posts into a page/post (add it to the post/page editor in the html view). Demo.

Here’s the shortcode:

[bfthumbs category="featured" numposts="6" sidebar="true"]

The Parameters
category
The slug or ID of the category to show posts from.
tags
The tag(s) (comma seperated) to show posts from.
id
The ID(s) (comma seperated) to show posts from (page ID’s allowed).
numposts
The max number of posts to show (default: 3).
showposts
The number of posts to show per page (must have wp-pagenavi or “wp page number” plugins installed).
sidebar
Set this to true if there is an sidebar in the page/post.
orderby
What to sort the thumbnail posts by. Possible values: author,date,title,modified,menu_order,parent,ID,rand,comment_count (default: date).
order
Sort order. Possible values: ASC,DESC (default: DESC).
post_status
The status of the posts to be shown. Possible values: publish,inherit,pending,private,future,draft,trash (default: publish).
text
Set it to false to hide the text.
title
Set it to false to hide the title.
meta
Set this to true to show the date and number of comments.
textdate
Set this to true to show the post date as a part of the text body.
width
Thumbnail image width in pixels.
height
Thumbnail image height in pixels (the shortcode overrides the theme settings thumbnail height).
numcols
Number of columns (must be adjusted together with the width).
marginright
Margin right of each thumb post.
marginbottom
Margin bottom of each thumb post.
popup
Set this to true to add shadowbox popup on the thumbnail image. Shadowbox must be installed. Demo
cufon
Set this to false to turn off cufon for the post title (if cufon is enabled in the theme settings for H2).
hideimage
Set to true to hide the thumb image.
removelinks
Set this to true to remove all links. It also removes the readmore, so the whole text will be shown.
zoomcrop
This overrides the zoomcrop in the theme settings. Possible values: topleft/center/false. Read more about zoomcrop here.
offset
The number of posts to skip. offset=”1″ skips the first post.
class
Change the heading size when cufon is disabled. Possible values: smallheading and mediumheading. Custom classes can also be added.

If the category is skipped the newest blog posts will be shown. In version 1.3 a sidebar parameter was also added, making it possible to use this shortcode in pages with sidebar or in the blog.

A page shortcode was also added in version 1.1.2. It can be used to insert pages into posts (designs, signatures, author info etc.). Here’s the shortcode: [bfpage id=6].

Image Gallery

The image gallery example is using the “no sidebar” template and the nextgen shortcode in the body text, like this: [nggallery id=4] (where the number is the ID of the nextgen gallery). Here are the steps you needed to get the gallery looking like on this site.

  1. Install the Nextgen Gallery plugin and enable it.
  2. Install the Lightbox 2 plugin (Version 2.8.2 By Rupert Morris) and enable it.
  3. In the Gallery-Options deactivate the “Activate PicLens/CoolIris support”.
  4. In the the Gallery tab in Options deactivate the “Show ImageBrowser”.
  5. In the Effects tab in Options choose Lightbox.
  6. In the Thumbnails tab in Options set the “Width x height ” to 150×150.
  7. Create a new gallery and upload images.
  8. The shortcode will be listed in the top when creating the gallery (but the ID can also be found under “Manage Gallery”).
  9. Create a page, choose the “no sidebar” template, and enter the shortcode into the body text.

Portfolio Template

This template shows posts from a specified category as portfolio images. Here is an example of this template: portfolio2. The Category ID is specified in the custom field with name: category and ID of the category as value. From version 1.2 the category name can be used instead of the ID. A couple of links can be added with custom fields (illustrating images below). In version 1.3.3 a new custom field variable was added, noresize, set it to true to prevent image resizing. Another custom field parameter is showposts, it sets the number of posts per page. In version 1.3.4 2 new custom field parameters was added, imagewidth and textwidth. These can be used to set the width of the portfolio image, and also the text area.

pagetemplate-04Image on the left is showing the “portfolio” page template is chosen.

 

pagetemplate-03category ID or Name is necessary to list posts.

pagetemplate-cf-galleryAdds a Gallery link to the portfolio. Format: Nextgen Gallery ID,Gallery Name (optional).

pagetemplate-cf-websiteAdds a website link to the portfolio. Format: URL,Name (optional).

Blog Posts template

This template was added in version 1.3 due to many requests for a functionality that limits the blog to a category, and then have many post pages instead of one. This was possible with adding categories to the navigation, but it lacked some functionality the blog had. With this template you add a category as a custom field and it lists all posts paged by a showposts custom field parameter or the wordpress default (same as the main blog).

pagetemplate-blogposts-01 Image on the left is showing the “Blog Posts” page template is chosen.

 

pagetemplate-blogposts-02category ID or Name is necessary to list posts.

Photoblog template

This template was added in version 1.3.3. It makes it possible to post images without any size constraints. Add a category as a custom field (name or ID, see image above for illustration) and it lists all posts paged by a showposts custom field parameter.

There are 2 ways to use this template:
  1. Add the image(s) into the post (without any text) and add the text to an excerpt.
  2. Add an image as default and add the descriptive text into the post.

Links template

This template was added in version 1.3.4. It lists posts as links. Add a category as a custom field (name or ID, see image above for illustration) and it lists all posts paged by a showposts custom field parameter.

No Comments


Trackbacks

  1. Frequently Asked Questions | BigFeature