Questions tagged [responsive-images]
The responsive-images tag has no usage guidance.
23
questions
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 ...
- 34.4k
4
votes
1
answer
335
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 ...
- 34.4k
4
votes
2
answers
703
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 ...
- 1,215
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 ...
2
votes
3
answers
2k
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
- 285
2
votes
2
answers
217
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
...
- 105
2
votes
1
answer
391
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"&...
- 543
2
votes
2
answers
95
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 ...
- 132
2
votes
1
answer
300
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 ...
- 113
2
votes
1
answer
336
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 ...
- 3,786
1
vote
2
answers
633
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 ...
- 121
1
vote
1
answer
813
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 ...
- 551
1
vote
1
answer
623
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
1
answer
762
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 ...
- 543
1
vote
1
answer
211
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,707
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
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%") %}
{#
...
- 1,983
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 ...
- 1,894
0
votes
1
answer
400
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 ...
- 103
0
votes
1
answer
771
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 %...
- 1,894
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
0
votes
1
answer
486
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)" ...
- 2,033
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 ...
- 73