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!
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 answerMany 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 answerIt'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 answerAssuming 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