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-...
- 33.7k
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 ...
- 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 ...
- 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)
- 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....
- 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 ...
- 20.2k
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 ...
- 1,022
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, ...
- 406
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 ...
- 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:
...
- 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 ...
- 33.7k
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 ...
- 677
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.
- 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 %}
- 586
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. ...
- 2,977
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.
- 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.
- 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 ...
- 11.9k
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 ...
- 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 . '...
- 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 ...
- 572
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()-&...
- 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 ...
- 667
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 ...
- 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 %}
<...
- 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>
{% ...
- 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 ...
- 117
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 ...
- 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 ...
- 33.7k
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
......
- 7,547
Only top scored, non community-wiki answers of a minimum length are eligible