Large width images in posts


#1

Easy way to have big images on a larger width than text in posts… Something like what we can do with Medium’s editor or Guntenberg for WordPress.

(1) Add a new custom CSS rule. This an example, you can customize this as you like:

#wrapper .large, #post-body .large {
    display: block;
    max-width: 150%;
    height: auto;
    /* Centers an image by (1) pushing its left edge to the
       center of its container and (2) shifting the entire image
       in the opposite direction by half its own width.
       Works for images that are larger than their containers. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

(2) Insert image in content in HLTM (not Markdown shortcode):

<img src="https://i.snap.as/Wn267zf.jpg" class="large">

(3) Result:

Note 1 - At this point this is not reponsive. Need some more love and code…

Note 2 - On Write.as you must be a “premium” user to have access to Custom CSS funtionality. On Write Freely it’s accessible for all blogs.