Generate responsive image tag from image file path

Description

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

Code

<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","&quot;"))

	<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%")