Customize content image appearance

In Post image appearance there are options for adjusting the margin above and below images inserted into post and pages. Be aware that this setting only applies to images that are aligned center within posts/pages.  If your images are aligned left, right or none, you may see additional spacing (more on this below).

Image margin overlap

Trouble removing gap?

Additional space between images can come from <div> or <p> (paragraph) tags surrounding your images or from using a different method for insertion.  Additionally, if your images are not aligned “center,” but have any other alignment setting (left, right, none), it will cause image spacing issues.

The reason for this is because left and right alignment must allow text to ‘wrap’ near the photo.  Each image with left or right alignment will have added margin to the side and below the photo so text does not come right along the photo edge.  And when an image is aligned “none,” WordPress treats the image differently and applies additional line height between each of the images.

Now, since WordPress remembers the last alignment used when you insert photos (so it can be used again the next time you insert photos) you’ll need to insert at least one photo in a post with ‘center’ alignment. After that, your spacing should return to normal.

To assure that only the ProPhoto space settings will apply, try deleting all the images and then re-inserting them.

There is also an option for adding a border around your images with settings for color, width and style.  This applies only to content area images.

Because ProPhoto is fully responsive, it will display images as uploaded and will only downsize images to fit if the image’s width is wider than the display window width.  In these cases, the image’s original aspect ratio is maintained.  However, the result is that large portrait style images may end up rendering very large on a browser window, with not the full image in the browser window view.  So, to keep users from having to scroll up/down to see an entire portrait image, the Image height constraint option can be used to force those images to appear smaller and in full view of the browser window.  When enabled, you can set the image height constraint to be as a percentage of the window height or window width.

Example

So for example, let’s say you have uploaded an image to your site with dimensions of 1000px by 1500px and the image is being viewing on a browser window that is 1200px by 1000px.  Without this feature enabled, the image will get rendered at it’s full size, since the original image width (1000px) is less than the browser window width (1200px).  This then means a viewer would need to scroll down to view the entire 1500px tall image, on the 1000px tall browser window.  But, if this image height constraint option is enabled and set to 80% of window height, the image would get downsized to 533px by 800px, which is 80% of the browser window’s height (1000px).  Or, if that setting was set to 80% of window width, the image would be downsized to 640px by 960px and would still display fully in the 1000px tall browser window.

In Post image rounded corners, you can choose whether you want the corners of each of your images to be rounded.  Again, this applies only to content area images.