Questions tagged [image-transforms]
Craft's native, non-destructive image manipulations.
220
questions
1
vote
2
answers
40
views
ImageTransform Focal Point Cache Busting
I have a Question about image transform focal point behavior.
Twig templating or with php. Getting the url of an asset with a transform $asset->getUrl('transformer')
If i am understanding the ...
- 471
0
votes
0
answers
29
views
Image Transformation causes error 503
I have too many images on a overview page, and it kills the server which creates a error 503.
I converted all source images to less than 1MB, but it still crashes the server. (Using Imager X on craft ...
- 3,786
1
vote
2
answers
42
views
Image Transform not working
I have set transforms in admin but when I call those transforms in Twig nothing happens. 'getUrl('thumb')' shows blank in return although when calling like
<img src="{{ asset.getUrl('thumb') }...
0
votes
0
answers
94
views
CRAFT_WEB_ROOT incorrect when trying to "Move Craft’s Files Below the Webroot"
I'm having trouble deploying a project:
My web hoster automatically generates vhosts for each domain, with their respective webroot being /var/www/myuser/mydomain.com/; so I followed the Moving Craft’...
- 111
1
vote
1
answer
54
views
Passing a variable to an include to set an image transform throws Setting Unknown Property error
I'm using an entry field to set an image transform handle:
{% set format = block.imageCrop %}
Then I'm trying to pass that to an include:
{% include 'partials/_img' with { format: format } %}
This ...
- 1,022
1
vote
1
answer
120
views
I'm trying to remove transforms if my image is an svg? Any tips or advice would be great
{% for icon in icons %}
{% set image = icon.icon.one() ?? null %}
{% if image %}
<div class="c c-md-6 c-lg-6">
...
- 13
1
vote
1
answer
187
views
Generate an Image from Title
I would like to generate image automatically on entry save, using the entry Title and a specified image as a background.
I was thinking to use the Preparse Field plugin, but it seems like it's not ...
- 110
1
vote
1
answer
83
views
Image Transform do not seem to save
We have about 700 images, with only a few transformations possible (about 10).
For some reason, the queue for "Image transformation" keeps getting bigger, and even once it gets all processed ...
- 113
1
vote
1
answer
246
views
Retrieve storage path of image transform instead of URL
I'm generating base64 encoded strings of very small image transforms to display a blurred version of images while the bigger asset is loading.
I'm trying to get the cached transform path (if it ...
- 131
1
vote
1
answer
160
views
Eager loading results in more queries
From what I understand it is wise to always eager load assets, I used it successfully in other cases, but here it results in a more queries, not fewer.
I am trying to eager load an asset in a matrix ...
- 123
0
votes
1
answer
146
views
Transformed JPGs have larger file size than original
Question
Why is it that sometimes a transformed JPG is larger than its original when it is transformed using Craft image transforms even though in my general.php file I set upscaleImages to false?
...
- 58
1
vote
2
answers
217
views
How to force a default transform on existing content within a Redactor field
There isn't much documentation out there about how to apply image transforms to images in a Redactor field.
I found this: Apply transform to image uploaded into Redactor?
And it's useful, since I can ...
- 367
2
votes
1
answer
824
views
Transform image in webp and get srcset
Is possible from a jpg image from an entry field return a serset in webp fomat?
Something like:
<source type="image/webp" srcset="800w webp image, 1200w webp image ">
...
- 35
1
vote
1
answer
1k
views
Image transform returns error
I'm trying to optimise page speeds for my website.
One thing I'm looking into is optimising image file sizes, but Image Transform in CraftCMS doesn't seem to work.
Before:
{% set asset = entry....
- 11
1
vote
1
answer
41
views
How can I use a transform on images in a body field that have been imported?
I have imported content into an old news entrytype for a news channel.
The odd image in the body field is 4000px wide.
Is there a way of automatically transforming these in a template or from the CLI?
...
- 2,048
1
vote
1
answer
232
views
CraftCMS Image Transform returning NULL on asset.url when stored on AWS S3 Bucket
So i'm using Craft as a headless CMS with a React frontend.
When querying assets on a S3 bucket and applying a transform to them in my GraphQL query the URL response is NULL.
This isn't the case when ...
0
votes
1
answer
2k
views
Craft CMS images transform srcset sizes
I'm new to craft cms and I'm trying to generate srcset sizes for an image with the following code.
{% set thumb320 = { width: 320, format: 'jpg' } %}
{% set thumb320_2x = { width: 640, format: 'jpg' } ...
- 69
1
vote
0
answers
53
views
Limiting image transform totals in queue?
In order to serve webp images where possible, and different sizes for different screens etc, I created a bunch of image transforms over the weekend - forgetting just how many images we have in the ...
- 141
2
votes
2
answers
1k
views
image transform to webp image format
I would like to ask how to convert or transform image format to webp.
Based on Craft CMS Documentation 3.x, you can set the image format to jpg, png, gif and webp but there is no webp available in my ...
- 109
1
vote
1
answer
201
views
Using a variable with getUrl()?
I'd like to be able to use a variable with the getUrl() method so I can change the filter parameter on the entry page (user controlled) instead of in the source code:
style="background-image = ...
- 215
1
vote
1
answer
506
views
Using NextJS image component with CraftCMS
NextJS has a really nice image component. To implement this I need to create a custom serialiser to get the image sizes from Craft . I can define a custom loader, however I'm not sure how feasible ...
- 193
1
vote
1
answer
170
views
Image Transforms and AWS
I regularly use srcset to serve large images, such as heroes, and take advantage of Craft's image transform capabilities in the implementation, e.g. <img srcset="{{ image.getUrl('img500') }} ...
- 1,463
2
votes
4
answers
353
views
TWIG dataUrl function for resized images
Craft provides the very nice TWIG function dataUrl(pathToImg) to inline images in e-mails.
E.g.
<img src="{{ dataUrl('@webroot/assets/img/logo.svg')" />
will base64 encode the image ...
- 1,973
1
vote
1
answer
101
views
Does deleting an original asset but keeping the transform folder asset make Craft replace the original file with the biggest transform?
I have a client who has uploaded many giant images to the CMS (8mb+). I'd like to free up that space now that those image have been transformed to more web-friendly sizes. Is it safe for me to delete ...
- 481
2
votes
1
answer
490
views
How to detect white background
In my product catalog, some product images need to have the css attribute object-fit: cover while some need the object-fit: contain:
I'd like to detect the white background, possibly on upload (to ...
- 679
0
votes
0
answers
39
views
Why do image Transformations never finish rendering regardless if I use GD2 or ImageMagick?
I'm running Craft 2 with PHP 5.6.40 on a Windows 2019 Server under IIS (x64, non-thread-safe, FastCGI).
PHP -m doesn't show any issues with my extensions, regardless if I use GD2 or ImageMagick.
But ...
- 101
1
vote
1
answer
160
views
Image Transforms not generated - permission problem?
Since I installed my Craft based website on the production server the image transforms are no longer generated. The tasks runs through more than 5000 images but doesn't generate new ones.
There have ...
- 551
1
vote
1
answer
238
views
Generate transforms only working on default install (multi-site)
I have a multi-site setup running within Craft 3. Everything seems to be working nicely, except for image transforms. For example:
The following transform on the default site works correctly:
https://...
- 53
0
votes
1
answer
435
views
Changing Image transforms for different media queries
Is it possible to set different image transforms for different media queries?
I have a grid layout containing 1 large image and four smaller images on large screens. I have created two image ...
- 255
2
votes
1
answer
199
views
How to reprocess image transforms that already exist in the database
If I import a Craft DB into my local db, and it has references to image transforms that existed in another environment, it won't recreate them in the filesystem when a page is loaded that asks for one ...
- 342
1
vote
2
answers
753
views
Animated GIFs not working in Craft with ImageMagick installed
When I upload a GIF I either get the first frame or a garbled image (https://share.getcloudapp.com/L1u7BXrA).
Looking around at similar questions, Craft needs ImageMagick installed to properly ...
- 173
1
vote
1
answer
349
views
Forcing creation of all transformations for all assets
Regarding a similar question I only found the advice to delete a table in the database but because I don't like fiddling with the db very much I like to ask: Are there ways to force craft to generate ...
- 63
0
votes
0
answers
816
views
Image Transform change causes 500 Internal Server Error
I had an image transform set on an entry that was working as expected. I updated the code, and it didn't work, so I reverted back to the old transform. It was literally going from
src="{{ image....
- 451
1
vote
1
answer
67
views
CP transform renders image 404
I have a transform in my CP called detail large.
IN my template the image will render normally.
<img class="img-fluid" src="{{ image.getUrl() }}" >
Wen i want to use the transform like below:
...
- 2,048
0
votes
0
answers
147
views
Apply image transform after image is placed on page
I have an overview (i.e. list with around 150 items). Each of those items has an appropriate "teaser image". When a user is hovering a list item the appropriate teaser image fades in, on mouse out it ...
- 101
1
vote
1
answer
196
views
Image processing in headless mode
How to do image processing & transformations when not using templates?
I'm using react-static for the frontend.
Is it possible to have CraftCMS process the images upon upload?
- 111
1
vote
1
answer
339
views
Image Transform of Transparent Images results with Black Background
As the title suggests, I am receiving a black background on my transparent PNGs. I'd prefer them to be white. I have enabled imagemagick in the config file but still no dice. I noticed GD library ...
1
vote
0
answers
117
views
FortRabbit - performance - image transforms
Anybody else have problems with image transforms on FortRabbit?
They sent me this article as some background - https://blog.fortrabbit.com/imagemagick-issues
I was using the light level of hosting (...
- 377
1
vote
1
answer
366
views
Image transforms not working on front-end
I'm able to upload images correctly to the server. I can see the thumbnail and view the larger image inside the control panel on the Assets page. However, the front-end image transforms result in a ...
- 2,503
1
vote
1
answer
104
views
Can I use GraphicsMagick with Craft CMS?
Short question: Can I use GraphicsMagick with Craft CMS? If yes, how can it be configured? thanks
- 1,973
2
votes
1
answer
3k
views
How can I set an absolute image url for Open Graph Image tags?
I need the final tag to look like this:
<meta property="og:image" content="http://mysite.com/uploads/resources/_hero/myimage.jpg">
If I use something like this:
{% set seoImage = entry....
- 23
1
vote
1
answer
33
views
Craft Equivelent of EE addon CE Image Bulk Tag?
I'm preparing to migrate an old ExpressionEngine site to Craft and there are channels with images that are being resized by wrapping the rich text editor with ce image bulk tag like this:
{exp:ce_img:...
- 1,983
1
vote
1
answer
180
views
Select Transform Feature with Asset Field
If you insert an image in a Rich Text field you get an option to apply a transform, but that is not true when using an Asset field to choose an image, which seems strange. Is there any way to ...
- 1,463
1
vote
1
answer
56
views
modify image contrast
In my experience is the build-in process of image transform not too kind to the image quality, even with the highest quality. In my case the brighter tones in the images are lost which means that ...
- 195
1
vote
1
answer
519
views
Craft isn't regenerating the image transform when the focal point changes
I've got a basic image transform in a template:
{% set crop = {
mode: 'crop',
width: 560,
height: 550,
quality: 80
} %}
<img src="{{ image.getUrl(crop) }}">
Once the ...
- 636
0
votes
1
answer
2k
views
Image Transforms not happening
Apologies if this has come up before. I did check but the previous post referred to version 2.x and was regarding a bug.
I have set up 2 image transforms for images but nothing works. The assets ...
- 103
2
votes
1
answer
533
views
Focal point: more control?
I originally had this setting in twig for gallery thumbnails:
{% set square150 = {
mode: 'crop',
width: 150,
height: 150,
quality: 75
position: 'center-center'
} %}
<img width=...
- 639
1
vote
2
answers
853
views
Is it possible to get a transformed image's file size (bytes, not dimensions)?
I'm using a transformed image in a context where there's a maximum file size. Is there a way to determine the transformed image's file size in the templates? .size can't run on the url string
- 228
2
votes
2
answers
63
views
Apply imageTransform on twitter media feed
{% set response = craft.twitter.get('statuses/user_timeline', { tweet_mode:'extended', count: 20 }) %}
{% if response.success %}
{% for tweet in response.data %}
{% ...
- 598
2
votes
1
answer
498
views
How to make PNGs crisp using Imager + Optipng and Craft 3?
I've installed Imager in a Craft 3 site and everything looks fine except my PNGs are fuzzy. I've set 'pngCompressionLevel' => 0, because I'm using Optipng and the docs say to do this. The PNGs have ...
- 1,972