Support » Plugin: WP Biographia » [Plugin: WP Biographia] WP-Biographia placement and quirks

  • Resolved MattAlgren

    (@mattalgren)


    Tonight I uploaded this plugin (v2.4.3) to make an authors page for our website, though I haven’t gotten that far yet. There are a few quirks that I wanted your input on first. (Here’s the post I’ve been working against, and in case it matters, we’re using a Woo Theme with all the wootheme options within your admin page un-ticked.)

    1) The plugin doesn’t seem to like the profile avatars we have. It’s not resizing them to the size specified on the admin page, and when I manually add one that’s the correct size (100×100), the image appears anchored to the bottom right corner of the frame rather than centered. We’re using a plugin called ‘User Photo’ rather than the one you suggest, but I tried that one and it did the same thing. (This one allows for non-square avatars, all of which I’ll have to switch out later; I wanted to get this sorted first.)

    2) The “More Posts” link in the last line of the profile is linking to that post’s URI. However, when I briefly switched to icons instead of text links, the icon correctly directed to the author page.

    3) I’d like to move the Biographia box down the page a bit, directly under the sharing links. Is there a line I can add to the single.php instead of using the automatic placement? The file doesn’t like the shortcode you provided for manually adding to posts.

    4) This probably won’t affect our site, but the Vimeo tick box won’t stay ticked. It switches back off when I save the admin settings.

    Love your plugin, and sorry to give you more work!

    http://wordpress.org/extend/plugins/wp-biographia/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter MattAlgren

    (@mattalgren)

    Correction: I switched back to the native author boxes until it’s working. See the following link for what the problems I’m having:

    http://techcitement.com/techcitement/contributors/

    Plugin Author vicchi

    (@vicchi)

    Hi Matt,

    1) The plugin doesn’t seem to like the profile avatars we have. It’s not resizing them to the size specified on the admin page, and when I manually add one that’s the correct size (100×100), the image appears anchored to the bottom right corner of the frame rather than centered. We’re using a plugin called ‘User Photo’ rather than the one you suggest, but I tried that one and it did the same thing. (This one allows for non-square avatars, all of which I’ll have to switch out later; I wanted to get this sorted first.)

    I’ve not come across this before, but having said that there’s multiple author image plugins out there. Can you look at the source for the Biography Box as it’s rendered in the browser and reply back with it? That way I can look and see whether there’s a code issue, a CSS issue or something else.

    2) The “More Posts” link in the last line of the profile is linking to that post’s URI. However, when I briefly switched to icons instead of text links, the icon correctly directed to the author page.

    Now this is really helpful. I’ve had a couple of reports of this happening but haven’t been able to either reproduce it or to track it down. This gives me a bit more insight into what might be happening. Leave this one with me and I’ll try and crack it.

    3) I’d like to move the Biographia box down the page a bit, directly under the sharing links. Is there a line I can add to the single.php instead of using the automatic placement? The file doesn’t like the shortcode you provided for manually adding to posts.

    Phew. This one is easier to solve. The problem (or less well known drawback) is that shortcodes are designed to work within the WordPress Loop, in other words, inside the post or page content that is returned by either the the_content or the_excerpt filters. Outside of the WordPress Loop, WordPress doesn’t know to run the shortcode expansion function over rest of the content and so if you just put something along the lines of …

    echo '[wp_biographia]';

    … into either a theme template file or your theme’s functions.php file the shortcode will (probably) never be expanded and will (probably) just be echoed verbatim.

    What you need to do is to explicitly tell WordPress to run the shortcode expansion along the lines of …

    do_shortcode('[wp_biographia]');

    … and the shortcode should be expanded correctly. You can either do this directly in the theme’s template files or, a better way is to find if your theme or if WordPress provides an action which is fired at the point in the page/post content where you want the Biography Box inserted and use the call to do_shortcode in the action’s hook function from within your theme’s functions.php. This isn’t just limited to the default [wp_biographia] shortcode, you can use this approach with any of the attributes that the shortcode supports; which are documented here: http://wordpress.org/extend/plugins/wp-biographia/other_notes/

    4) This probably won’t affect our site, but the Vimeo tick box won’t stay ticked. It switches back off when I save the admin settings.

    That definitely sounds like a bug; I’ll look into this.

    -Gary

    Plugin Author vicchi

    (@vicchi)

    Quick update …

    2) The “More Posts” link in the last line of the profile is linking to that post’s URI. However, when I briefly switched to icons instead of text links, the icon correctly directed to the author page.

    … this is definitely a bug and I’ve just fixed it. I’ll push out a new release with this fix (and hopefully a few others) in a couple of days.

    -Gary

    Plugin Author vicchi

    (@vicchi)

    Another quick update …

    4) This probably won’t affect our site, but the Vimeo tick box won’t stay ticked. It switches back off when I save the admin settings.

    … found this bug and fixed it too.

    -Gary

    Plugin Author vicchi

    (@vicchi)

    And a final update for the day …

    1) The plugin doesn’t seem to like the profile avatars we have. It’s not resizing them to the size specified on the admin page, and when I manually add one that’s the correct size (100×100), the image appears anchored to the bottom right corner of the frame rather than centered. We’re using a plugin called ‘User Photo’ rather than the one you suggest, but I tried that one and it did the same thing. (This one allows for non-square avatars, all of which I’ll have to switch out later; I wanted to get this sorted first.)

    I think there’s a couple of things going on here …

    Firstly, the User Photo plugin correctly plugs the WordPress API get_avatar function but it hard-codes the size of the author’s photo according to the configuration settings of the plugin. This means that, using the default settings of this plugin, a call to get_avatar emits the following HTML

    <img src="http://localvicchi:8888/wp-content/uploads/userphoto/2.thumbnail.jpg" alt="Gary" width="80" height="52" class="photo">

    … compare this with the HTML emitted by the Simple Local Avatars plugin, via get_avatar

    <img alt="Gary" src="http://localvicchi:8888/wp-content/uploads/2012/02/Gary_avatar-100x100.jpg" class="avatar avatar-100 photo" height="100" width="100">

    … and the HTML emitted by get_avatar when using just Gravatars (which is what WordPress uses by default) …

    <img alt="" src="http://1.gravatar.com/avatar/d300ed1dcec487e20c8600570abeffab?s=100&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D100&r=G" class="avatar avatar-100 photo" height="100" width="100">

    … both Simple Local Avatars and WordPress (by way of WP Biographia using get_avatar) pass on the image size correctly. User Photos does plug get_avatar but uses it’s own sizing calculations making it fundamentally incompatible with WP Biographia.

    However, what’s odd is that you get the same behaviour with Simple Local Avatars, which shouldn’t be the case. I’ve tested this out, both on my own blog’s custom theme as well as with the WordPress default themes and both Simple Local Avatars and WP Biographia work just fine with the avatar image, correctly resizing as configured in WP Biographia’s settings and options.

    It looks like it could be a theme issue on your side rather than a plugin issue. I’m not 100% certain of this but what evidence I’ve got does point to the theme.

    -Gary

    Plugin Author vicchi

    (@vicchi)

    I’ve just pushed v2.4.4 to the WordPress plugin repository; this fixes the Vimeo setting and More Posts link bugs.

    -Gary

    Thread Starter MattAlgren

    (@mattalgren)

    Man, you’re fast. I’ll check out #1 and #3 in a bit and see what I can figure out with your notes. Thanks!

    Thread Starter MattAlgren

    (@mattalgren)

    Okay, on the avatar issue, I switched to Simple Local. Here’s the HTML I get, including the div surrounding the image:

    <div class="wp-biographia-pic" style="height:100px; width:100px;"><img alt='Matt Algren' src='http://techcitement.com/admin/wp-content/uploads/2012/02/Matt-Algren_avatar-100x100.jpg'
     class='avatar avatar-100 photo' height='100' width='100' /></div>

    Looked like you were right and this was a CSS issue with some rules bleeding through from the theme, so I reset the CSS for “.wp-biographia-pic img” (which had been empty) with:

    .wp-biographia-pic img { border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;
    }

    …and suddenly it’s snapped into place. I’m sure the CSS should have been added to the theme rather than your plugin, but for the life of me I can’t see why the theme CSS is leaking through.

    Your suggestion with the shortcode works perfectly, and the other two issues are resolved. If you have a more proper way to deal with the avatar CSS issue, please let me know. I’d love to fix it correctly instead of just what worked first.

    I can’t thank you enough for your help!

    Plugin Author vicchi

    (@vicchi)

    I’m sure the CSS should have been added to the theme rather than your plugin, but for the life of me I can’t see why the theme CSS is leaking through.

    If you have a more proper way to deal with the avatar CSS issue, please let me know. I’d love to fix it correctly instead of just what worked first.

    … and thereby you precisely describe both the power and the drawbacks of CSS. There’s no way I can ensure that the CSS in WP Biographia works perfectly, out of the box, with every single theme and plugin that WordPress has. There’s almost 1,500 themes in the official WordPress theme directory alone and that’s not including the vast number of other themes, both free and paid for, or the 18,000 odd plugins in the WordPress plugin repository. So I’ve had to take a compromise and make the CSS as simple as possible and ensure that it works with the default WordPress themes out of the box.

    That’s why the wp-biographia-pic class is intentionally empty, it’s designed for situations where there is a CSS clash, either from a theme or from another plugin, and the approach you’ve taken is absolutely right.

    However, I have issues with hacking the CSS for a theme as you tend to loose your customisations when a theme gets updated. So there’s two ways you can go about this.

    The first is relatively low touch, create a file called custom.css either in your theme’s root directory or in a ./css subdirectory if one exists; this file should contain your definition of the wp-biographia-pic class. Then in your theme’s functions.php enqueue the style using the WordPress wp_enqueue_style API call, along the lines of …

    <?php
    function custom_wp_biographia_style () {
        if (!is_admin ()) {
            wp_enqueue_style ('custom-wp-biographia-style', get_bloginfo ('template_url') . 'css/custom.css');
        }
    }
    
    add_action ('init', 'custom_wp_biographia_style');
    ?>

    This defines a hook to enqueue the style, which is then linked to the init action (so the style is available for use as soon as WordPress is ready to start rendering your post or page) but only if you’re not on an admin page, as the style won’t be needed.

    You don’t want to hard code the CSS into your theme’s header as some suggestions on the web say, when you update your theme, the header will be over-written and lost, whereas functions.php isn’t (I believe) overwritten.

    This approach still calls for modifying the contents of the theme’s directory content and so my preferred approach, though not as low touch, would be to create a child theme, based on your current theme, and add the custom CSS there. It sounds complex but it’s as simple as creating a new theme directory and creating a single style.css that inherits your (parent) theme’s style.css plus your custom additions. This neatly encapsulates all your specific customisations, doesn’t touch the parent theme, and when the parent theme is updated, your child theme automagically inherits the new version. There’s lots of tutorials on how to create a child theme, I used this one – http://wp.tutsplus.com/tutorials/theme-development/creating-a-simple-child-theme-using-twenty-eleven/ – when I wrote the child theme that I’m using on my blog at http://www.vicchi.org.

    Hope this all helps; let me know how you get on.

    -Gary

    Plugin Author vicchi

    (@vicchi)

    … one other point, if you do go down the child theme route (and I’d be more than happy to help you on this if you get stuck) then you can add the shortcode support we discussed earlier into the child theme’s template files, rather than into the functions.php as I suggested earlier.

    -Gary

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Plugin: WP Biographia] WP-Biographia placement and quirks’ is closed to new replies.