Nick Allport
Oct 12, 2009
  6063
(0 votes)

Spicing Up an EPiServer:NewsList with jQuery

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.

Capture

Oct 12, 2009

Comments

Sep 21, 2010 10:32 AM

Nice tips, JQuery has lots of features.

I've had problems in Firefox when referencing JQuery like this;


Worked when changing to this syntax (' instead of ")


I also have some JQuery issues when viewing pages in preview mode in EPiServer.

Please login to comment.
Latest blogs
Multiple Anonymous Carts created from external Head front fetching custom Api

Scenario and Problem Working in a custom headless architecture where a NextJs application hosted in Vercel consumes a custom API built in a...

David Ortiz | Oct 11, 2024

Content Search with Optimizely Graph

Optimizely Graph lets you fetch content and sync data from other Optimizely products. For content search, this lets you create custom search tools...

Dileep D | Oct 9, 2024 | Syndicated blog

Omnichannel Analytics Simplified – Optimizely Acquires Netspring

Recently, the news broke that Optimizely acquired Netspring, a warehouse-native analytics platform. I’ll admit, I hadn’t heard of Netspring before,...

Alex Harris - Perficient | Oct 9, 2024 | Syndicated blog

Problem with language file localization after upgrading to Optimizely CMS 12

Avoid common problems with xml file localization when upgrading from Optimizely CMS 11 to CMS 12.

Tomas Hensrud Gulla | Oct 9, 2024 | Syndicated blog