Images look blurry and cropped (cut off)

Updated: August 18, 2016

The same image may be used in theme on more places at once. For example featured image of post displayed in header of post, also in list of posts displayed via Element, post displayed on Archive/Category page, or in sidebar using Widget. In all of these places is needed image in different size. It is not effective (mainly because of website load speed) to show image in full size in place where small image is enough – for example in sidebar. That’s why theme crop images to size necessary for specific place.

Our themes use own caching system for images. With first page load, theme resize images loaded on current page and save them in cache folder. With next page load are images loaded from cache folder, they are not resized again.

So if your image looks blurry, you should use larger image. Because in place where is expected for example 600px wide image you are using small image wide about 200px, your image is extended to 600px and image looks blurry.

Where in the source code can I look for images?

First of all look at sturcture of our files to see how are files divided in our themes.
If you found wanted file, you should look for image tag that may look like:

<img src="{imageUrl $item['image'], width => 100, height => 75, crop => 1}" alt="{!$title}" class="detail-image" />

You can change widht, height and also turn on/off crop option ( set to 0 ).