38

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-retina screen) You probably don’t want to output images that are larger than their original size For #1, we need some way of identifying images that are 1X vs. 2X....


37

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, the 'currentStep' value for that task is no longer incrementing. That's your stuck task. Set that task's status to 'pending', and reload any page in the ...


21

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. Update: As of Craft 2.2, even if the transform generation URL doesn’t get directly requested (e.g. if it’s a social media image, or a srcset size that doesn’t ...


21

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 -%} {{ image.getUrl(transform) }} {%- else -%} {{ image.url }} {%- endif %}" alt="{{ image.title }}" /> And for extra cleanliness ...


18

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 the caches via the Clear Caches button on the settings page Update Asset Indexes on that same page Failing those, manually delete the contents of the /craft/...


16

If you simply go into your craft_assettransformindex table and empty it, that should trigger brand new transformations for everything.


15

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 "original" if you want to get a non-resized photo back. Although this does answer my question, I feel the behavior between handling this "asset" ...


12

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 having to change settings in the admin panel by simply using an absolute path in the Admin assets source URL setting (i.e. /assets/img/uploads) and a relative ...


10

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: {% macro transform(image, desiredWidth) %} {% set originalWidth = image.getWidth(false) %} {% if desiredWidth < originalWidth %} {{ image.getUrl({...


10

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 different. If you are not concerned about art direction, a picture element is overkill and you should just look at srcset and sizes attributes on an image tag. Yoav ...


9

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 instead of having to define the whole transform model They are then available to be used in supported field types e.g. in the Rich Text field type you can select an ...


9

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 full paths for your Asset definitions. You'll need definitions for both the file system path and URL path. Let's name them appropriately so we don't get ...


9

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 your webserver (or S3, etc.) directly. No PHP involved.


9

Sure, from the Redactor "Insert Image" modal:


8

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 your web server can serve up as quickly as any other file.


8

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: min(150, image.width), height: min(100, image.height) } %} <img src="{{ image.getUrl(transform) }}">


8

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 %} {% set imgStyles = "background-image: url('" ~ img.getUrl() ~ "');"|raw %} {% if img.hasFocalPoint %} {% set x = img.focalPoint | first * 100 ~ '%' %} ...


7

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: https://straightupcraft.com/articles/responsive-images-with-twig-macros


7

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 looks like it's doing the things you mentioned: craft()->db->createCommand()->truncateTable('assettransformindex'); craft()->db->createCommand()->...


7

Set generateTransformsBeforePageLoad in your config/general.php file. 'generateTransformsBeforePageLoad' => true, Configures Craft to generate new image transforms right when getUrl() is called, rather than when the browser first requests the image.


7

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 least Craft 2.6.2778 for this config setting to work.


6

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: /asset-folder/_300x100/image.jpg Personally I like the first one more. . Users: The difference for users is, that only predefined-transforms can be selected in ...


6

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 }}"> Notice the difference? Your current way would be correct if you had set a variable somewhere with the name of squarePhoto, like so: {% set squarePhoto = '...


6

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 CSS, by rounding the corners to 50%.


6

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 = 'largeIndex' %} {% endif %} <div class="item"><img src="{{ asset.getUrl(transform) }}" /></div> {% endfor %} or more simply (making ...


6

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 transforms we just deal with by manually syncing the folders every now and then. I believe Andrew Welch has a script to help manage that - I've not tried it https://...


6

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.


5

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 } %} {% set halfUrl = image.getUrl(half) %} <img src="{{ halfUrl }}" srcset="{{ image.url }} 2x" width="{{ half.width }}" height="{{ half.height }}"> {% ...


5

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 profiles, but I think they only get included using Imagick (photos can look really bad if profile is missing unexpectedly!).


5

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 photos %} {% set p = photo.image.first() %} <div> <a href="{{ p.getUrl(large) }}"><img src="{{ p.getUrl(thumb) }}"></a> ...


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