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