Hub Hack: Add a Row of Tiles From a Featured Stream to the Latest Content Stream

Follow

Use this Custom Code snippet to take a row of Item Tiles from a Featured Stream and place it on the Latest Content Stream. 


 

Details

  • Type: JavaScript & CSS
  • Placement: Body Bottom (JavaScript) / Head (CSS)
  • Notes: Will not pull over CTAs, only Item Tiles.

 

Code

JavaScript

<script>
/*-- Featured Stream --*/
/*-- Replace collectionID with stream ID! --*/ if (!$('#featured-stream').length){ $.get('/hubsFront/ajax_loadAdditionalItems/?collectionId=XXXXX¤tPage=-1&limit=6&featuredItemCount=10&embedded=0').success(function (data) { $('body').prepend(' Featured Content ' + data + '').append(function () { $('#featured-stream .tile .img').css('opacity', 1); }); }); }
</script>

 

CSS

<style>
/*-- Featured Stream --*/#featured-stream .tile { display: none; } #featured-stream .tile:hover .share-single { opacity: 1; } @media only screen and (min-width:0) and (max-width: 560px) { #featured-stream .tile:nth-child(-n+1) { display: block; } } @media only screen and (min-width:561px) and (max-width: 860px) { #featured-stream .tile:nth-child(-n+2) { display: block; } } @media only screen and (min-width:861px) and (max-width: 1336px) { #featured-stream .tile:nth-child(-n+3) { display: block; } } @media only screen and (min-width:1337px) and (max-width: 1606px) { #featured-stream .tile:nth-child(-n+4) { display: block; } } @media only screen and (min-width:1607px) and (max-width: 1876px) { #featured-stream .tile:nth-child(-n+5) { display: block; } } @media only screen and (min-width:1876px) { #featured-stream .tile:nth-child(-n+6) { display: block; } }
</style>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.