rotating featured posts?

[jessamca]

I am trying to add a featured posts section to the footer of my blog. Instead of the same five posts always showing, I'd like different groups to come up on every page refresh. Does anyone know of something they could recommend?

This site has an example half way down the page on the right side.

http://intothegloss.com/

[jscheuer1]

Do you mean THE:



section, or something else?

If that's what you're talking about, I'm unfamiliar with that widget (widgets.twimg.com/j/2/widget.js). But it looks like it's initialized by this on page code:

		<script>
		new TWTR.Widget({
		version: 2,
		type: 'profile',
		rpp: 5,
		interval: 6000,
		width: 300,
		height: 300,
		theme: {
		shell: {
		background: '#ffffff',
		color: '#999'
		},
		tweets: {
		background: '#ffffff',
		color: '#666',
		links: '#000'
		}
		},
		features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: false,
		behavior: 'all'
		}
		}).render().setUser('intothegloss').start();
		</script>

And it looks like the highlighted line sets the number of posts to retrieve. And one would assume these are the 5 most recent posts.

You could increase that number to - say 10, and then randomly shuffle the resulting DOM, and then show only the first random five, or something like that. This could be easy to do, if the timing is right, via jQuery which I see the page already uses.

First backup what you've got!

Then, something like (replace the above with):

		<script>
		new TWTR.Widget({
		version: 2,
		type: 'profile',
		rpp: 10,
		interval: 6000,
		width: 300,
		height: 300,
		theme: {
		shell: {
		background: '#ffffff',
		color: '#999'
		},
		tweets: {
		background: '#ffffff',
		color: '#666',
		links: '#000'
		}
		},
		features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: false,
		behavior: 'all'
		}
		}).render().setUser('intothegloss').start();
		jQuery(function($){
			$(window).load(function(){
			var twits = [], tp = $('.twtr-tweet').parent();
				$('.twtr-tweet').each(function(){
						twits.push(this);
					});
				twits.sort(function() {return 0.5 - Math.random()});
				for (var i = twits.length - 1; i > -1; --i){
					tp.prepend(twits[i]);
				}
				$('.twtr-tweet:gt(4)').css({display: 'none'});
			});
		});
		</script>

[jessamca]

My mistake, should have been more clear. I dont mean that section, its the one two up from that, above the advertisement. Theres two photos under the title Glossary.

[jscheuer1]

We can do something similar. But those images and links aren't generated by a script, they're hard coded into the page, unless they're generated by server side code.

Anyways, what's there is:

		<div id="sideglossary">
		<div id="topglossary"></div>
     <h3>The Stylists</h3>																
	<div class="glossimage"><a href="http://intothegloss.com/2011/11/kate-young-stylist/"><img width="300" height="199" src="http://intothegloss.s3.amazonaws.com/wp-content/uploads2/2011/11/Kate-Young-1-300x199.jpg" class="attachment-glossary wp-post-image" alt="Kate Young" title="Kate Young" /></a></div>


	<div class="glossimage"><a href="http://intothegloss.com/2010/11/marie-amelie-sauve-stylist/"><img width="300" height="199" src="http://intothegloss.s3.amazonaws.com/wp-content/uploads2/2010/11/MAS-2_scd-300x199.jpg" class="attachment-glossary wp-post-image" alt="Marie-Amélie Sauve" title="Marie-Amélie Sauve" /></a></div>


	</div>

See the two highlighted <div class="glossimage"> lines? These each have an image and a link in them. You need more of them. Only the extra ones should also include an additional class name, like glossimagehidden, example:

<div class="glossimage glossimagehidden"><a href="someotherstylistlink"><img width="300" height="199" src="someotherstylistimage.jpg" class="attachment-glossary wp-post-image" alt="Some Other Stylist" title="Some Other Stylist" /></a></div>

Then in your stylesheet, add this rule:

div.glossimage.glossimagehidden {
	display: none;
}

And anywhere after jQuery becomes part of the page, add this script:

<script type="text/javascript">
jQuery(function($){
	var glossims = [], insertpoint = $('#sideglossary h3');
	$('#sideglossary .glossimage').each(function(){
		glossims.push(this);
	});
	glossims.sort(function() {return 0.5 - Math.random();});
	for (var i = glossims.length - 1; i > -1; --i){
		insertpoint.after(glossims[i]);
	}
	$('#sideglossary .glossimage').removeClass('glossimagehidden');
	$('#sideglossary .glossimage:gt(1)').addClass('glossimagehidden');
});
</script>

[jessamca]

I've installed all of the code, but can't seem to get just two photos showing at a time. Would you be able to take a peek for me and see where I've gone wrong?

My site is http://www.lookbookcookbook.com/ I have it installed at the very bottom.

[jscheuer1]

That was for the page you were asking about in your post (intothegloss.com) with this markup:

		<div id="sideglossary">
		<div id="topglossary"></div>
     <h3>The Stylists</h3>																
	<div class="glossimage"><a href="http://intothegloss.com/2011/11/kate-young-stylist/"><img width="300" height="199" src="http://intothegloss.s3.amazonaws.com/wp-content/uploads2/2011/11/Kate-Young-1-300x199.jpg" class="attachment-glossary wp-post-image" alt="Kate Young" title="Kate Young" /></a></div>


	<div class="glossimage"><a href="http://intothegloss.com/2010/11/marie-amelie-sauve-stylist/"><img width="300" height="199" src="http://intothegloss.s3.amazonaws.com/wp-content/uploads2/2010/11/MAS-2_scd-300x199.jpg" class="attachment-glossary wp-post-image" alt="Marie-Amélie Sauve" title="Marie-Amélie Sauve" /></a></div>


	</div>

