• ♡ Sponsor

    Working with Images

    #File #Filelist

    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, resizing options can simply be passed to a with statement or foreach loop. Please check out the images template shipped with theme skeleton package to get started quickly.

    <@ foreach in '*.jpg, *.png' { width: 400, height: 300, crop: true } @>
        <# Code to be used for each image in the filelist. #>
        <img 
        src="@{ :fileResized }" 
        alt="@{ :basename }"
        title="@{ :file }"
        width="@{ :widthResized }"
        height="@{ :heightResized }"
        >
        <p>@{ :caption | markdown }</p>
    <@ else @>
        <# Code to be used when the list of images is empty. #>
    <@ end @>
    

    Instead of using a glob pattern in the foreach loop, it is recommended to use the filelist object.

    If you look at the example code above you will notice the use of certain runtime variables to access image properties within a code block. While the :file variable represents the original file, :fileResized refers to path of the resized and cached version. The :caption variable enables you to get the caption text stored along with the file.


    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.

    Toolbox  ⁄
    img — Toolbox

    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.

    Template Language  ⁄
    Objects — Template Language

    Objects in Automad are conceptually just lists containing iteratable items to be used in foreach loops. Such lists are automatically populated with default sets of elements while rendering a page. They always exist. The actual content of any object is depending on the current ...

    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 ...

    • Automad
    • Developer Guide
    • Building Themes
    • Template Language
    • Working with Images
    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
  • Variables →
  • Pipe →
  • Toolbox →
  • Objects →
  • Control Structures →
  • Snippets
  • Includes
  • Inheritance
  • Using Extensions
  • Recursive Navigations
  • Working with Images
  • Multilingual Content