How do I manipulate what is shown from an external news feed

(M Macdade) #1

Hi there,

 

So we have previously been nesting .XML paths into our CMS pages (via Remote content) which works great and display the article thumbnail etc. For this particular content I have only been provided this link:

 

https://app.secure.griffith.edu.au/news/category/corporate/domestic-violence/feed/

 

I would like to display this level of detail on each article (but on our own CMS page):

 

https://app.secure.griffith.edu.au/news/category/corporate/domestic-violence/

 

After setting it up as an RSS data source and then using an Asset listing to display them I am only getting a list of hyperlinked article titles. Is there a way I can list them with the full article summary and accompanying article thumbnail image? I have tried editing the Type Formats > Default Format but the keyword for the images doesn't appear to work. Any assistance would be greatly appreciated.

 

Regards,

Matt

 

(Nick Papadatos) #2

Have you tried the following keywords?

 

<a href="%ds__link%">%ds__title%</a>     %ds__description%
    %ds__dc:creator%
    %ds__pubdate%

 

If you have a look at the details screen of your RSS DS you'll see a bunch of keywords, yes? The thumbnail is in the comments field/div "feedEntryContent".

 

Is this what you're after? Capture.png (55 KB)

(M Macdade) #3

Thanks NickyP, that is pretty much what I am after, that was a massive stride in the right direction!

 

Am now using this:

 

<h3><a href="%ds__link%">%ds__title%</a></h3>
%ds__description%
<p><strong>%ds__dc:creator%</strong> - %ds__pubdate%</p>
 
The only problem I am having now is finding a way to have the text sit alongside the image (or float the image to the right of the description.) 
 
qrAkzO2.jpg
qrAkzO2.jpg774x1068
 
Any ideas on how I could seperate the image from the text?
(Nick Papadatos) #4

To separate the image from the text you’ll need to do the following (unless someone else has a more efficient way please let us know).
default format:

<h3><a href="%ds__link%">%ds__title%</a></h3>
<div class="feedEntryContent">%ds__description%
 <p><strong>%ds__dc:creator%</strong> - %ds__pubdate%</p>
</div>
<hr />

some extra css rules unless you have something similar then use those classes.

<style>
.thumbs           {float: left; padding: 0 20px 20px 0;}
.feedEntryContent {min-height: 150px;}
</style>

then some jQuery

<script>
$(function(){

  $(’.feedEntryContent’).each(function(index, value) {

     $(this).find(‘img’).wrap(’<div class=“thumbs”></div>’);

     });


$( “.feedEntryContent” )

  .contents()

  .filter(function(){

    return this.nodeType !== 1;

   }).wrap( ‘<div class=“comments”><p></p></div>’ );

  });

</script>
(M Macdade) #5

That worked awesome. Legend. Thanks NickyP!