gsbrock

oh boy, well the short answer is for centering: it depends ??

If you’re just doing text you should be able to use the text-align property for horizontal positoning and the vertical-align property for vertical positioning.

If you’re trying to do image or div centering, it’s more complex.

You’re probably going to want to use something like this (pulled from a page I’m working on):

div.staff-member {
width: 180px;
height: 240px;
overflow: hidden;
float: left;
margin: 10px 5px;
border: 1px solid #6c6c6c;
border-radius: 3px;
position: relative;
}

Float is the key element to what you’re trying to do, and you can specify exactly how many items show show up by determining the width and margin of the element.

Additionally, you may need to remove some of the default plugin styling and you will also need to have some sort of clearfix, either a <div style="clear:both"></div> after your staff-list or use overflow:hidden on the parent div.

What lothsun said will modify the image size on the site, but it will still end up using the original image (image.jpg, for example) instead of a resized image (image-140×140.jpg).

What I think piskvorky is asking about is a way to modify which thumnail size is chosen, similar to the second variable in get_the_post_thumbnail <?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>

In theory this following modifications should work.

In simple-staff-list/_inc/user-view-show-staff-list.php modify line 90 from

$photo_url = wp_get_attachment_url( get_post_thumbnail_id() );

to

$photo_url = reset(wp_get_attachment_image_src( get_post_thumbnail_id(), 'staff-thumbnail' ));

In your child theme’s functions.php file add the following (modify the dimensions to fit your needs)

add_image_size( 'staff-thumbnail', 140, 140, true );

Additionally, if wordpress can’t find the proper image size, it should fall back to the original automatically.

Personally, this is a change I’d love to see added the the plugin permanently, as the modification to user-view-show-staff-list.php will be lost of the addon is updated.

The only issue I see is that margin-left: 3%; will put your text overtop of your image. I set the margin-left higher and it seemed to work fine for me using Chrome v30.

If you set your staff <img> to “position: absolute” and your <div> for the staff member info wrap to “position: relative” I believe it will work.

You may need to find tweak the actual padding and margines, but that should get it floating the image to the left of the text block.

So after poking around there is already some support for this, but it is NOT dynamic.

[simple-staff-list wrap_class=”YOUR TEXT”] will add a “YOUR TEXT” class but you cannot use short codes such as [staff-name-slug], nor is there a short code for the staff group.

It may be possible to make several short code declarations as a work around:

[simple-staff-list group=”group1″ wrap_class=”group1″]

[simple-staff-list group=”group2″ wrap_class=”group2″]

But I think this may break up the ordering and possibly mess with the page formatting.

Just a note, having this as a user-definable slug without having to edit the plugin source would be very cool, especially if it could be configured to persist through plugin updates!