Cassey's Designs

Hi familysp,

I did some editing to the php file .profile-loop.php, I rewrote the loop to display fields the way I wanted them displayed. I used a table for the images (I have two that display on the profile page).

I assigned a class to the two td’s that would be displaying the images…

<table id="transformationpics">
          <tr class="pics">
            <th class="picsTitle">Before Photo</th>
            <th class="picsTitle">After Photo</th>
          </tr>
          <tr>
            <td class="picDisplay"><center><?php bp_profile_field_data('field=Before Photo'); ?></center></td>
            <td class="picDisplay"><center><?php bp_profile_field_data('field=After Photo'); ?></center></td>
          </tr>
        </table>

Then in my child-themes’ style.css I applied the following styles to limit the max-width and height (marked important to over-ride other img styles that were applying, the other styles are to add a white border with a shadow…

.picDisplay img{
	border:15px #ffffff solid;
	box-shadow:2px 2px 5px #999;
	margin:0 auto;
	max-width:350px!Important;
	max-height:400px!Important;
}

The following image is the result of the above coding in those files…
The first image originally overlapped the second and went outside of the main column into my sidebar area…

Note * You could also use lists instead of tables but since I was only displaying two images the table was easier…

Hope this helps,
Cassey

I found this very useful… I do have one question in reference to borisnov’s tips tho…

Where are you referring to when you say “in the profile edit section add width….”

I was able to locate the image field type saving section but no luck finding the profile edit section…

Thanks!!