Last call to make your voice heard! Our 2022 Developer Survey closes in less than a week. Take survey.

Hot answers tagged

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
17 votes
Accepted

Image asset url is not being output

So after looking through other craft websites to see how they where able to get images to work I discovered what I did wrong when setting up the asset source. The thing is though that the craft ...
user avatar
  • 333
16 votes
Accepted

Fetch Image URL from entry CMS

I bet this trips up a lot of people at first, but your asset field will return a ElementCriteriaModel, not your image. To get to image, you need to fetch it. If your field has only one image, you ...
user avatar
  • 2,947
12 votes

Image alignment and size in Redactor 2

No need for a plugin. Just add: "imageResizable": true, "imagePosition": true, to your chosen redactor config file i.e. (/craft/config/redactor/standard.json)
user avatar
  • 393
11 votes
Accepted

Is there a way to find out if images (assets) are landscape or portrait?

How about just using the getHeight() and getWidth() methods available on the AssetFileModel? Something like this: {% set myImage = entry.imagesField.first %} {% if myImage.getWidth() < myImage....
user avatar
  • 2,301
11 votes
Accepted

Looping through images in a Asset field type

An Asset field – like all relational fields, including Entries, Categories etc – always return an array-like object which is an instance of a class called ElementCriteriaModel. To output the actual ...
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
8 votes

Is there a way to create a "sticky" asset

Based on adding a lightswicht ("sticky") as suggested by @carlcs I think you should be able to solve this by just using two order fields. {% set images = craft.assets.folderId(18).order('sticky desc, ...
user avatar
8 votes
Accepted

Using Image Transform as another custom field

The imageTransform value is actually an object, representing the entire dropdown field. Update the first line to this... {% set imageTransform = storyEntry.storyThumbnailTransform.value %} This ...
user avatar
  • 23.6k
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

How can I upload separate 1X and 2X images?

You can do that like so: Create a new Assets field called “Hi-Res Image” (handle “hiResImage”) with the following settings: Restrict uploads to a single folder: [ √ ] Upload Location: [same source ...
user avatar
7 votes

Output image in template

When you are working with an asset field you are actually looking at the object so you need to call {{asset.url}} in order to actually output the path to the image or whatever asset you are working ...
user avatar
7 votes
Accepted

Craft 3 image asset getUrl() not showing

The solution is to enable "assets for this source have public URLs" in the volume settings.
user avatar
  • 305
6 votes
Accepted

Load an asset at random each page load

Simply using 'RAND()' in the order parameter does the trick. {% for image in entry.banner.limit(1).order('RAND()') %} {{ image.url }} {% endfor %}
user avatar
5 votes
Accepted

How do you output images without "?mtime" at the end of the url?

?mtime= should only appear for Assets images that are being served from a source that has Expires settings set (so, either an S3 or Google Cloud source). This is done done for cache busting purposes. ...
user avatar
5 votes
Accepted

Is 'real crop' a possibility?

Currently, no. It is on our list to open us the asset transformation pipeline so that plugins can add new transforms that go beyond what is available out of the box in Craft, though.
user avatar
  • 66.4k
5 votes
Accepted

Updated Image Transformation

I forgot we added a tool for this, too, under Settings->Tools->Clear Caches Tool->Asset Transform Index.
user avatar
  • 66.4k
5 votes
Accepted

Global Image Variables?

seo.twittercard is an ElementCriteriaModel. To access the actual asset, you need to use seo.twittercard.first (or equivalently: seo.twittercard.first()). However, you should always check that this ...
user avatar
5 votes
Accepted

Is there a way to create a "sticky" asset

Add a lightswitch field to your assets and query for assets with the lightswitch enabled first. Use the ids() method to get just the assets' IDs and merge them with the rest of your assets' IDs to ...
user avatar
  • 35.8k
5 votes
Accepted

Importing images from external url and saving to entry using plugin

Here's how I did it in a recent project: $fileIds = array(); // get remote image and store in temp path $imageInfo = pathinfo($data['image_url']); $tempPath = CRAFT_STORAGE_PATH . '...
user avatar
  • 7,228
5 votes

Upload any size image into carousel

You shouldn't need to create a custom plugin to do that. You can easily create a Matrix content field for your carousel. Create a new block called slide. From there you can create an asset field to ...
user avatar
5 votes
Accepted

Is it possible to create a new asset from an image URL?

Download the image into a temp file, then upload it as an asset. You can find $iAssetSourceId by looking at the URL when editing an asset source $iAssetSourceId = 4; $iAssetFolderId = (int)craft()-&...
user avatar
  • 228
5 votes

I am unable to correctly return the url of an uploaded asset

I found the answer in a similar post here: Image asset url is not being output My problem was with my Asset Source settings. Now that I think about it, it's obvious: I had no public URL declared for ...
user avatar
5 votes
Accepted

Images containing EXIF orientation tag are not rotated on upload

After some mail exchanges with Brad and Andris from Craft CMS, it turned out that there is an edge case where the image rotation on upload will not work if the EXIF extension is not installed (which ...
user avatar
  • 496
4 votes
Accepted

Image transform that only crops if image is larger than set dimensions

You can easily do this in twig with a conditional that checks if the width of the image is larger than your target transforms width. Try something like this: {% if image.getWidth()>600 %} <...
user avatar
  • 7,228
4 votes
Accepted

How would I list assets from a specific subfolder?

You could use the folderId-parameter in craft.assets: {% for image in craft.assets.folderId(1) %} <li><img src="{{ image.getUrl('thumb') }}" alt="{{ image.title }}"></li> {% ...
user avatar
  • 8,316
4 votes

Load an asset at random each page load

I wanted to see if the same thing could be accomplished using Craft's shuffle function. At first, I was looping through the image array and using an if statement to grab the first one: {% for image ...
user avatar
4 votes
Accepted

Images lose quality when I upload to Craft

There is a way to get Craft uploading my pixel-perfect images without re-save them? You can upload via FTP and then run the Update Asset Indexes tool from the Settings page in the control panel. If ...
user avatar
  • 66.4k
4 votes

Is there any way to prevent Craft from doing anything with uploaded GIF assets?

When you upload an image to Craft, the image is automatically “cleansed” using the same basic process that Craft uses to create image transforms. That happens to ensure that there are no malicious ...
user avatar
4 votes
Accepted

Getting image for product in Cart Screen

This actually depends where the image is stored - if the asset (image) field is on the product, and is called myImage, then as per Brad's example you'd use: lineitem.purchasable.product.myImage ......
user avatar

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