<head> <script type="text/javascript" src='https://www.google.com/recaptcha/api.js'></script> </head>
  • Enter Your Name
  • Enter Your Email
  • Enter Your Phone
  • Enter Your Message
  • Enter Your Phone

Text/HTML

Phone : +1-631-897-7276 | Email : [email protected]
07 October 2014

How to integrate Image And Java Script in RSS App

In this post, lets check out how to create functions in razor and some of the difficulties of thumbnails as well as how to solve them.

We wish to accomplish the following. We want to add a preview of an image, but not if the RSS does not have one. The code should be able to handle different formats of RSS (as there are two methods available for including an image). We will also add a bit of Java script effects. This will ensure that the IDs of the show buttons will match up with the area that it’s going to show.

First, lets do some preparation.

Preparation includes installation of all the necessary elements. Install the 2sxc along with the V3 App for this lesson.

Now, Integrate Java Script and CSS

The next step is to integrate Java Script with CSS for client dependency. We would require a small java script. This you can easily find in the /assets folder of the App in the  [Portal]/2sxc/[AppName]/assets. You can just add a fixed reference to it, but there is another helper method in 2sxc that will ensure that the path is always the right one. You can also use the feature ensure client dependency. 

Next, let’s add the Show/Hide

Now, we shall add a hidden DIV-section that shows when the user demands it. 

 

 

This bit of code is on the more button.

 

All this is HTML, CSS and JavaScript. Using a counter variable in Razor to link these together could greatly ease things out.

The Feed Thumbnail

There are two ways to include thumbnails in RSS Feed.

1. Using the media: Thumbnail

 

 

 

2. Using Enclosure

 

The media:thumbnail is the more popular version of the two. You can get a simple code with the following:

 

Understand that, if you want to use functions, put them in the  @functions { … }. 

 

Now, integrate the image with an @if() condition

 

Related

You need to login in order to comment