Large width images in posts

Help Customization
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:

Playing%20with%20images%20%E2%80%94%20Blog%E2%80%99n%E2%80%99test%202019-01-20
Playing with images — Blog’n’test 2019-01-20.png1600×1513 213 KB

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.

8 Likes
2

For a responsive solution, we must work around something like this:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
4 Likes
3

Thanks for sharing this, @Aris! I recently used this as a starting point for another theme, and made it responsive with these rules:

article img {
    display: block;
    max-width: 175% !important;
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
@media all and (max-width: 87.5em) {
    article img {
        max-width: 150% !important;
    }
}
@media all and (max-width: 75em) {
    article img {
        max-width: 125% !important;
    }
}
@media all and (max-width: 62.5em) {
    article img {
        max-width: 100% !important;
    }
}

In each @media all and (max-width: 87.5em) media selector, the max-width is based on the max-width of the img.

So since we start at 175% img width and the content column width is 50em, we drop the img width to 150% when the window shrinks to that 175% img width. Then that continues with every 25% step down until we get back to 100% width, when the image can simply shrink down with the rest of the column.

3 Likes