Log in Sign up

Making wide images

Just curious as to how you insert an image (stand alone or in a. blog post) that renders as a wide image as in the example in the video? Can this be done in markdown or html so the image extends beyond the edge of the text column ? Thanks in advance!


2 years ago, 4 replies   Edit question

You can view the source file for that post in full. The specific line which generates a wide image is the following:

{<>} ![Apple's clothing line.](http://i.imgur.com/hx8VJoV.jpg)

The characters at the start of the line are called layout tags and are a Blot-specific feature.

Answered 3 years ago · Edit answer

Many thanks!. One follow up lets say you just want a image , for example when you put a image in the folder without the underscore in front, and the image is on the blog. How could you make that a wide image?

Answered 3 years ago · Edit answer

It's not possible to invoke the layout tag on an image-based post directly. If you want to have a wide image, you'll need to use a text or Markdown file post which itself embeds the image.

Answered 3 years ago · Edit answer

Assuming you meant image only posts:

I wanted to do the same thing and I noticed many of the official templates have a .wide class that's the same as {<>}...

So what I do is put images in a folder called [wide] so they're automatically tagged as wide and I call the .wide CSS in the template to trigger it and make it show wide.

(FYI I put all photos for image only posts in a folder [photos] and inside that I have [wide] for those I want to show wide like landscape photos).

Here's an example from my entries.html template where I also use the filename of the photo as a title/caption:

{{#tagged.photos}}
<figure {{#tagged.wide}}class=wide{{/tagged.wide}}>
     {{{body}}}
    <figcaption>{{{title}}}</figcaption>
</figure>
{{/tagged.photos}}

Hope this helps, Ray

Answered 2 years ago · Edit answer