Skip to main content
Share Your Experience: Take the 2024 Developer Survey

Questions tagged [responsive-images]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
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? ...
joomkit's user avatar
  • 2,034
1 vote
2 answers
579 views

Generating srcset in a similar way to WordPress

I come from a WordPress background, so I'm attempting to create responsive images the way I'm accustomed to with WordPress. Perhaps that's the wrong approach, I'm not sure. In WordPress I would ...
MrCarrot's user avatar
  • 121
0 votes
1 answer
405 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 ...
Adam's user avatar
  • 255
1 vote
1 answer
2k views

responsive image and srcset with Imager

Have read this article, but still having issues. Craft 3.0.4 Imager 2.0.0 My template code is: {% set image = block.image.one() %} {% set focalPoint = image.focalPoint | default("50% 50%") %} {# ...
CreateSean's user avatar
  • 1,973
1 vote
1 answer
786 views

Get all available asset transforms

Is there a way to get all available image transforms in a template? I would like to generate the srcset for responsive images programmatically. I thought of creating a macro for that but haven't ...
obs's user avatar
  • 541
1 vote
1 answer
620 views

Using ImageOptimize, how do you loop through photos?

I'm stumped on a basic concept for looping images. I'm using the plugin ImageOptimize with Imgix and Amazon S3. The code below works but only shows one image (when there's more for that field). For ...
Jon Livingston's user avatar
2 votes
2 answers
215 views

Setting Imager crop position dynamically

I have a simple dropdown attached to each asset that allows the user to select the desired crop position (in %, so '0% 0%' , '0% 50%' , and so on). In my twig template I have this inside a for loop ...
rjdvsk's user avatar
  • 105
2 votes
1 answer
387 views

loop through responsive images in matrix with imager plugin

I have a content block in a matrix field where I'm trying to output a loop of three sub images. I can get it to work using the following code: {% case "secondaryImage" %} <div class="container"&...
mention79's user avatar
  • 543
0 votes
1 answer
399 views

Does Craft CMS support these features? [closed]

I am evaluating different CMS. I need to know if Craft CMS supports these features: Preview function for different devices, screen sizes and screen configurations(portrait/landscape) Is it possible ...
unlimited101's user avatar
1 vote
1 answer
757 views

Responsive background images in carousel

I have a homepage carousel using http://flickity.metafizzy.co/ and the images are set as background images and lazyload. What I need to do is to make them into responsive images, so that different ...
mention79's user avatar
  • 543
2 votes
2 answers
94 views

Another gallery question

I have looked around but cant find an answer to this. I have a structure for my gallery page, in-which there are three separate entries called A, B and C. There are different images within these ...
Spheriri's user avatar
  • 132
1 vote
0 answers
310 views

Responsive images using Imager when original asset isn't large enough

Anyone here using the Imager plugin and creating responsive images using srcset and sizes? Any ideas on how to avoid creating multiple versions of the same image if the original asset uploaded is ...
Terry Upton's user avatar
  • 1,894
3 votes
0 answers
170 views

Image transforms directory not being created

I've upgraded to El Capitan from Yosemite, created several Image Transforms in the CP (see pic) but they don't seem to be creating the folders in the uploads dir. I've checked folder permissions for ...
Daniel Van Cuylenburg's user avatar
0 votes
1 answer
758 views

Responsive Images Srcset and Sizes based on Image Transform

So I have setup a macro based on the excellent article here; https://straightupcraft.com/articles/responsive-images-with-twig-macros {% macro responsive(asset, options={}) %} {% import _self as self %...
Terry Upton's user avatar
  • 1,894
0 votes
1 answer
481 views

Issues with picture and image transforms

I'm having some issues with when applying image transforms. Hopefully it's something obvious I'm over looking. The code is as follows: <picture> <source media="(min-width: 401px)" ...
Lettie's user avatar
  • 2,033
2 votes
3 answers
1k views

Detect device screen size in craft cms

How can I get the screen size in craft cms? I mean the device width in px, so for example I can get a static map image with the exact size to fit the device screen
neoDev's user avatar
  • 285
0 votes
1 answer
174 views

Dynamically load either standard res or hi-res background image

I am currently dynamically loading a background image using the style tag: <li style="background-image: url({{ project.portfolioImage.first().url }})"> I want to add support for retina ...
Steph's user avatar
  • 73
2 votes
1 answer
294 views

Generating responsive images from cropped source file

I've been trying to adapt this helpful post to work with Image Transforms, so that the starting point for generating the responsive images is a cropped high resolution original. I've defined a ...
Rob Webb's user avatar
  • 113
4 votes
2 answers
698 views

Is there any way of setting / forcing a default image transform for images inserted via rich text blocks?

I have an image transform that is designed for images inserted into posts, and I'd like to make sure this is always applied to any image in a post. The problem I'm having is that for images inserted ...
Nick F's user avatar
  • 1,215
1 vote
1 answer
207 views

How to use sprite sheets effectively and responsively in Craft

I'm planning for a site which will use a number of small image elements, which leads naturally to looking for first-load speedups by using sprites. Since the site will be responsive, it will need the ...
narration_sd's user avatar
  • 1,707
2 votes
1 answer
327 views

Efficiently writing multiple transforms

I use a responsive image plugin similar to picturefill. On my local environement it works well, on my live install however the last trasnform isn't applied and I receive a 404. I guess it might be ...
KSPR's user avatar
  • 3,786
24 votes
3 answers
7k views

How can I automatically generate responsive images from a single hi-res asset?

I want to be able to upload a single high resolution image, and output a <picture> element that outputs it with a few different sizes and resolutions automatically (using Picturefill to sort out ...
Brandon Kelly's user avatar
4 votes
1 answer
333 views

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

I want my site to serve 1X and 2X images depending on the browser using something like Picturefill, and I don’t want the 1X version to just be automatically generated using a transform - I want to be ...
Brandon Kelly's user avatar