Custom blockquote with get_avatar background

  • Hi,

    I’m trying to define a custom blockquote class called “author”, the aim is to have it displaying a picture of the author of the post, along with the name and below that the actual quote.

    Ideally I’d love it to work as easy as the author just puts <blockquote class="author">Quote goes here</blockquote> in and it displays their avatar and name through CSS (I have multiple authors on the site so needs to be automated).

    I’ve been looking around and I wanted to define a background URL for the class which would be the URL to the Gravatar (get_avatar?), but couldn’t find an appropriate snippet (if even possible?) or how to implement it. Also would love to grab the name of the author and display that as well, maybe using something like:

    .author:before {
content: "get the author name(somehow?)"
}

    Please excuse my ignorance if this is totally the wrong way to go about it, any help would be highly appreciated!

    Edit: I figured I could possibly use <?php echo $grav_url; ?> but it won’t display (and when used within content: it only displays as a code snippet).

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Take a look at the Shortcode API. This will allow the post author to put in something like [kk_quote source="username"]A notable quote.[/kk_quote] and the resulting output will be the actual html needed to generate your desired elements. You will create a handler function that does what’s needed to make this happen, i.e. retrieve the avatar url based on the username passed as the source parameter and assembling all the html, including any classes and/or styles needed to get everything styled correctly.

    Thread Starter kallekillen

    (@kallekillen)

    This is exactly what I was looking for, thank you! I know this might be a lot to ask for but would you be able to give me a basic example of how this would look? Not sure my coding skills will allow me to get the result I’m after…

    Moderator bcworkz

    (@bcworkz)

    Sorry, I have too much coding to do right now as it is. Here’s an existing shortcode I use to obfuscate an email, where the domain that appears on screen is an image. It illustrates passing a parameter, but it does not use the closing tag style for your quote. Hope it helps some. The author enters [bcw_email box=”mailbox”] in the post. There is separate javascript that loads the proper mailto address for the dummy one placed by this code. The eventual email shown will be [email protected] .

    function do_bcw_email($atts){
	$box = $atts['box'];
	$html = "<a href='https://sample.com/do-not-load-this-page.htm?box=$box' >$box<img src='https://sample.com/domain.gif' /></a>";
	return $html;
}
add_shortcode('bcw_email', 'do_bcw_email');

    Thread Starter kallekillen

    (@kallekillen)

    Thank you so much for pointing me in the right direction, I’ll have to spend some time to learn this properly and will post my finished snippet once done.

    Thanks again for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom blockquote with get_avatar background’ is closed to new replies.