CSS image clip with text wrap in wordpress post

Intro: I am forced to use wordpress. All my posts are intended to be very simple, text wrapped around a couple of images which are aligned left or right then a couple of specific media queries to make it responsive (i.e. make images width 100% when they start to make the page look bad).

I have an globally hosted image and I want to use clip, and know i’m not the first to ask if this can be achieved without using absolute positioning.

This is in wordpress, so i’m expecting a very tedious workaround. Can’t just wrap it in a div, WP removes it. I can however control the css so I have tried the following:

<img id="imgclip" class="alignleft" 
content/uploads/2016/05/Vicky.jpg" width="365" height="539"><img 
id="imgspace" src="#" width="0" height="0">

#imgclip {
 position: absolute;
 clip: rect(20px 280px 280px 60px);
 margin: -10px -150px -150px -60px;}
#imgspace {
 margin: 150px 150px 100px 85px;
 float: left;}

This is the closest i’ve come but I’m assuming it won’t work in all circumstances. I’d like any comments or suggestions for a more elegant solution. This is my first question so apologies in advance if i’ve made errors. -Rob

Read more here: CSS image clip with text wrap in wordpress post

Leave a Reply

Your email address will not be published. Required fields are marked *