dotCMS - Responsive image from file path

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