ARCH-184 added images element and all necessary files to apply image defaults

[josephgknox]

READY FOR REVIEW

Summary

• Set defaults for images (margins, padding, height, width, and display), to help with responsiveness and layout

Needed By (Date)

• As soon as possible (would unblock some project work)

Urgency

• N/A

Steps to Test

1. Pull this branch
2. Ensure that the image element is displaying in the style guide and doing what added mixin suggests that it should

Affected Projects or Products

• decanter
• stanford_basic (theme)
• suhumsci (theme), Archaeology project

Associated Issues and/or People

• https://stanfordits.atlassian.net/browse/ARCH-184
• ARCH-184 added images element and all necessary files to apply image defaults #175

See Also

• PR Checklist

[josephgknox]

Cc: @bixgomez

[sherakama]

Is the plan to use this template or is it just example?

[josephgknox]

Just an example. The mixin can be used as needed, but this was mostly to provide sensible defaults and provide an example for the pattern library.

[sherakama]

Ok, I was going to suggest adding an {{ attributes }} variable so that developers could add additional attributes to the element tag.

eg: <img src="{{ src }}" alt="{{ alt }}" {{ attributes }}>

But perhaps we don't to dismay future developers from using this template.

[josephgknox]

Even more, do we even need an example for something like this?

[sherakama]

An example page may be needed in the future. Perhaps for now, if we are not intending the developer to use the .twig file we put the markup directly in to the sass comment.

[josephgknox]

Cleaned up and moved.

[sherakama]

This approach is fine to me.

[josephgknox]

@sherakama there is an open ticket in a current sprint that ends soon that this works relates to. If this looks good (or needs more work), let me know. Hoping to get this merged.