Results 1 to 9 of 9

Thread: rotating featured posts?

  1. #1
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default rotating featured posts?

    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/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    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):

    Code:
    		<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>
    Last edited by jscheuer1; 03-24-2012 at 02:41 AM. Reason: use onload
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    		<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:

    Code:
    <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:

    Code:
    div.glossimage.glossimagehidden {
    	display: none;
    }
    And anywhere after jQuery becomes part of the page, add this script:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    HTML Code:
    		<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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by jessamca; 04-04-2012 at 04:04 AM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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:

    HTML Code:
    <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:

    Code:
    <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:

    Code:
    <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]);
    	}
    });
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for all your help once again!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •