README

• Introduction
• Requirements
• Installation
• Twig
• Responsive Image Generator
• Image Style Generator
• Image Style Naming Conventions

INTRODUCTION

Improved responsive image handler along with other image enhancements.

REQUIREMENTS

This module requires the webp contrib module.

• https://www.drupal.org/project/webp

INSTALLATION

Install as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.

TWIG

There are 3 twig helpers available:

Single image

<!-- Auto will scale if only width or height is provided. Will focus crop if with and height are provided. -->
{{ neo_image_style(src, {auto: {width: 100}}, alt) }}
<!-- Exact will scale the image to width or height (whichever is greater) and then set the image to the width/height provided. -->
{{ neo_image_style(src, {exact: {width: 100, height: 100}}, alt) }}
<!-- Available size ops are: auto, size, scale, scaleCrop, crop, focal, focalWidth, exact. -->
{{ neo_image_style(src, {scale: {width: 100}}, alt) }}
{{ neo_image_style(src, {scaleCrop: {width: 100, height: 100}}, alt) }}
<!-- You can also provide a file or media entity directly -->
{{ neo_image_style(entity, {scale: {width: 100}}) }}

Responsive image

<!-- Available size ops are: auto, size, scale, scaleCrop, crop, focal, focalWidth, exact. -->
{{ neo_image(src, {sm: {op: 'exact', width: 100, height: 100}, md: {op: 'exact', width: 200, height: 200}}, alt) }}
<!-- You can also provide a file or media entity directly -->
{{ neo_image(entity, {sm: {op: 'exact', width: 100, height: 100}, md: {op: 'exact', width: 200, height: 200}}, alt) }}

RESPONSIVE IMAGE GENERATOR

Build a picture element that provides breakpoint media query images along with webp support.

From Media or File Entity

/** @var \Drupal\media\MediaInterface $entity */
$entity = \Drupal::entityTypeManager()->getStorage('media')->load(1);
$neoImage = NeoImage::createFromEntity($entity);
$neoImage->getSm()->scaleCrop(200, 200);
$neoImage->getMd()->crop(400, 300, 'left-top');
$neoImage->getLg()->scale(600);
// The auto() method will use 'focal_point_scale_and_crop' when width and height
// are provided, and 'image_scale' when width or height are provided.
$neoImage->getXl()->auto(1400, 800);
// The focal() method uses the focal_point module to perserve the focused area
// with the crop.
$neoImage->get2Xl()->focal(1600, 1000);
$build = $neoImage->toRenderable();

IMAGE STYLE GENERATOR

Build a dynamic image style that will utilize on-demand effects.

/** @var \Drupal\media\MediaInterface $entity */
$entity = \Drupal::entityTypeManager()->getStorage('media')->load(1);
$neoImageStyle = new NeoImageStyle();
$neoImageStyle->focal(300, 300);
$neoImageStyle->toRenderableFromEntity($entity, 'Alt Text', 'Title Text');

$uri = 'public://image/image.png';
$neoImageStyle = new NeoImageStyle();
$neoImageStyle->focal(300, 300);
$neoImageStyle->toRenderableFromUri($uri, 'Alt Text', 'Title Text');

IMAGE STYLE NAMING CONVENTIONS

Image styles are automatically created based on the effects added to a given style. The style names are such that they are a short as possible and URL-safe.

Image Effect Conversion

Property Conversion

Anchor Conversion