Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Component Properties
  • Usage

Was this helpful?

  1. Components

Image

Image component with responsive behavior for the system image.

PreviousHTMLNextInput

Last updated 12 months ago

Was this helpful?

Component Properties

  • src: (required) The image source URL.

  • alt: (optional) The image alt text.

  • title: (optional) The image title.

  • align : (optional) Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class. options (float-start, mx-auto d-block, float-end)

  • responsive : (optional) Images in Bootstrap are made responsive with .img-fluid. This applies max-width with 100% and height with auto to the image so that it scales with the parent width. thumbnails : (optional)(true|false) In addition to Bootstrap border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

  • rounded : (optional)(true|false) Rounded image.

  • image_utility_classes : An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.

Usage

Use the Image component with all possible options:

{%
  include 'radix:image' with {
    src: 'https://picsum.photos/id/140/600.jpg',
    alt: 'Image alt description',
    title: 'Image title',
    align: 'center',
    responsive: true,
    rounded: true,
    thumbnails: true,
    width: 600,
    height: 400,
    loading: 'lazy',
    image_utility_classes: [
      'mb-5',
    ],
    attributes: create_attribute().setAttribute('crossorigin', 'anonymous'),
  }
%}
Bootstrap docs