This code allows you to generate a responsive image tag that uses "srcset" and "sizes" attributes using a file location on your dotCMS server (ie. "/path/to/myfile.jpg"). All of the image sizes are generated automatically using dotCMS's dynamic image resizing (https://dotcms.com/docs/latest/image-resizing-and-processing).
<h1>Responsive images from file asset image</h1>
#macro(responsiveImageFromPath $fileURL $sizes $altText $resList $focalPoint)
#if(!$UtilMethods.isSet($fileURL))
ERROR: You need to specify a file URL
#end
## Defaults
#if(!$UtilMethods.isSet($altText))
#set($sizes = "100vw") ## default to full width image
#end
#if(!$UtilMethods.isSet($altText))
#set($altText = "")
#end
#if(!$UtilMethods.isSet($resList))
#set($resList = [350,600,1000,1500,2000,2500])
#end
#if(!$UtilMethods.isSet($focalPoint))
#set($focalPoint = "50% 50%")
#end
## Get just the path (strip off file name)
#set($myFolderUrl = $fileURL.substring(0,$fileURL.lastIndexOf("/")))
#set($myFolder= $folderAPI.findCurrentFolder("${myFolderUrl}/",$host))
#set($myFolderInode = $myFolder.inode)
## Get just the file name (strip off path)
#set($myFileName = $fileURL.replaceAll("\/([^/]*/)+([^/]*)$","$2"))
## Use the folder inode and filename to find the file
#set($images = $dotcontent.pull("+contentType:FileAsset +conFolder:${myFolder.inode} +FileAsset.title:${esc.q}$myFileName${esc.q}",5,"modDate desc"))
#if($images.size() > 1)
Error: There seems to be more than one image in this folder/host with this filename. Getting the first one.
#end
## Get the object, which should be the only thing found
#set($fileImage = $images.get(0))
#set($jpegQuality = 75)
#set($defaultRes = 600)
#set($defaultSrc = "/contentAsset/image/${fileImage.identifier}/fileAsset/filter/Resize,Jpeg/resize_w/$!{defaultRes}/jpeg_q/$!{jpegQuality}")
#set($originalImgWidth = $fileImage.fileAsset.width) ## https://dotcms.com/docs/latest/content-object-in-velocity
#set($originalImgHeight = $fileImage.fileAsset.height)
## Add all the image sizes we want to be in srcset
#set($srcSet = "")
#foreach($res in $resList)
#if($res < $originalImgWidth)
##set($thisSrc = "/contentAsset/image/${fileImage.identifier}/fileAsset?filter=Resize,Jpeg&resize_w=$!{res}&jpeg_q=$!{jpegQuality}")
#set($thisSrc = "/contentAsset/image/${fileImage.identifier}/fileAsset/filter/Resize,Jpeg/jpeg_q/$!{jpegQuality}/resize_w/$!{res}")
#set($srcSet = "${srcSet},${thisSrc} ${res}w")
#end
#end
## Add the original size (JPG compressed) to the srcset
#set($srcSet = "${srcSet},/contentAsset/image/${fileImage.identifier}/fileAsset/filter/Jpeg/jpeg_q/$!{jpegQuality} ${originalImgWidth}w")
## Strip off leading comma
#set($srcSet = $srcSet.replaceAll("^,",""))
## Strip HTML out of caption, then make sure quotes won't break HTML
#set($altText = $bigPhoto.caption.replaceAll('<(.|\n)+?>',''))
#set($altText = $altAttr.replaceAll("$esc.q","""))
<img src="$defaultSrc" sizes="${sizes}" srcset="$srcSet" width="$originalImgWidth" height="$originalImgHeight" alt="$!altText" title="$!altText" style="object-position:${focalPoint};">
#end
#responsiveImageFromPath("/templates/2017/2017-oc-edu/img/clocktower-green.jpg", "(min-width:1024px) 33.3vw, (min-width:640px) 50vw, 100vw", "This is my alt text", [350,600,1000,1500,2000,2500], "33% 50%")