2022 Developer Survey is open! Take survey.
38 votes
Accepted

How can I automatically generate responsive images from a single hi-res asset?

You can do this using image transforms. There are a couple things you’re going to need to consider though: Not every image will necessarily be high-res (e.g. a computer screenshot taken on a non-...
user avatar
37 votes
Accepted

Generating pending image transforms stuck in process

More of a "How do I debug stuck tasks" answer, but it should help you. Open up your craft_tasks table. You'll see one task in with a 'status' of 'running' and if you refresh the table several times, ...
user avatar
  • 66.4k
21 votes
Accepted

Image transforms returning cpresources url

That’s what getUrl() returns if the transform hasn’t been generated yet. When the browser requests that URL, Craft will generate the transform, and respond with a 302 redirect to the actual image URL. ...
user avatar
21 votes
Accepted

Transform Info from Handle?

Sortof – you can find out what an image’s width would be with a transform applied to it via AssetFileModel’s - getWidth() and getHeigth() <img src=" {%- if image.getWidth(transform) > 970 -%...
user avatar
18 votes
Accepted

Is there a way to force Assets to redo transforms?

I can't actually reproduce your problem but here's a couple of things to check and try: Clear your browsers cache! Did you re-upload through Assets with the same filename and click replace? Purge all ...
user avatar
  • 2,301
17 votes

How do I force Craft to regenerate assets transform?

If you simply go into your craft_assettransformindex table and empty it, that should trigger brand new transformations for everything.
user avatar
  • 23.6k
15 votes
Accepted

Change the size of a users profile photo?

I found the answer on the Craft website under the UserModel section: getPhotoUrl( size ) Returns a URL to the user’s photo at a given size in pixels (defaults to 100). You can also pass in "...
user avatar
12 votes

What accurately will set asset paths for multilingual sites?

If each locale uses the same TLD but uses a subfolder for localized content (i.e. example.com/en, example.com/de, etc.). You can move between development, staging, and production environments without ...
user avatar
11 votes

How do image focal points work in Craft 3?

While we’re piggybacking, here’s a snippet that goes one step further and generates the necessary CSS to position an untransformed image: {% set img = entry.headingImage.one %} {% if img %} {% ...
user avatar
10 votes
Accepted

Prevent Asset Transforms from scaling Image past 100%

Yes. getWidth will give you an image's width: {% set originalWidth = image.getWidth(false) %}. You want to apply the transform if desiredWidth is less than originalWidth. I would write a twig macro: ...
user avatar
10 votes

How can I automatically generate responsive images from a single hi-res asset?

Quick comment: If you are using generated transforms, you are likely not doing any "art direction" with your images. Basically all your images will be the same, their dimensions alone would be ...
user avatar
9 votes
Accepted

What are the Pros and Cons to each image transform technique?

Both methods essentially do exactly the same thing to the image however there are two advantages to pre-defining them in the control panel: You can just call a transform handle in your templates ...
user avatar
  • 2,301
9 votes
Accepted

What accurately will set asset paths for multilingual sites?

An answer that works is to make your own environment variables, setting those apart from language variables, and as needed for each of your multiple sites. Then you can use these variables to make ...
user avatar
  • 1,697
9 votes
Accepted

Can image transforms decrease performance?

Nope. Once a transform has been generated once, Craft remembers that, and saves it right in your asset source. Future page loads will get a direct URL to that generated image, so it gets loaded via ...
user avatar
9 votes
Accepted

apply transform to image uploaded into Redactor?

Sure, from the Redactor "Insert Image" modal:
user avatar
  • 66.4k
8 votes

Can image transforms decrease performance?

For all practical purposes, no. The performance hit for images transforms happens the first time the transform is requested and generated. After that, the images are served as a normal file that ...
user avatar
  • 66.4k
8 votes
Accepted

Can you prevent upscaling when using Craft's image transforms?

As found here, this actually seems to be a requested feature that is not yet implemented. However, in the link given, Brandon also supplied a workaround for the time being: {% set transform = { width:...
user avatar
7 votes

How can I automatically generate responsive images from a single hi-res asset?

There is a great article here which I thoroughly recommend reading. It goes into this in great detail. It even includes a twig macro that deals with both retina images as well as responsive images: ...
user avatar
  • 769
7 votes
Accepted

Is it possible to clear caches and re-index assets programattically?

I guess it depends. So, behind the scenes, Craft can have different cache drivers. You might use the db or file cache, or something like Redis or Memcache. Took a peek at ClearCachesTool, and it ...
user avatar
  • 2,947
7 votes
Accepted

Cache/ColdCache & checking for ungenerated image transforms

Set generateTransformsBeforePageLoad in your config/general.php file. 'generateTransformsBeforePageLoad' => true, Configures Craft to generate new image transforms right when getUrl() is called,...
user avatar
7 votes
Accepted

Image transform is turning my jpegs dark

Setting 'preserveImageColorProfiles' => true, in craft/config/general.php solved the problem. https://craftcms.com/docs/config-settings#preserveImageColorProfiles Note that you need to be running at ...
user avatar
6 votes

What are the Pros and Cons to each image transform technique?

Technical: The only technical difference is, that predefined-transforms have a different directory structure: /asset-folder/_transform-name/image.jpg whereas inline-transforms use dimensions: /...
user avatar
  • 8,316
6 votes
Accepted

Transforms not working

It's a very subtle difference, but what you have added there is a variable, when what you are looking for is a string. <img src="{{ asset.getUrl('squarePhoto') }}" alt="{{ asset.title }}"> ...
user avatar
  • 2,947
6 votes
Accepted

Can I "circle crop" an image asset?

The short answer: No. However, as this answer states, it will be possible to do this in the future. Just as a tip, I know it doesn't answer your question: it's an effect you can easily achieve with ...
user avatar
  • 6,288
6 votes
Accepted

Transform different image if specific id or order

You could do that like so: {% for asset in entry.portraits %} {% if loop.index == 2 or loop.index == 4 %} {% set transform = 'largeIndexHalf' %} {% else %} {% set transform = '...
user avatar
6 votes
Accepted

What are the best practices for the development setup?

That's the setup we use here. It's ok, but local development runs slowly because the database is off-site - we'll be moving to an internal database server in the new year because of that. Image ...
user avatar
  • 3,084
6 votes
Accepted

How do image focal points work in Craft 3?

Focal points are used mainly for when Asset transforms (i.e. cropping) are performed in Craft. They tell Craft where it should focus on the image when performing these actions.
user avatar
  • 66.4k
5 votes
Accepted

Is it possible to use percentage values for width and height in image transforms?

It’s possible to do this from your templates: {% for image in entry.myAssetsField %} {% set half = { width: (image.width/2)|round, height: (image.height/2)|round } %} {% ...
user avatar
5 votes
Accepted

Using image transforms sometimes results in bloated file sizes.

Is Imagick installed on your server? If not, Craft uses GD as a "fallback". Chances are that transforms with GD lead to poorer image quality and longer calculation times. I'm not sure about ICC ...
user avatar
  • 35.8k
5 votes
Accepted

Multiple image transforms of same image in template

You might consider setting a variable for the image, then one for each transform type. {% set thumb = { mode: 'crop', width: 300, height: 300 } %} {% set large = { width: 600 } %} {% for photo in ...
user avatar
  • 3,901

Only top scored, non community-wiki answers of a minimum length are eligible