Display Posts in a tabbed array

First decide how you want the html to function.

Are you going to create inline or inline-block span elements or li elements in some ul element so they will get horizontally displayed?

I don’t know how to do anything called a ‘carousel’ but I think you just want a horizontal list?

Then when you have that list, how are you going to load the bio? Are you going to use JavaScript in the onClick handler for the images?

If you use pure HTML for that, it will require loading the entire team page with a new parameter each time. With JavaScript, you can load that bio dynamically in the browser.

But there are primarily two ways of doing that:

1. load all bios in one go by having the page template for your team page (or the category template for your team category) do a WP_Query query on all of the posts (pretty much default behaviour for a category template) while creating unique IDs (possibly using array syntax) for identical HTML tags that contain the bio… and then using JavaScript to hide/unhide the various #ids.
2. use AJAX calls to query a script that outputs a bit of HTML containing the bio, which is then loaded dynamically into the element that you have designated for showing the bio.

Personally I think the latter is a prettier solution but the former is probably easier at first sight.

In either case, I suggest using jQuery for doing it.

This is simple jQuery syntax for hiding an element and showing another:

$( "#elementid" ).css( "display", "none" );
$( "#elementid" ).css( "display", "inherited" );

This is simple jQuery syntax for setting the contents of an element:

$( "#elementid" ).html( javascriptVariable );

This is simple jQuery syntax for loading a PHP result into an element:

$( "#elementid" ).load( "obtain-bio.php?id=NNN" );

The benefits of method 1 is that after the page has loaded, it is very responsive. With method 2, each click on a picture will cause new data to be requested from the server.

I do not know what a “featured image” is and I would like to have something like that myself because I often include images that I want displayed as thumbnails in my excerpts in my posts, but supposing that you just randomly include one(1) image in each post, you could simply extract or filter that image by doing:

