Imagery

Images we use on Wikia. We use 16:9 ratio for most images.

Landscape size — 16:9

Width of images may vary depending on resolution.

Extra large size

HTML

<figure class="landscape xlarge">
  <image src=".../images/landscape_example.jpg" alt="Landscape image">
</figure>

---

Large size

HTML

<figure class="landscape large">
  <image src=".../images/landscape_example.jpg" alt="Landscape image">
</figure>

---

Medium size

HTML

<figure class="landscape medium">
  <image src=".../images/landscape_example.jpg" alt="Landscape image">
</figure>

---

Small size

HTML

<figure class="landscape small">
  <image src=".../images/landscape_example.jpg" alt="Landscape image">
</figure>

---

Extra small size

HTML

<figure class="landscape xsmall">
  <image src=".../images/landscape_example.jpg" alt="Landscape image">
</figure>

---

Thumbnail size

HTML

<figure class="landscape thumb">
  <image src=".../images/landscape_example.jpg" alt="Landscape image">
</figure>

---

Portrait size — 5:7 (and legacy image sizes)

Medium size

HTML

<figure class="portrait medium">
  <image src=".../images/portrait_example.jpg" alt="Portrait image">
</figure>

---

Small size

HTML

<figure class="portrait small">
  <image src=".../images/portrait_example.jpg" alt="Portrait image">
</figure>

---

Thumbnail size

HTML

<figure class="portrait thumb">
  <image src=".../images/portrait_example.jpg" alt="Portrait image">
</figure>

---

Avatars

Standard avatar icon is used in global nav and comments section.

36px

To display a user avatar, simply enclose the user image inside a figure element with the avatar class. For example:

HTML

<figure class="avatar">
  <image src=".../user_photo.jpg" alt="Jane Doe">
</figure>

---