The page you are now talking about (lookbookcookbook.com) is different.

Unless you put the same or similar markup on it, the jQuery code and the styles I gave you will not do anything.

[jessamca]

Ok, I just readjusted. Right now on my site, I have all of the codes you suggested from Intothegloss and substituted my own div class name, and links, but it still doesnt work.

[jscheuer1]

OK, well I see you're trying. The markup still isn't similar enough, and there are misspellings in the class names in the markup. We can fix both by adapting the script to the existing markup, and correcting the misspellings.

To fix the misspellings, replace:

<center><div id="bottomfeat"><ul><li id='bottomfeat'/><div style='float:center;padding:1px 0px 0px 0px;border:0px'><li>
<div id="topfeat"></div>
<div class="featimg"><a href="http://www.lookbookcookbook.com/2012/02/gingerbread-pancakes.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-gGxotasehTI/T2Zf8uFJiYI/AAAAAAAAD7A/aKXwLuHIqHA/s1600/lookbookcookbookcsr_1833.jpg" class="attachment-glossary wp-post-image" alt="GINGERBREAD PANCAKES" title="GINGERBREAD PANCAKES"/></a></div></li>
<li><div class="featimg"><a href="http://www.lookbookcookbook.com/2012/02/double-chocolate-cupcakes.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-Ba_t1vD0rvc/T2ZgMvBSGfI/AAAAAAAAD7Q/eZ88pu1JR8U/s1600/lookbookcookbookjt_4065.jpg" class="attachment-glossary wp-post-image" alt="Double Chocolate Cupcakes" title="DOUBLE CHOCOLATE CUPCAKES"/></a></div></li>
<li><div class="featimg featimagehidden"><a href="http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-Tl1aSFQByEo/T2pgWiU5yxI/AAAAAAAAD_I/rT6yyDDpugY/s640/lookbookcookbooksaya142.jpg" class="attachment-glossary wp-post-image" alt="APPLE CINNAMON PANCAKES" title="APPLE CINNAMON PANCAKES"/></a></div></li>
<li><div class="featimg featimagehidden"><a href="http://www.lookbookcookbook.com/2012/03/chocolate-peanut-butter-squares.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-4Wvd_jT99jU/T1uyWjwpT5I/AAAAAAAADzg/74_gzeUVHqA/s640/lookbookcookbookclarissa_6789.jpg" class="attachment-glossary wp-post-image" alt="CHOCOLATE PEANUT BUTTER SQUARES" title="CHOCOLATE PEANUT BUTTER SQUARES"/></a></div>
</li></div></li></ul></div></center>

with:

<center><div id="bottomfeat"><ul><li id='bottomfeat'/><div style='float:center;padding:1px 0px 0px 0px;border:0px'><li>
<div id="topfeat"></div>
<div class="featimage"><a href="http://www.lookbookcookbook.com/2012/02/gingerbread-pancakes.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-gGxotasehTI/T2Zf8uFJiYI/AAAAAAAAD7A/aKXwLuHIqHA/s1600/lookbookcookbookcsr_1833.jpg" class="attachment-glossary wp-post-image" alt="GINGERBREAD PANCAKES" title="GINGERBREAD PANCAKES"/></a></div></li>
<li><div class="featimage"><a href="http://www.lookbookcookbook.com/2012/02/double-chocolate-cupcakes.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-Ba_t1vD0rvc/T2ZgMvBSGfI/AAAAAAAAD7Q/eZ88pu1JR8U/s1600/lookbookcookbookjt_4065.jpg" class="attachment-glossary wp-post-image" alt="Double Chocolate Cupcakes" title="DOUBLE CHOCOLATE CUPCAKES"/></a></div></li>
<li><div class="featimage featimagehidden"><a href="http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-Tl1aSFQByEo/T2pgWiU5yxI/AAAAAAAAD_I/rT6yyDDpugY/s640/lookbookcookbooksaya142.jpg" class="attachment-glossary wp-post-image" alt="APPLE CINNAMON PANCAKES" title="APPLE CINNAMON PANCAKES"/></a></div></li>
<li><div class="featimage featimagehidden"><a href="http://www.lookbookcookbook.com/2012/03/chocolate-peanut-butter-squares.html"><img width="200" height="169" src="http://1.bp.blogspot.com/-4Wvd_jT99jU/T1uyWjwpT5I/AAAAAAAADzg/74_gzeUVHqA/s640/lookbookcookbookclarissa_6789.jpg" class="attachment-glossary wp-post-image" alt="CHOCOLATE PEANUT BUTTER SQUARES" title="CHOCOLATE PEANUT BUTTER SQUARES"/></a></div>
</li></div></li></ul></div></center>

To accommodate the existing markup, replace:

<script type='text/javascript'>
jQuery(function($){
	var featims = [], insertpoint = $('#bottomfeat h3');
	$('#bottomfeat .featimage').each(function(){
		featims.push(this);
	});
	featims.sort(function() {return 0.5 - Math.random();});
	for (var i = featims.length - 1; i > -1; --i){
		insertpoint.after(featims[i]);
	}
	$('#bottomfeat .featimage').removeClass('featimagehidden');
	$('#bottomfeat  .featimage:gt(1)').addClass('featimagehidden');
});
</script>

with:

<script type='text/javascript'>
jQuery(function($){
	var featims = [], insertpoint = $('.featimage');
	$('.featimage a').each(function(){
		featims.push(this);
	});
	featims.sort(function() {return 0.5 - Math.random();});
	for (var i = featims.length - 1; i > -1; --i){
		insertpoint.eq(i).append(featims[i]);
	}
});

[jessamca]

thanks for all your help once again!