if (preg_match('@<img .*?(/>|</img>)@i', $post->post_content, $m) {
    $img =& $m[0];
    // do something with the image
} else {
    // display error about missing image
}

And to remove it from the contents so only the bio remains:

$bio = preg_replace('@<img .*?(/>|</img>)@i', '', $post->post_content);

This may leave a <p></p> paragraph if WP had inserted that. But it usually does so in a later stage. In fact, it only does so when you use the_content() to display your post. You can apply any filter before that by using the 'post_content' filter.

But there is also a feature in WP called “attachments”. When you insert an image into a post, it adds that image as an attachment for that post, which is a child of the post in the parent-child hierarchy for posts. If you then remove the image link from the post content itself, the attachment remains.

So, you can also skip this filtering and just query the attachment when you want the image for a post:

$attachments = get_posts("post_type=attachment&numberposts=1&post_parent={$post->ID}");
if ($attachments) {
    $img = wp_get_attachment_image( $attachments[0]->ID, 'full' );
    // display the image in your container element
    echo "<li>$img</li>";
}

The reason I do not really like this solution is because I don’t really feel to be in control of these attachments. They are weird parent-child objects existing as separate ‘post’ objects. I have no idea what their post content is (how is that defined?) and in fact their content is not defined but the link to the image exists in the “guid” field. Why someone would define something as a “post” object while then having no contents is beyond me.

The hierarchy thus described also seems to be limited to just two levels which means the attachments could simply have been described as objects in some “attachments” array defined by relationships described in a new (additional) relationships table or (if you want strict hierarchy) simply as the parents of those attachments objects in a new attachment table.

There is not actually a way (in 3.9.1) to edit these ‘attachment’ links all you can do is delete the object (the post object of type ‘attachment’ that is shown in the media library). It also means you cannot attach the same file to multiple posts which means I (in my own situation) will have to keep uploading the same image file again and again just so they can properly be ‘attached’ to the posts I want them for.

Which means I will probably be writing my own plugin using custom post fields (metadata) linking to unattached media library files instead of having them as child objects for single individual posts.

Essentially, for your (YST) use case it doesn’t matter, I just don’t like using this parent-child link to obtain the reference to the files, because if the implementation for this changes at some future moment, your code will cease working and because of that consideration I feel it is better to depend on your own solution which is simply the inclusion of an <img src=”…” /> link into your post content.

That way your individual posts (if you provide a way to access them) still show the image (if you want that, you have to account for that).

But since you will exclude this category from normal post listings, that will not really be a consideration I would think.

So I would strongly suggest to just use this solution:

For the code that generates the ‘carousel’ just extract the <img> tag like this:

if (preg_match('@<img .*?(/>|</img>)@i', $post->post_content, $m) {
    $img =& $m[0];
    echo "<li>$img</li>\n";
}

You need onClick events for these images or their containing elements. Register them using:

$('#team-img-N').on('click',
    function (e) {
        changeBio(e.target.id);
    });

Then you have another JavaScript function “changeBio” that takes the element ID of your image tag (for instance) and uses it to effectuate the change you need according to the method you choose.

If, for example, all your elements are named “#team-pic-NNN” where NNN is the number of the post (its ID really in the WordPress database) you can use it to easily reference either the elements you want to hide/unhide or the URL of the bio snippet you want to load.

So you use a simple javascript function like substr to take the number out of the ID:

function changeBio(element) {
    id = element.substr(10);
    // do the hide/unhide, or the load
}

Then you need PHP to put those element IDs in some tags. It would seem easiest to give them to the <li> tags I’ve used as an example.

echo "<li>$img</li>\n"; becomes echo "<li id=\"#team-pic-{$post->ID}\">$img</li>\n";

After that you just need to ensure proper CSS styling and whatnot.

You could use a WP_Query loop to process all the posts in a category. Probably easiest is to just do a get_posts() with the required parameters and then looping over them with a foreach.

If you go the hide/unhide route you just iterate the array you get again when you create all of the (hidden) elements. If the hiding (display: none) of those elements does not disrupt the page flow (because their container element has a fixed size and uses scroll bars, or perhaps it doesn’t matter) the hiding/unhiding should not be a big deal… I think.

So I think these are all the fundamental elements you need.

This is everything you need for the most basic solution.

For the AJAX retrieval route you just need a small PHP file that loads the WP environment:

<?php

require_once( dirname(__FILE__) . '/../wp-load.php' );

?>

If you put your obtain-bio.php script in /ajax/obtain-bio.php that snippet would load the WP environment provided those WP PHP files are in the website root.

Then all you need is to return the contents of the post excluding the image:

$param_id = $_GET['id'];
if ($param_id) {
    $post = get_post($param_id);
    if ($post && $post->post_status == 'publish') {
        // we want the post_content to be processed the way WP likes to do
        // but first remove the image
        $bio = preg_replace('@\n?<img .*?(/>|</img>)\n?@i', '', $post->post_content);
        // also removes a potential leading and trailing newline
        // apply default WP filters
        $bio = apply_filters('the_content', $bio);
        // echo raw text
        echo $bio;
    } else {
        echo "<p>Error in your script. $param_id is not a valid post ID in this WordPress installation.</p>";
    }
} else {
  echo "<p>This script requires a post-ID parameter</p>";
}

I’ve tested this last script and it works like a charm. Obviously it will return every valid published post, not just ‘team’ category posts.

So there you have it:

• a HTML list containing the pictures
• each picture element gets assigned a unique ID
• for each such element a JavaScript event handler is assigned (the same code snippet for all elements)
• the event handler calls a function that takes the element ID and uses it to change/load the bio for the required ID
• the PHP code for the team page generates all those elements and IDs after obtaining a WP_Post array of the suitable posts
• the image to display is extracted from the content of each post using a bit of regular expression matching
• the remaining content to display has the image removed using a bit of regular expression replacing
• you can choose whether to load everything at once or do lazy loading

I don’t think there is much more to it. I believe you have all or most of the code you need, and what remains will be easy to adjust. You will have to learn how to load the jQuery library and how to insert JavaScript snippets that can get executed. That “changeBio” function you would place in the HTML <head> tag. The jQuery code to set the “click”-event handler can probably be expanded to set it for all required elements at once. If you need more help, let me know, but I expect you to take what you have now and try to make it work yourself.

Good luck! You will need it :).