Blog posts by Nick Allport

Spicing Up an EPiServer:NewsList with jQuery

Mon, 12 Oct 2009 10:42:42 GMT

I’m no super developer who understands in depth a multitude of programming languages and what you can use them for. My preferred approach is to browse my favourite sites on the web and figure out how I can adapt the things I like to work for me. I usually take a peak at the source code or find tutorials to point me in the right direction. Doing so one day I came across jQuery and have since made use of it both with and without EPiServer.

For those of you who don’t know, Wikipedia describes jQuery as a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It’s free and open source. My basic understanding of it is that it allows you to do pretty cool manipulation of otherwise boring and mundane HTML without a lot of effort. Which is no bad thing.

There are lots of things you could do with jQuery but for this post, I am going to demonstrate two methods for spicing up an EPiServer:NewsList by simply referencing the jQuery library and adding a few short lines of code.

Setup

In order to replicate the examples below you will need to set up some properties against your news articles.

Summary – String < 255
Main Image – An Image reference which will contain images all of the same size. I achieve this by predefining size options in my web.config. I use images that are 600 x 275. These sizes are referenced in the style sheet so be sure to change them to match your own sizes.
PageLink – I also use the built in PageLink property.

Simple Slideshow

There are a number of options you could use to create a slideshow effect for your News articles with jQuery. I am making use of InnerFade by Medien Freunde. Alternatively you could use jCarousel which has a nicer effect but I found issues with viewing the output in Edit mode.

First of all add the references to your jQuery libraries. You can either download the main jQuery library or reference Google’s copy. The InnerFade jQuery file comes from the site referenced above.

        1: <script src="<%= ResolveUrl("~/Templates/Template/Scripts/jquery-1.2.6.js") %>" type="text/javascript"></script>

       2: <script src="<%= ResolveUrl("~/Templates/Template/Scripts/jquery.innerfade.js") %>" type="text/javascript"></script>

Pay careful attention to the order you reference your jQuery libraries within your HTML code. I have noticed that if the main library is not referenced first the rest of the code will not work. A bug which caught me out a few times.

I have a User Control called HeadTag.ascx which is used to contain everything within <HTML><HEAD></HEAD></HTML>. My references live there.

Secondly set up your NewsList control. For the slideshow I am simply creating a Unordered List <ul> with an id=”slideshow” which I will later apply CSS Styles and some jQuery too to make it work.

       1: <episerver:NewsList PageLinkProperty="NewsRoot" runat="server" ID="Newslist1" MaxCount="10">

       2:     

       3:     <HeaderTemplate><ul id="slideshow"></HeaderTemplate>    

       4:             

       5:     <NewsTemplate>

       6:         <li>

       7:         <div class="photo">

       8:         <a href="<%# ((EPiServer.Core.PageData)Container.DataItem).Property["PageLinkURL"] %>">

       9:         <asp:Image ImageUrl='<%# ((EPiServer.Core.PageData)Container.DataItem).Property["MainImage"] %>' ID="image" runat="server" />

      10:             <div class="photocaption">

      11:                 <h2><EPiServer:property ID="Property1" PropertyName="PageLink" runat="server" /></h2>

      12:                 <p><EPiServer:Property ID="Property4" PropertyName="Summary" runat="server" /></p>

      13:             </div>

      14:          </a>

      15:          </div>

      16:         

      17:         </li>

      18:     </NewsTemplate>

      19:     

      20:     <FooterTemplate></ul></FooterTemplate>       

      21:     

      22: </episerver:NewsList>

Then some styles for your CSS.

       1: #slideshowholder { padding: 0px; margin: 0px; }

       2:  

       3: #slideshowholder ul { margin: 0px; padding: 0px; list-style: none; }

       4:  

       5: #slideshowholder .photo{ width: 600px; height: 275px; margin:0px 4px 0px 0px; 

       6:                          background:#161613; overflow: hidden; position: relative; border: 2px solid #fff; }

       7:  

       8: #slideshowholder img { position: absolute; top: 0px; left: 0px; border: 0px; padding: 0px; margin: 0px; }

       9:  

      10: #slideshowholder .photo .photocaption { float: left; position: absolute; background: #000; height: 100px; 

      11:                                 width: 100%; opacity: .7; 

      12:                                  /* For IE 5-7 */ 

      13:                                 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

      14:                                 /* For IE 8 */

      15:                                 -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

      16:                                 z-index: 5000;

      17:                                 top: 175px;

      18:                                 left: 0px;    

      19: }

      20:  

      21: #slideshowholder .photo .photocaption p, #slideshowholder .photo .photocaption h2 {

      22:     padding: 3px 10px; margin: 0px; color: #fff; }

