Questions tagged [responsive-images]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
24
votes
3answers
6k 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 ...
4
votes
1answer
310 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 ...
4
votes
2answers
611 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 ...
3
votes
0answers
141 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 ...
2
votes
3answers
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
2
votes
2answers
178 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 ...
2
votes
1answer
310 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"&...
2
votes
2answers
84 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 ...
2
votes
1answer
264 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 ...
2
votes
1answer
265 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 ...
1
vote
1answer
445 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 ...
1
vote
1answer
367 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 ...
1
vote
1answer
560 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 ...
1
vote
1answer
178 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 ...
1
vote
1answer
897 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%") %} {# ...
1
vote
0answers
291 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 ...
0
votes
1answer
327 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 ...
0
votes
1answer
454 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 %...
0
votes
1answer
24 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 ...
0
votes
1answer
355 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)" ...
0
votes
1answer
162 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 ...