Feature Spotlight: Images

4th August 2016

We've explored text and wysiwyg content tags, now we'll take a look at images.

To get an image field onto a page is pretty easy, that's just like working with text blocks, but the type is image. Take for example this: {% page "headshot" type="image" %}

That will signal the Glass that you want to have an image field.

After that, you'll want to use some slightly more advanced template tags to render your page correctly.

Here's a minimal example:

{% page "headshot" type="image" %}
<img src="{{ page.content.headshot.url }}" />

This will render the <img> tag with whatever image has been uploaded to the site for that field.

This can cause some problems, if for example no image was used, or the image was the wrong size.

Let's check if the image exists.

{% page "headshot" type="image" %}
{% if page.content.headshot %}
  <img src="{{ page.content.headshot.url }}" />
{% endif %}

In this example: if the image doesn't exist, then nothing will be displayed in its place.

You could try to put something in it's place.

{% page "headshot" type="image" %}
{% if page.content.headshot %}
  <img src="{{ page.content.headshot.url }}" />
{% else %}
  <img src="/static/placeholder.jpg" />
{% endif %}

This if/else block makes it easy to have a good default.

If you want to make sure to process the image to a good size, you can use our Imgix integration. Imgix is a tool for automatic image manipulation. It's very handy.

I'm not going to get into all of the details here, but let's just have one example where we enforce a resize down to 150px wide.

our <img> tag now uses an {% imgix_url %} tag, with custom query parameters.

<img src="{% imgix_url page.content.headshot %}?w=150" />

That's It!

---

Glass is a complete web management platform. It is built specifically for the needs of web professionals and their clients. Try it now for free.