I'm using the Magazine template for a photoblog. For posts with multiple images, I create a Markdown file with image embeds and a float right {>>} tag on square or landscape images so they are displayed in a similar size as portrait images. However, when posting single images directly, I'm unable to add those tags since there's no Markdown.
Is it possible to add the applicable .css class to square and landscape ratio image posts through the template directly? Two examples links from my site: multi image post vs single image post
Yes, you could embed the {{path}} of the entry in your template CSS class on the post container, e.g.
{{#entry}}
...
<div data-path="{{path}}">
...
</div>
{{/entry}}
And then target image posts only with a CSS selector like so:
[data-path$=".jpg"],
[data-path$=".jpeg"],
[data-path$=".png"] {
...
}
If you wanted to only target landscape image posts, you could use a naming convention in your folder, e.g. ending the landscape images with -landscape.jpg, then your CSS would look like:
[data-path$="-landscape.jpg"],
[data-path$="-landscape.jpeg"],
[data-path$="-landscape.png"] {
...
}
Does that help? Please let me know if you have any questions about this
Answered a month ago · Improve this answerThank you very much for the reply. Need a little clarification, as I'm just starting out. In entry.html there is
<div class="measure-wide ...>
{{{body}}}
</div>
So, wrap that body tag with the data-path div above?
And then in one of the css files, add the data-path selector(s) and use the same margin values as the .wide.right class? If so, which css file, layout or theme?
Yes, wrap {{{body}}} with the data-path div copy that CSS from .wide.right. You can add it to whichever CSS file suits you!