Customize Your Blockquotes

On Friday I happened to lose half an hour when I ran across some cool blockquote formatting at Codrops.  I especially like one with a circular image:

[bpiq style = ‘default’ image=”” title=”The Three Musketeers” source=”″ author=”Alexandre Dumas”]Never fear quarrels, but seek hazardous adventures.[/bpiq]

The author provides all the code, but I wanted it to be more flexible, after all I’m not always going to quote from The Three Musketeers. I added an attribute of “data-image” to the appropriate class and With a little bit of javascript the image will change to match the quote:

[bpiq style = ‘default’ image=”×6201.jpg” title=”Jabberwocky” source=”” author=”Lewis Carroll”]Twas bryllyg, and ye slythy toves
Did gyre and gymble in ye wabe:
All mimsy were ye borogoves;
And ye mome raths outgrabe.[/bpiq]

You can see the original code here (Example 1). These were my additions:


.mb-style-1 .mb-thumb {
display: block;
width: 180px;
height: 180px;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
background: url( ) no-repeat center center;
position: absolute;
left: 50%;
top: -90px;
margin: 0 0 0 -90px;
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);


<div class=”mb-wrap mb-style-1″>
<div class=”mb-thumb” data-image=””></div>
<blockquote cite=”″>Never fear quarrels, but seek hazardous adventures.</blockquote>
<div class=”mb-attribution”>
<p class=”mb-author”>Alexandre Dumas</p>
<cite><a href=”″>The Three Musketeers</a></cite>



(Note I’m using “jQuery” instead of “$” to avoid conflicts with my WordPress install)

var theurl = jQuery(this).attr(‘data-image’);
jQuery(this).css(‘background-image’, ‘url(‘+theurl+’)’);


Follow me

Submit a Comment