Image Path URL Encoding in Sightly | Community
Skip to main content
New Participant
July 31, 2023
Solved

Image Path URL Encoding in Sightly

  • July 31, 2023
  • 2 replies
  • 970 views

There is a container component developed having a image field to author a Background Image with sling:resourceType --> cq/gui/components/authoring/dialog/fileupload. When images with space in their name are drag and drop into the image field it is stored along with the spaces in the node. As the image properties are read in Sightly using properties.imagepath, the spaces in the image path is creating issue to display the image as background image. Is there a way to encode the URL of the image path in Sightly or to remove or replace the image path spaces in sightly (HTL). The image path stored in page is -- /content/dam/bhn/Flowers FTD Image.png .

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SivakumarKanoori

@sayali1 : 

 

Using below Javascript function you can get the path for the image 

 

"encodeURI('/content/dam/bhn/Flowers%20FTD%20Image.png'); 

'/content/dam/bhn/Flowers%20FTD%20Image.png'

 

You can invoke this Javascript functionn from your sightly code.

 

Thanks 

Siva

2 replies

SivakumarKanoori
SivakumarKanooriAccepted solution
New Participant
August 1, 2023

@sayali1 : 

 

Using below Javascript function you can get the path for the image 

 

"encodeURI('/content/dam/bhn/Flowers%20FTD%20Image.png'); 

'/content/dam/bhn/Flowers%20FTD%20Image.png'

 

You can invoke this Javascript functionn from your sightly code.

 

Thanks 

Siva

Thanks,Siva
Saravanan_Dharmaraj
New Participant
August 1, 2023