This is my first post, so I will be trying to be as thorough as possible. I am also very new to PHP.
This is a wordpress site using PODS CMS plugin so keep in mind the wordpress image uploader allows access to multiple sizes of one singular image upload. The concept is that I have a group of data called "team" and this group has three fields - images, title, bio. I will be generating a list of thumbnails for each team member in one containing unordered list and then in another containing div I will have a larger version of he image, the title, and the bio. I am basically making a tabbed content area where the thumbnails are the tabs
The ultimate HTML output would be:
<ul>
<li> <img src="thumbnailurl.jpg"/></li>
<li> <img src="thumbnailurl2.jpg"/></li>
<li> <img src="thumbnailurl3.jpg"/></li>
</ul>
<div class="panes">
<div><h2>Title 1</h2> <p> BIO CONTENT </p></div>
<div><h2>Title 1</h2> <p> BIO CONTENT </p></div>
<div><h2>Title 1</h2> <p> BIO CONTENT </p></div>
</div>
The current issue I am having is that I can get all of the image urls for the first record, but when it comes to the second record in the second foreach i need to re-run the array for the new record but I can not figure out how.
<?php
$Record = new Pod('the_team');
$Record->findRecords($orderby = 't.id DESC');
$mylist=array();
while ($Record->fetchRecord())
{
$image_array = $Record->get_field('photo');
$title = $Record->get_field('name');
$desc = $Record->get_field('bio');
$id = $Record->get_field('id');
$mylist[] = array('name' => $title, 'desc' => $desc, 'id'=> $id );
?>
<ul>
<?php
foreach($image_array as $i => $image)
{
$image_thumb_url = wp_get_attachment_image_src( $image['ID'], 'thumbnail', false );
$image_thumb_url = $image_thumb_url[0];
$image_med_url = wp_get_attachment_image_src( $image['ID'], 'medium', false );
$image_med_url = $image_med_url[0];
$image_large_url = wp_get_attachment_image_src( $image['ID'], 'large', false );
$image_large_url = $image_large_url[0];
$image_full_url = wp_get_attachment_image_src( $image['ID'], 'full', false );
$image_full_url = $image_full_url[0];
?>
<li>
<a href="<?php echo $image_large_url; ?>">
<img src="<?php echo $image_thumb_url; ?>" />
</a>
</li>
<?php } ?>
<?php } ?>
</ul>
<div class="panes">
<?php
foreach ($mylist as $person)
{ ?>
<div class="team-member" id="member<?php echo $person['id']; ?>">
<h2><?php echo $person['name']; ?></h2>
<?php echo $person['desc']; ?>
<a href="<?php echo $person['photo']; ?>">
<img src="<?php echo $person['photo']; ?>" />
</a>
<?php } ?>
</div>
</div>
Okkkay.. So i have the first problem solved!!! But it brings up a second one. I am thinking I will either need a second image field OR call just the first image in the array in the <li>
and just the second image in the array for the <div>
:
<?php
$Record = new Pod('the_team');
$Record->findRecords($orderby = 't.id DESC');
$mylist=array();
$cnt = 0;
?>
<ul class="tabs">
<?php
while ($Record->fetchRecord()) :
$mylist[$cnt] = array(
'name' => $Record->get_field('name'),
'desc' => $Record->get_field('bio'),
'id'=> $Record->get_field('id')
);
?>
<?php
$image_array = $Record->get_field('photo');
foreach($image_array as $i => $image) :
$image_thumb_url = wp_get_attachment_image_src( $image['ID'], 'thumbnail', false );
$mylist[$cnt]['img_thumb'] = $image_thumb_url[0];
$image_med_url = wp_get_attachment_image_src( $image['ID'], 'medium', false );
$mylist[$cnt]['img_med'] = $image_med_url[0];
$image_large_url = wp_get_attachment_image_src( $image['ID'], 'large', false );
$mylist[$cnt]['img_large'] = $image_large_url[0];
$image_full_url = wp_get_attachment_image_src( $image['ID'], 'full', false );
$mylist[$cnt]['img_full'] = $image_full_url[0];
?>
<li>
<a href="#">
<img src="<?php echo $image_thumb_url[0]; ?>" />
</a>
</li>
<?php endforeach; ?>
<?php
$cnt++;
endwhile;
?> </ul>
<div class="panes">
<?php foreach ($mylist as $person) : ?>
<div class="team-member" id="member<?php echo $person['id']; ?>"><div id="member-info"><h2>Meet <?php echo $person['name']; ?></h2>
<?php echo $person['desc']; ?></div>
<a href="<?php echo $person['img_large']; ?>" rel="prettyPhoto">
<img src="<?php echo $person['img_med']; ?>" style="float:left" />
</a>
</div>
<?php endforeach; ?>
</div>