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. 


Warning

Hub Hacks are NOT official Uberflip features. They may not work on all Hubs, or may cause unexpected behavior. Before implementing a Hub Hack on a production Hub, we strongly recommending testing it in a safe environment (such as a staging Hub) if possible.

Uberflip Support is not able to help troubleshoot issues with Hub Hacks: if a Hub Hack is not working correctly in your Hub, Uberflip Support can only help you to disable it.

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.