Image Modifiers

Learn how to use Parsley image modifiers including resizing, and accessing image attributes such as image file name, title, and more.

.getImage(width, height, type)

Function takes a width, height, and an optional type (fit or crop) parameter and returns a URL to that image. There are many ways to utilize this function. Fit is the default type and does not need to be explicitly declared. Crop type requires 2 parameters and explicit declaration. The list below shows examples of these calls. Learn how crop and fit work with this video.

// .getImage(W, H, fit or crop)
<img src="{{ }}" />
<img src="{{ }}" />
<img src="{{,100,fit) }}" />
<img src="{{,,fit) }}" />
<img src="{{,100,fit) }}" />
<img src="{{,100,crop) }}" />


When called on an image reference, returns the image file name.

{{ page.image.getImageFileName() }}


When called on an image reference, returns the image title.

{{ page.image.getImageTitle() }}


Function does not take parameters and returns the original URL to that file. This is how to access files stored in media that are not images, such as PDFs and MP4s. You can also use this call to access the original file of an image that has not been optimized or altered by

<a href="{{ page.download_file.getMediaURL() }}" >Download</a>
// <a href="" >Download</a>


Function takes a user's email and requests an image from the Gravatar API.

<img src="{{ thispage.author_email.gravatar() }}" />
// <img src="" />