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....
17
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 documentation is not very helpful in this regard, also there are no errors or helpful output to indicate that my configuration might be the issue.
16
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 will do something like this:
{# Fetches the first image #}
{% set image = entry.featureImage.first() %}
{# It's good to check if you actually have an image before ...
11
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 file data, this means you have to loop on the field, e.g.:
{% for asset in entry.wireframeImages %}
<img src="{{ asset.getUrl() }}" />
{% endfor %}
...
answered Nov 21 '15 at 19:56
Mats Mikkel Rummelhoff
18.8k3 gold badges26 silver badges59 bronze badges
11
No need for a plugin.
Just add:
"imageResizable": true,
"imagePosition": true,
to your chosen redactor config file i.e. (/craft/config/redactor/standard.json)
10
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.getHeight() %}
{# portrait #}
{% elseif myImage.getWidth() > myImage.getHeight() %}
{# landscape #}
{% else %}
{# square #}
{% endif %}
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 ...
8
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, filename asc').limit(240); %}
You should be able to save some twig code, maybe even requests. Haven't tested this though.
8
The imageTransform value is actually an object, representing the entire dropdown field.
Update the first line to this...
{% set imageTransform = storyEntry.storyThumbnailTransform.value %}
This will ensure that the selected value is passed on, instead of the full object.
(The reason that you see the proper value when you output it directly is because the ...
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
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 you’re uploading 1X images to]
{folder.path}_2x/
Restrict allowed file types:
[ √ ]
[Images]
Target Locale: [Same as source]
Limit: 1
Go to Settings > ...
7
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 with.
{% for asset in entry.projectBanner %}
<img src="{{asset.url}}>
{% endfor %}
As some additional information I would checkout eager-loading in ...
7
The solution is to enable "assets for this source have public URLs" in the volume settings.
6
Simply using 'RAND()' in the order parameter does the trick.
{% for image in entry.banner.limit(1).order('RAND()') %}
{{ image.url }}
{% endfor %}
5
?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. If you upload a new file, it's mtime value will change causing a different URL and, in turn, forcing the user's browser to serve the new image, instead of the ...
5
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.
5
I forgot we added a tool for this, too, under Settings->Tools->Clear Caches Tool->Asset Transform Index.
5
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 exists before referencing it:
{% if seo.twittercard|length %}
<meta(name='twitter:image:', content='{{ seo.twittercard.first.getUrl() }}')>
{% endif %}
...
5
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 have them all in your desired sort order.
You can now query for the assets models by passing that IDs array to
the id parameter and adding fixedOrder(true).
{% ...
5
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 . 'runtime/temp/' . $imageInfo['basename'];
file_put_contents($tempPath, fopen($data['image_url'], 'r'));
// insert the file into assets
$response = ...
5
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 upload the slide image.
You can render this into whatever markup you'd like (even bootstrap).
As for cropping an image and converting it into a jpg, check out ...
5
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()->assets->getRootFolderBySourceId($iAssetSourceId)->id;
$sTempFilePath = sys_get_temp_dir() . DIRECTORY_SEPARATOR . $sFilename;
$sFileContents = ...
5
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 assets from my 'Uploads' source. Giving that a public url fixed the problem.
As I said, it's obvious now, but it'd be nice in the documentation could make even ...
5
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 was our case).
There are two solutions to fix this problem:
Install EXIF extension
Install and use Imagick instead of GD.
As Imagick is the recommended image ...
4
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 %}
<img src="{{ image.getUrl({ width: 600 }) }}">
{% else %}
<img src="{{ image.getUrl() }}">
{% endif %}
4
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>
{% endfor %}
You can get the folderId by inspecting the folder-name in the CP.
4
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 in shuffle(entry.banner) %}
{% if loop.first %}
{{ image.url }}
{% endif %}
{% endfor %}
Then, I realized there was a less verbose option:
{% ...
4
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 you want to continue uploading from the control panel make sure that you're using Imagick instead of GD.
Craft will use Imagick if it is available to PHP by ...
4
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 scripts hidden in the images, and it’s not something you can disable.
4
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
...BUT if it's in rather a field on the variant you would instead reference it as:
lineitem.purchasable.myImage
(This is because lineitem refers to a variant.......
Only top voted, non community-wiki answers of a minimum length are eligible