Add a Row of Tiles from One Stream to Another Stream (CTAs not included)

October 5, 2016 Uberflip Customer Success

Here's a workaround to get a row of Tiles to appear on the page for another Stream.

The code included takes Items from a Featured Stream' and places it on the Latest Content Stream. Keep in mind CTA's are not imported with this hack!

First the JavaScript

/*-- 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('').append(function () {
		$('#featured-stream .tile .img').css('opacity', 1);
	});
});
}

Now the CSS

/*-- 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; } }
Previous Article
Force Descriptions for Flipbook Items to be the Same Height
Force Descriptions for Flipbook Items to be the Same Height

Next Article
Custom Banner for All Pages in a Stream
Custom Banner for All Pages in a Stream