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=”https://beyond-paper.com/zippy/wp-content/uploads/2017/05/alexandre-dumas-9280765-1-402.jpg” title=”The Three Musketeers” source=”http://www.gutenberg.org/ebooks/1257″ 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=”https://beyond-paper.com/zippy/wp-content/uploads/2017/05/lewis_carroll_06-552×6201.jpg” title=”Jabberwocky” source=”http://en.wikipedia.org/wiki/Jabberwocky” 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:

CSS

.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;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}

HTML

<div class=”mb-wrap mb-style-1″>
<div class=”mb-thumb” data-image=”http://www.sophrosynelife.com/wp-content/uploads/2012/10/Dartagnan-musketeers.jpg”></div>
<blockquote cite=”http://www.gutenberg.org/ebooks/1257″>Never fear quarrels, but seek hazardous adventures.</blockquote>
<div class=”mb-attribution”>
<p class=”mb-author”>Alexandre Dumas</p>
<cite><a href=”http://www.gutenberg.org/ebooks/1257″>The Three Musketeers</a></cite>

</div>
</div>

jQuery

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

jQuery(function(){
jQuery(‘.mb-thumb’).each(function(){
var theurl = jQuery(this).attr(‘data-image’);
jQuery(this).css(‘background-image’, ‘url(‘+theurl+’)’);
});
});

 

Follow me

Submit a Comment