• ♡ Sponsor

    img

    #File

    Creates an image tag for the first image file matching the specified glob pattern. The image can also be cropped by defining a maximum width and height.

    <@ img { options } @>

    Options

    file: false String|false
    The path to the file to be placed. In case a glob pattern is provided, the first match is used.
    width: false Integer|false
    The optional maximum width of the placed image.
    height: false Integer|false
    The optional maximum height of the placed image.
    crop: false Boolean
    Defines whether the placed image is cropped or scaled to fit the specified height and width.
    class: false String|false
    An optional class for the <img> tag.

    Related

    User Guide  ⁄
    Linking to Files and Pages — User Guide

    There are multiple places where you need to specify URLs to pages or paths to media files within your content. That may be a link within your markdown or a parameter for a tool or extension represented by a variable. Most of the times you would just use the buttons in the editor ...

    User Guide  ⁄
    Resizing Images — User Guide

    To optimize the speed of your website it is required to use images of an appropriate size. Images can be resized inline or by using the file manager. When using the image selection dialog, it is therefore possible and recommended to add the appropriate dimensions in pixels.

    Toolbox  ⁄
    filelist — Toolbox

    Updates the configuration of the filelist object. A foreach loop can be used to iterate over the files in the list. This method has no output.

    Objects  ⁄
    Filelist — Objects

    The filelist contains by default all image files of the current page. The selection of files can be modified by using the filelist function. Check out this detailed example of how to use a filelist. Similar to the pagelist object, it is possible to get the number of files in the ...

    Control Structures  ⁄
    foreach — Control Structures

    The foreach loop iterates over objects. Depending of the type of the object in use, Automad provides different runtime variables within the code block of the loop to refer to items of the object. The :i variable refers to the index of the current iteration in the loop.

    Control Structures  ⁄
    with — Control Structures

    The with statement allows for processing code associated with a given page or file. When using a page's URL or one of the keywords prev and next as an argument, the context within the block of code changes to that page. When using a file path, it is possible to access related ...

    Template Language  ⁄
    Working with Images — Template Language

    Images are the most important type of media used in the internet and are essential for any kind of blog or portfolio. Automad's template language provides handy methods for basic image processing like resizing and cropping. When using a single image or iterating a set of images, ...
    • Automad
    • Developer Guide
    • Building Themes
    • Template Language
    • Toolbox
    • img
    Discuss
    Packages
    Release Notes
    Support
    Terms of Use
      Become a Sponsor
      GitHub
      Twitter
      Facebook
      Instagram
      2013-2022 by Marc Anton Dahmen
    Released under the MIT license
    A faceless machine, creating one's portrait in the internet.
  • Automad
  • Getting Started
  • System
  • User Guide
  • Developer Guide
  • Headless Mode
  • Discuss
  • Packages
  • Developer Guide ←
  • Building Themes ←
  • Template Language ←
  • Toolbox
  • breadcrumbs
  • filelist
  • img
  • nav
  • navChildren
  • navSiblings
  • navTop
  • navTree
  • newPagelist
  • pagelist
  • queryStringMerge
  • redirect
  • set