Grabbing Asset Tag through Wiki ADT

Staff Blogs February 27, 2014 By Travis Cory Staff

Liferay 6.2 brings the era of the application display template (ADT) into full swing. There have been some awesome posts about how to use the ADT. For more information about ADT see this page, this page, this page, etc.

 

Right, right, sorry, as you can see, there are many uses of ADT. It allows you to write a new template for a portlet so that it is displayed in whatever manner you like. This can be acheived through the use of Freemarker, or Velocity. Today I will show you a ADT I created for the Wiki portlet using Freemarker.

The Task

As with any asset, it is possible to "tag" an entry. This allows a user to see all organize and navigate through assets based on tags. What if you wanted to have a different way to display a wiki page if it had a specifc tag. What if you wanted to grab just one tag and create a new layout for the wiki based on the tag? What if I told you this was possible with ADT?

 

 

Mission Possible

So I set off to make myself a fancy ADT. I borrowed from the Social Wiki ADT to make sure I was calling all the macros right. This is important so that you do not lose your icons.  We will use the tag "cat-meme" to demonstrate our ADT. So first lets create three wiki pages, one with just the tag "cat-meme", one with two tags, and one without the tag "cat-meme".

 

Now it is time to apply the ADT to our page. Hold on tight!

 

 

 

The Results

Here are the results of our ADT!

 

As you can see, the pages that have the tag "cat-meme" receive separate styling than the pages without tags. If you wanted to use multiple tags you can use  <#elseif tags?seq_contains("[tag-name]")> .

 

The exact code I used is shown below. Thanks for reading, happy ADT-ing!

 

 

  •  

Web Content Instagram Carousel

Staff Blogs November 18, 2013 By Travis Cory Staff

Have you ever thought that Liferay could use a little more Instagram? With the power of the Instagram API and the mighty Alloy-UI resource it is possible to integrate Instagram onto your page. Better yet, you can create a carousel to hold the images! See this page for more information about the Alloy-UI carousel. See this great blog post on how to create a carousel for use as a web content display.

 

A web content dispaly consists of two elements, the structure and the template. I will show you the structure to use for both 6.1.x and the newly released 6.2.x. Without any further delay, the structure!

 

Structure

  • 6.1.x
  • 6.2.x

 

As you can see, there is a difference between the structures for both versions. In this template I am giving the user the option to pick the number of photos to display from Instagram (note that the maximum of photo's that can be displayed is 20), and the option to choose how long each photo will be displayed. If you take a look at the Instagram API you can see that it would also be possible to include options for tags, types of media, likes, comments, etc. For more information about how to include those feel free to leave a comment and I can create a blog post about how to incorporate those features. The best way to figure out how to get it to work is experimenting with the API.

 

                                                   

 

 

Template

 

 

 

 

As you can see, I am creating some basic styles for the Carousel. Note that you can change all of these styles for whatever you want. You may be asking yourself where a user might find the User Id and Access Token information. These are given out by Instagram. The best way to aquire these is to sign up for developer access with Instagram here. The site will list information about the different end-points (comments, likes, tags) and also how to access various information to display on your page. 

 

There you have it, a beginner and basic Instagram Alloy-UI Carousel, if you have any questions feel free to ask and I encourage you to explore more of the API. It is really cool! For a live demo of the carousel check out World Imapct, I created the carousel for their site. Thanks for reading, see you next time!

 

 

 

 

 

Showing 2 results.