Skylar SC sskylar

To style assets in Siteleaf you can use asset metadata. For example, you can create a meta field called css_class on your asset.

Now in your theme code you can write:

{% for asset in assets %}
  <img src="{{asset.url}}" class="{{asset.meta.css_class}}">
{% endfor %}

Here are two ways to style images using Markdown

1. Using class names

If you'd like to use classes, HTML is completely valid in Markdown:

<span class="right">
![](/assets/image.jpg)

	collections:
	posts:
	title: "Articles" # replace "Articles" with name of your choice
	output: true

	defaults:
	- scope:
	path: ''
	type: posts
	values:

	defaults:
	-
	scope:
	path: "" # an empty string here means all files
	type: "my_collection" # applies defaults only to documents in this collection (e.g. "posts")
	values:
	layout: "default"
	foo: "bar" # any metadata fields can go here

	<form action="//formspree.io/{{ site.meta.contact_email }}" method="POST">
	<input type="email" name="_replyto" placeholder="Your email">
	<textarea name="message" rows="5" placeholder="Your message"></textarea>
	<input type="submit" value="Send">
	</form>

	<h1>{{title}}</h1>
	{{body}}

	{% for section in pages %}

	<h2 id="{{section.slug}}">{{section.title}}</h2>
	{{section.body}}

	{% for subsection in section.pages %}

	{% unless slug == 'about' %}
	<img src="{{meta['featured-icon']}}" alt="featured icon" class="featured-icon">
	{% endunless%}

	<body class="level{{ url \| remove_first:'/' \| split:'/' \| size }}">
	...
	</body>