Starburst | Image usage

internal > Image usage

Images #

Display images with:

Our own include image syntax
HTML syntax
Markdown syntax

include image syntax #

This is our in-house and preferred image syntax.

This syntax provides a screenshot attribute that places a single pixel border around the image, which is best used for screenshots that have white space up to their edges, so that the image is clearly delineated from the page’s text.

This syntax also allows you to specify valid CSS to tailor a particular image. If no pxwidth value is passed, the image defaults to the file’s inherent width up to a maximum of 90% of the current container for very large images.

Another option of the include image syntax is to turn very large images into two-size modal images. The specified image is reduced for normal display on the page, limited to pxwidth size, but the image is also now a button. When clicked, the image expands and is shown in a larger modal window. The screenshot and modal options are mutually exclusive; use one or the other.

Use include image.html in a separate tag block with the parameters shown in the following table:

* Parameters may be used in any order.

Key	Value	Required	Notes
url	Relative path to the asset.	Required
alt‑text	String for alt tag content.	Required
descr	String for description tag content for accessibility support.	Optional	Use if `alt‑text` does not convey enough information
pxwidth	Width value in pixels, integer only. See the notes below	Optional
screenshot	Set to ‘true’ adds 1px solid border. No effect if modal.	Optional
modal	Set to ‘true’ adds modal ability.	Optional	Must assign `img‑id` if true
img‑id	Adds ID string.	Optional	Required for modal. Must be unique per page.
style	Pass any valid CSS to the image.	Optional

For the pxwidth key:

Don’t include a pxwidth line, or leave its value empty to specify using the native image resolution by default. pxwidth=''
Do not specify pxwidth='0', which disables the image.
For modal, pxwidth specifies the non-modal display size on the page before expansion.

Using within lists #

When using the include image within a list, you must prefix the include image tag block with a   and the proper indentation in order to ensure correct alignment. If no   is used, the list items after the include image will start over at 1.

The first item in the list

  &nbsp; {% include image.html ... %}

The second item in the list

The first item in a nested list

    &nbsp; {% include image.html ... %}

The second item in a nested list

The third item in a list

Copy these images #

Feel free to copy the include tag blocks that display the following images. Paste these as templates into your working documents, then edit as appropriate:

{% include image.html
  url='../assets/img/general/web-ui-login.png'
  img-id='webuilogin'
  alt-text='WebUI login dialog'
  descr-text='Image depicting WebUI login dialog'
  pxwidth='250'
  screenshot='true'
%}

{% include image.html
  url='../assets/img/general/data-engg-schematic-overview.png'
  img-id='des'
  alt-text='Starburst cluster overview'
  descr-text='Image depicting Starburst architecture'
  pxwidth='650'
  modal='true'
%}

HTML syntax #

This syntax allows you to add further tweaks such as sizing. If you copy this example, remember to surround site.baseurl with double open and close brace { } characters.

<img src="site.baseurl/assets/img/logo/starburst.png" alt="Starburst logo"
description="Starburst Logo" width="200"/>

Markdown syntax #

Only for very simple image cases, use Markdown syntax, which is: ![title](../assets/img/image.png). Use a relative path to the image from the current location, or use the site.baseurl substitution token. (If you copy the following example, remember to surround site.baseurl with double open and close brace { } characters.)

![Starburst](site.baseurl/assets/img/logo/starburst.png)

Logos #

The following conditions should be met when optimizing and saving brand logos to use on the site:

Property	Value
Bounding	Trim/Cropped
Width	400px
Height	Auto (Constrained proportions)
Background	Transparent
Format	PNG
Example

When adding a brand logo to the beginning of a page, for example the Red Hat marketplace page, the initial content section should contain the logo using the following HTML structure:

<div class="row-with-logo">
  <div markdown="1" class="row-with-logo-text-container">
    <-- Add text content here -->
  </div>
  <div class="row-with-logo-image-container">
    <img
      class="img-fluid"
      src="../assets/img/logo/dbeaver.png"
      alt="{{page.title}}"
    />
  </div>
</div>

Similarly, the image.html include may also be used by changing the HTML snippet above to:

<div class="row-with-logo">
  <div markdown="1" class="row-with-logo-text-container">
    <-- Add text content here -->
  </div>
  <div class="row-with-logo-image-container">
    {% include image.html
      url='../assets/img/logo/dbeaver.png'
      alt-text='DBeaver Logo'
    %}
  </div>
</div>

This HTML structure ensures that the logo will be placed to the right of the content, creating a two column layout that allows the text to not produce a staggered wrapping effect. Once a certain breakpoint has been reached the logo will then move to above the text content.

All content after the above HTML snippet will take up the full width of the container.