When you click on the quotation marks in the WordPress editor, the editor produces “blockquote” HTML tags.
Blockquotes can be styled in a number of ways including fonts, background and borders, etc. I think they look great when they are the full width of the post but you may not like the way they look when they wrap around an image. By definition, a blockquote goes fully from one side of the post (or some other enclosure) to the other. While the browser is smart enough to wrap the text of the quote around the image, it is not smart enough to wrap the shape of the background of the blockquote around the image. The image will always look like it is layered on top of the blockquote background. This was not obvious before because the background color of the blockquotes was white.
There’s a couple ways to handle this:
- Only put blockquotes above or below images — never next to them.
- Style your images with a border so that the image and blockquote areas are defined and clearly separate from each other. Some people like the overlapping effect. We could make both borders a light or medium gray color so that they don’t stand out quite so much.
- Only put a border on the top and bottom of the blockquote. That way, when it is next to an image, both sides will be without a border.
Take a look through your old posts and see all the different ways your blockquotes look as they are styled now. Also look at how others bloggers use blockquotes. Do they use them next to images?
Also, while I have changed the styling for the way blockquotes will appear on your website, the blockquotes will continue to look as the theme designers styled them when viewing them in the WordPress editor. I could probably change this but I’m not sure it’s worth the time.
Alternatively or additionally, you can use the Graceful Pullquote Plugin you installed. The instructions were hard to find and not well-written. I produced the following with that plug-in. You can find the draft copy of this post if you want to see how I accomplished this.