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....


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

Preview function for different devices, screen sizes and screen configurations(portrait/landscape) Yes it has live preview. However this isn't per device. You can open the entry with a secret url and then user your browser tools to check different devices Is it possible to publish only a subset of my website? Yes, each entry can be turned on or off ...


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 > ...


5

I don't think it's possible natively, yet (as of 2.3). However, the ImageSmith plugin addresses this need by providing a 'bulk transform' Twig filter which detects images in HTML, applies a specified transform, and rewrites the HTML to reference the transformed images.


4

Merge operates on arrays or array-like things, and you probably handed it the string "card", which is why you got that error. I think what you want to do here is use the transform in the control panel to define the aspect ratio, but use the img macro to determine which sizes to transform to. You can calculate the aspect ratio like this: {% set aspectRatio ...


3

You’re currently passing in the image model you queried for using first() into the craft.imager.transformImage function, but you actually need to pass in the models that you get when looping through all images added to your block’s field. There’s no reason to do the first() at all, and it would add additional queries. {% if block.image|lenght %} {% for ...


3

So the OptimizedImages field in ImageOptimize is added to your asset as a field (just like Entries can have fields), because it's added to your Asset Volume layout. So you'd iterate through the images the same way you would iterate through any assets in Craft. I'm a little unclear on what part you're stuck on here? If you could clarify, I could help you ...


3

I think you are going to struggle with this in Craft, you would need to do it through Javascript. Craft runs off PHP which is a server side scripting language, you need a client side scripting language. Here is a good question which should help you with this: Get the size of the screen, current web page and browser window


2

I thought I'd just add my two cents, since no one has answered this yet. :) It's not clear from your question if these image elements are purely front-end design assets, or if the client/end-user needs to update them from within Craft. In the case of front-end assets, my opinion is that how these are used in your site is part of the projects build phase, ...


2

Here's what I've ended up with: {% macro srcset(image, maxCssWidth, maxCssHeight, includeDimensions) %} {%- spaceless %} {# Is this a 2X image? #} {% set is2x = image.is2x %} {# Determine the CSS width for the image, if it were output at 100% #} {% set cssWidth = (is2x ? round(image.width / 2) : image.width) %} {# Determine the ...


2

You can only do this reliably in JavaScript with window.screen.width and window.screen.height (MDN), or $(window).width() and $(window).height() when using jQuery. It’s possible to use a server side directory of device sizes and compare the user agent, however this solution quickly falls down when screen orientation is taken into account, not to mention ...


2

As Alec says, the server doesn't know details about the users screen, that has to be fetched with javascript client-side. But the information can be exchanged through a cookie so that the server can act according to it. When used in the manner you outline, this is known as Responsive design + Server Side Components, or RESS. I've made a plugin (a long time ...


2

It's not really a Craft CMS question, but... I don't remember Flickity supporting what you describe. You could try listening for screen size on pageload (and resize), assigning the correct image to the cell, and then creating the slideshow (destroying it first if it's a resize). But half the point of lazy loading is to avoid loading images until they're ...


2

Your issue is that Craft (or rather, Imager) is not treating your entry.cropPosition Dropdown field as a string; you're essentially passing the actual DropdownFieldType model (an array like object). To fix it, replace position: entry.cropPosition with position: entry.cropPosition.value Also, you might want to add a default value to the field, in case ...


2

If the value of imageCrop is a string in the correct format (ie 50% 50%, 0% 0%, or similar), this should do it: {% set entryImage = entry.pageHeader.first() %} {% set imageCrop = entryImage.cropPosition %} {% set transformedImages = craft.imager.transformImage(entryImage, [ { width: 1680, jpegQuality: 75 }, { width: 1080, jpegQuality: 75 }, { ...


2

Craft 3 PHP $transforms = Craft::$app->getAssetTransforms()->getAllTransforms(); foreach($allTransforms as $transform){ echo $asset->getUrl($transform->handle); } Craft 3 Twig {% set allTransforms = craft.app.getAssetTransforms.getAllTransforms() %} {% for transform in allTransforms %} {{ asset.getUrl(transform.handle) }} {%...


1

It looks like the sizes attribute needs to be tweaked. Absolute image sizes need to be specified in px units, not w. <img src="{{ craft.imager.base64Pixel(16, 9) }}" sizes="(min-width:641px) 400px, 100vw" srcset="{{ craft.imager.srcset(transformedImages) }}" class="{{ imageClass }}"> The way the browser reads sizes is left to right ...


1

You might try putting putting something like: <IfModule mod_php5.c> php_value max_execution_time "30" php_value memory_limit "256M" </IfModule> inside your .htaccess. file. You can tell what your PHP values are right inside Craft... unless you changed your admin trigger, just visit http://server/admin/utils/phpinfo and search for ...


1

Rather than having separate entries, have you considered having one type of image but assigning categories or tags to them. That way you could output your images in a random order using .order('RAND()') on the end of your for loop. Something like this: {% for entry in craft.entries.section('yourImageEntries').order('RAND()') %} Then if you want to output ...


1

You can set an array and order them by random. {% set gallery = craft.entries.section(['galleryA','galleryB','galleryC']) %} Then you have to display them by random using .order('RAND()') So your for loop looks like: {% for entry in craft.entries.section(gallery).order('RAND()') %}


1

This is actually a difficult problem, and there are many possible solutions, none of which are optimal (until img srcsets are better supported). The way I would probably go about doing this, depends on a couple of factors. If it is important to show something on load, you need to include an initial image in the markup, like you have already. If that is not ...


1

I just published a plugin called Retcon HTML – this includes a Twig filter for applying an image transform (named or inline) to all <img> tags in arbitrary HTML content (unfortunately only for local assets, for now). See this Wiki page for specific instructions on how to apply image transforms with Retcon.


Only top voted, non community-wiki answers of a minimum length are eligible