Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$60
Display Posts in Carousel, Show Ads randomly in between
I need to display posts in a carousel, similar to foodily.com (screenshot attached).
This carousel will have previous/next arrows as well as a jquery ui slider which will allow you to slide through the post carousel. The carousel needs to show 4 posts and 2 ads in each section. The ads will be randomly placed in each section and the ad code is pulled from a custom filed placed inside each post. Basically the custom field in each post is labeled "300 x 250 top" and "300 x 250 bottom". It can pull from either of those fields but need to pull from a random one each time (we're going for complete randomness here).
This carousel needs to work on 6 different custom post types as well.
I told you this wasnt for the faint of heart. This is why the prize amount is so large.
Thank you for your help. I only have one day to do this, so a quick response will receive a substantial tip from me (perhaps the same as the reward amount). I can give access to only serious individuals so you must either be a very active user of this site or very experienced (site examples).
Thanks. Good luck.
This question has been answered.
Paul Lumsdaine | 11/14/11 at 6:15pm
Edit
(1) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
11/14/11
7:29pmJohn Cotton says:Hi Paul
Are you saying that the carousel should show (for example) post-post-ad-post-ad-post or ad-post-post-post-ad-post? ie have displays with two randomly being ads?
If so, is it just the loop logic you want or the whole carousel?
- 11/14/11 7:45pm
Paul Lumsdaine says:The whole carousel would be nice (meaning a tip involved), though the loop logic is really what I am looking for.
The problem I am experiencing is with the logic of placing the ads in a grid so that it shows 6 total items at a time, with the most recent items showing first (per normal loop), but showing ads randomly throughout (no more than 2 per 6 items shown.
I have created a wireframe to better display what I am talking about. See attached screenshots pdf for greater clarification.
- 11/14/11 7:47pm
John Cotton says:Do you have a particular carousel plugin in mind?
- 11/14/11 7:49pm
Paul Lumsdaine says:I will need to utilize jQuery UI for the slider and carousel.
- 11/14/11 8:22pm
John Cotton says:Paul
I haven't put any HTML/slider code in as I'm not sure which would be best - are all the outputs images? Or some text? Without knowing that, it's hard to pick one...
But the loop could look something like this:
<?php
global $post;
$total_sections = 4; // the total number of sections that you want in your slider
$args = array(
'posts_per_page' => $total_sections * 4, // get four posts for each section we want to show
'orderby' => 'rand' // we want our posts randomly sorted
);
$carousel_query = new WP_Query($args);
if ($carousel_query->have_posts() ) {
$slider = array();
$section = array();
while ($carousel_query->have_posts()) {
$carousel_query->the_post();
// Not sure what you actually want to put in the grid for each post...so edit here as you need to...
$section[] = get_the_post_thumbnail($post->ID, 'full' ); // This get's the featured image....but you could add any html/data in here
// for the third and sixth array slots, put in ad code
// since our original WP_Query pulled randomly, then the actual ads that get pulled for
// these slots will be...random!
if( count($section) == 2 || count($section) == 5 ) {
$adcode = get_postmeta( $post->ID, '300 x 250 bottom', true );
$section[] = $adcode;
}
// If we've got a group of 6....
if( count($section) == 6 ) {
shuffle($section); // We need to mix up the six so that the ads could be anywhere
$slider[] = $section; // store the group in our slider list
$section = array(); // and reset the section
}
}
// This is belt and braces since you should have pulled exactly the
// right amount of posts, but if you haven't then the while loop will
// have bailed out before the group got added to the slider
if( !empty($section) ) {
shuffle($section); // We need to mix up the six so that the ads could be anywhere
$slider[] = $section;
}
// By now you should have an array of size $total_sections, each with an array of 6 inside
// So you can do you html loop
foreach( $slider as $section ) {
// Output the html....
}
}
?>
I should add that I haven't tried this, but it should work...:) - 11/14/11 8:37pm
Paul Lumsdaine says:Thank you, the code looks like it might work, however the posts do not need to be displayed randomnly. I believe I can just remove the 'orderby' => 'rand' and it should display from most recent to oldest.
I thank you for your quick response. Is there a way I can contact you directly via IM or Skype if I run into trouble? - 11/14/11 8:45pm
John Cotton says:I believe I can just remove the 'orderby' => 'rand' and it should display from most recent to oldest.
Ah! There was a reason for that....
If the posts always come in date order, the ads (in my code at least) will always come from the 2 and 4 posts.
If you want the posts in descending date order and the ads random, we'll need to do something a bit different. - 11/14/11 8:48pm
John Cotton says:Also, I forgot to randomise the custom field for the ad...that line should read
$fields = array('300 x 250 bottom', '300 x 250 top');
$adcode = get_postmeta( $post->ID, $fields[array_rand($fields, 1 )], true );
- 11/14/11 8:53pm
Paul Lumsdaine says:It seems like it only pulling from posts and not from any of my custom post types. I have tried 'post_type' => 'any' and it does not work.
The client has thrown a wrench into my gears and said they need the ads to be pulled from custom fields on specific pages now (however the same page for each loop created). I have created custom pages for each post type, so I assume I pass the post ID into the get post meta as so:
$adcode = get_postmeta( 25, '300 x 250 bottom', true );
This will mean I will have to create different loops for each custom post type, to specify the page ID it is pulling the IDs from.
Does this make any sense? - 11/14/11 8:58pm
John Cotton says:Should be: 'post_type' => 'cpt_name' e.g. 'post_type' => 'movies'
If you're still not getting anything back, it could be that the default for one of the other parameters is killing, e.g post_status all set to draft. Check the defaults here:
http://codex.wordpress.org/Class_Reference/WP_Query
The next bit really didn't make sense at all! Give me a call in the morning :) - 11/14/11 10:06pm
Paul Lumsdaine says:It appears as if that is not working properly. It is showing three of the same posts and not pulling from the meta data at all. Do we need to reset the query before hand if this is not on the index page but on another page (landing page specifically)?
- 11/15/11 1:09am
Paul Lumsdaine says:SO it turns out that this code snippet is not working. Can anyone else figure out what might be the problem? I have no problem paying people for their time as I am scratching my head trying to figure out why it is not working.
- 11/15/11 3:30am
John Cotton says:Paul
What, precisely, isn't working? Are there PHP errors? How/where have you implemented the code?
If you want to send me FTP/account access so that I can take a look....
Regards
John
- 11/15/11 4:26am
Paul Lumsdaine says:John- I guess you're like me and never sleep. It was all my fault why it was only showing one post, I didn't see the instructions about where to insert the HTML. Custom post types
Actually the only part that is not working is the showing of the ads. It doesn't seem to be doing it. Also, Im not sure how it breaks it up into sections or how it would work in a carousel. The goal is to show two rows of three and when you click on the next button, it would show the next two rows of three. - 11/15/11 4:39am
John Cotton says:Hi Paul
These are the lines that create the carousel HTML:
// By now you should have an array of size $total_sections, each with an array of 6 inside
// So you can do you html loop
foreach( $slider as $section ) {
// Output the html....
}
$slider is an array of n sections (n being determined by the $total_sections variable).
In each $section is a further array of six sets of content. What is in the content is down to you, but in my example code I put the post featured image.
So let's say that you're final HTML needed to be along these lines:
<ul id="slider">
<li id="section_1">
<ul>
<li class="section_box"><a href="#"><img src="1a.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="1b.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="1c.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="1d.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="1e.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="1f.jpg" /></a></li>
</ul>
</li>
<li id="section_2">
<ul>
<li class="section_box"><a href="#"><img src="2a.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="2b.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="3c.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="2d.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="2e.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="2f.jpg" /></a></li>
</ul>
</li>
<li id="section_3">
<ul>
<li class="section_box"><a href="#"><img src="3a.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="3b.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="3c.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="3d.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="3e.jpg" /></a></li>
<li class="section_box"><a href="#"><img src="3f.jpg" /></a></li>
</ul>
</li>
</ul>
You loop would be this:
$i = 1;
echo '<ul id="slider">';
foreach( $slider as $section ) {
echo '<li id="section_'.$i.'"><ul>';
foreach( $section as $box ) {
echo '<li class="section_box">'.$box.'</li>';
}
echo '</ul></li>';
$i++;
}
echo '</ul>';
This assumes that you add the link and image html in the creation loop further up and that your adcode is in the same structure. I realise that might not be the case so you need to adjust for whatever it is that you actually want in the HTML.
What are storing in the ad code meta fields? An image source? Some html? Something else? - 11/15/11 4:44am
Paul Lumsdaine says:Some html: an iframe. I need to wrap it in a div (not provided in the custom field).
- 11/15/11 4:49am
John Cotton says:I need to wrap it in a div (not provided in the custom field).
Do you? If you use my code (and most carousels use unordered lists) the li tag is your block element so you don't need anything else.
Some styling like this:
ul#slider > li { width: 384px; display: block; }
li.section_box { width: 120px; height: 120px; display: block; float: left; margin: 4px; }
should sort out the layout.
- 11/15/11 7:44am
Paul Lumsdaine says:Now I have no idea what I did wrong... Here's a reference to what my current code looks like: pastebin.com/keRaFbn3
- 11/15/11 1:48pm
Paul Lumsdaine says:Found out what the issues were! First, Chris pointed out I forgot a semi-colon after
$section[] = $html
and also a correction to another line of code, where get_postmeta should be like this:
$adcode = get_post_meta( $post->ID, $fields[array_rand($fields, 1 )], true );
Awesome work Chris!
- 11/14/11 7:45pm
This question has expired.
Paul Lumsdaine had additional discourse to offer.
Gabriel Reguly, Julio Potier, Paul Lumsdaine, Luis Abarca voted on this question.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.