13twelve

const responsiveImageSizes = (sizes, feConfig = {}, relativeUnits = true) => {
    if (!feConfig.structure || !feConfig.structure.columns || !feConfig.structure.container || !feConfig.structure.gutters || !feConfig.structure.gutters.inner) {
      return '100vw';
    }

    // remSize - base for rem calcs
    const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
    const remCalc = (px) => `${ parseFloat(px) / remSize }rem`;
    //
    const getUnitValue = (val) => {

13twelve

<?php
/**
 * Generate responsive image sizes
 * Takes a sizes object:
 * 
 * responsiveImageSizes({
 *   "sm": "100vw",
 *   "md": 4,
 *   "lg": 7,
 *   "xl": "80%",

13twelve

<?php

function responsiveImageSrcset($url, $options = []) {
  // Doc: https://github.com/area17/a17-behaviors/wiki/responsiveImageSrcset
  if (!$url) {
    return '';
  }

  $opts = [
    'sizes' => [200,400,600,1000,1600,2200,2800],