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>
${esc.h}macro(responsiveImageFromPath ${esc.d}fileURL ${esc.d}sizes ${esc.d}altText ${esc.d}resList ${esc.d}focalPoint)
	${esc.h}if(!${esc.d}UtilMethods.isSet(${esc.d}fileURL))
		ERROR: You need to specify a file URL
	${esc.h}end
	${esc.h}${esc.h} Defaults
	${esc.h}if(!${esc.d}UtilMethods.isSet(${esc.d}altText))
		${esc.h}set(${esc.d}sizes = "100vw") ${esc.h}${esc.h} default to full width image
	${esc.h}end
	${esc.h}if(!${esc.d}UtilMethods.isSet(${esc.d}altText))
		${esc.h}set(${esc.d}altText = "")
	${esc.h}end
	${esc.h}if(!${esc.d}UtilMethods.isSet(${esc.d}resList))
		${esc.h}set(${esc.d}resList = [350,600,1000,1500,2000,2500])
	${esc.h}end
	${esc.h}if(!${esc.d}UtilMethods.isSet(${esc.d}focalPoint))
		${esc.h}set(${esc.d}focalPoint = "50% 50%")
	${esc.h}end
	${esc.h}${esc.h} Get just the path (strip off file name)
	${esc.h}set(${esc.d}myFolderUrl = ${esc.d}fileURL.substring(0,${esc.d}fileURL.lastIndexOf("/")))
	${esc.h}set(${esc.d}myFolder= ${esc.d}folderAPI.findCurrentFolder("${esc.d}{myFolderUrl}/",${esc.d}host))
	${esc.h}set(${esc.d}myFolderInode = ${esc.d}myFolder.inode)
	${esc.h}${esc.h} Get just the file name (strip off path)
	${esc.h}set(${esc.d}myFileName = ${esc.d}fileURL.replaceAll("\/([^/]*/)+([^/]*)${esc.d}","${esc.d}2"))
	${esc.h}${esc.h} Use the folder inode and filename to find the file
	${esc.h}set(${esc.d}images = ${esc.d}dotcontent.pull("+contentType:FileAsset +conFolder:${esc.d}{myFolder.inode} +FileAsset.title:${esc.d}{esc.q}${esc.d}myFileName${esc.d}{esc.q}",5,"modDate desc"))
	${esc.h}if(${esc.d}images.size() > 1)
		Error: There seems to be more than one image in this folder/host with this filename. Getting the first one.
	${esc.h}end
	${esc.h}${esc.h} Get the object, which should be the only thing found
	${esc.h}set(${esc.d}fileImage = ${esc.d}images.get(0))
	${esc.h}set(${esc.d}jpegQuality = 75)
	
	${esc.h}set(${esc.d}defaultRes = 600)
	${esc.h}set(${esc.d}defaultSrc = "/contentAsset/image/${esc.d}{fileImage.identifier}/fileAsset/filter/Resize,Jpeg/resize_w/${esc.d}!{defaultRes}/jpeg_q/${esc.d}!{jpegQuality}")
	${esc.h}set(${esc.d}originalImgWidth = ${esc.d}fileImage.fileAsset.width) ${esc.h}${esc.h} https://dotcms.com/docs/latest/content-object-in-velocity
	${esc.h}set(${esc.d}originalImgHeight = ${esc.d}fileImage.fileAsset.height)
	${esc.h}${esc.h} Add all the image sizes we want to be in srcset
	${esc.h}set(${esc.d}srcSet = "")
	${esc.h}foreach(${esc.d}res in ${esc.d}resList)
		${esc.h}if(${esc.d}res < ${esc.d}originalImgWidth)
			${esc.h}${esc.h}set(${esc.d}thisSrc = "/contentAsset/image/${esc.d}{fileImage.identifier}/fileAsset?filter=Resize,Jpeg&resize_w=${esc.d}!{res}&jpeg_q=${esc.d}!{jpegQuality}")
			${esc.h}set(${esc.d}thisSrc = "/contentAsset/image/${esc.d}{fileImage.identifier}/fileAsset/filter/Resize,Jpeg/jpeg_q/${esc.d}!{jpegQuality}/resize_w/${esc.d}!{res}")
			${esc.h}set(${esc.d}srcSet = "${esc.d}{srcSet},${esc.d}{thisSrc} ${esc.d}{res}w")
		${esc.h}end
	${esc.h}end

	${esc.h}${esc.h} Add the original size (JPG compressed) to the srcset
	${esc.h}set(${esc.d}srcSet = "${esc.d}{srcSet},/contentAsset/image/${esc.d}{fileImage.identifier}/fileAsset/filter/Jpeg/jpeg_q/${esc.d}!{jpegQuality} ${esc.d}{originalImgWidth}w")
	${esc.h}${esc.h} Strip off leading comma
	${esc.h}set(${esc.d}srcSet = ${esc.d}srcSet.replaceAll("^,",""))
	${esc.h}${esc.h} Strip HTML out of caption, then make sure quotes won't break HTML
	${esc.h}set(${esc.d}altText = ${esc.d}bigPhoto.caption.replaceAll('<(.|\n)+?>',''))
	${esc.h}set(${esc.d}altText = ${esc.d}altAttr.replaceAll("${esc.d}esc.q","&quot;"))

	<img src="${esc.d}defaultSrc" sizes="${esc.d}{sizes}" srcset="${esc.d}srcSet" width="${esc.d}originalImgWidth" height="${esc.d}originalImgHeight" alt="${esc.d}!altText" title="${esc.d}!altText" style="object-position:${esc.d}{focalPoint};">
${esc.h}end

${esc.h}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%")