From this I would expect to get an unordered list of images with an link to the page and a summary paragraph. The defacto standard way of presenting news or lists.

To transform this list to a nice single entry, image rotating and fading news gallery you need only apply a few simple lines of code. Put this just before your NewsList control and ensure that the id you reference is the same as you applied to the NewsList HeaderTemplate <ul> and not the actual control id.

       1: <script type="text/javascript">

       2:     $(document).ready(

       3:         function() {

       4:             $('#slideshow').innerfade({

       5:                 speed: 'slow',

       6:                 timeout: 5000,

       7:                 type: 'sequence',

       8:                 containerheight: '275px'

       9:             });            

      10:         }

      11:     );

      12: </script>

So add some news articles and if you’ve done it right, and I’ve written the write instructions (!), then you should have something that looks like this and changes every 5 seconds.

Publishing EPiServer CMS 5 From Visual Studio 2008

Mon, 05 Oct 2009 10:33:36 GMT

As an experienced Visual Studio developer I have been really impressed with how easy it has been to make rapid progress whilst developing our own EPiServer site. After attending the E2550 - Developing with EPiServer CMS 5 course in London recently I felt empowered to get stuck in and found few problems putting in place my own templates and site structures. However, when I decided to publish my work before I went too far – just so I knew I wasn’t wasting my time – I found that, in my experience, Deploying from Development to Public sites wasn’t quite as easy as Daniel van den Tempel described and required a few extra steps. So this post is meant to cover those extra steps and complement Daniel’s original post.

In order to help others who might find themselves in the same situation as me I have decided to document the process that I followed in order to publish from my EPiServer SDK site to a working public site.

Setup

First of all some details about my setup.

Development

EPiServer Project 5.2.375.236 (EPiServer CMS 5 R2 SP2)
Visual Studio 2008 Service Pack 1
Windows Vista 64 Enterprise Edition

Production Environment

Windows Server 2003
.Net 3.5
IIS 6.0 – Ensure you have enabled the ASP.Net extensions to work
SQL Server 2005 SP1

Setting Up The Production Environment

Run the setup.exe which installs the Deployment Centre and install only the core files.
Once the Deployment Centre installation is complete choose to install a Site and SQL Database. I installed my database on a separate server.

N.B. The location you choose to install your site to, i.e. c:\episerver\sites\mysite needs to be shared so that you can also publish to it from Visual Studio.

Following your installation browsing to your site should give you the following.
You will also need to add your license.config to the folder where your site has been installed to at this point.

Publishing Your Site

I found it easier to tackle this in two stages once I eventually figured it out. Firstly to export/import my content from development to production and the secondly to publish my templates and make changes to the web.config on the server.

Export / Import Data

The first thing to ensure at this point is that you belong to the local administrators group on your server.

Login in to the admin area of your development site and choose Admin – Tools – Export Data. From there select all of the options relevant to you. For ‘Select part of structure’ I have chosen my Start page so that I get all of the content beneath it exported.

The next screen tells you how many pages have been exported etc and you can download and save the export to your chosen area ready for import to your production site.
Login in to the admin area of your production site and choose Admin – Tools – Import Data. The admin area is available at //admin">//admin">http://<yourdomain>/<yourui>/admin. Browse for your export file and select the page destination for your import. I selected the root of my site so that all of my content I exported will be under the root.
Now switch to edit mode and all of your content should be listed under the root of the site matching your development site. Make a note of the new ID of your start page as you will need to set it in the web.config after publishing from Visual Studio.

Publish From Visual Studio

Now your content has been moved from the development site to the production site you need to publish your own templates so that content will work. At the moment none of your site will work as it is looking for page types that don’t exist.

Publishing is now exactly the same as the normal process for deploying a website from Visual Studio.

Build your site in Release mode and choose Build – Publish and browse to the file share you deployed your site to on the server earlier.
You will now need to locate the web.config in your production site and update the PageStartID to match the one you made a note of after Export / Import.

Your production site should now be fully working just as your development site. From what I can see the web.config will always need updating manually at the production site whenever you publish from Visual Studio. Assuming you’ve made any web.config changes that is.