Proposal for supporting responsive images with srcset/<picture> element
#71
Comments
|
@gingerchew - did you ever develop a solution for this? I took an alternative approach - a separate snippet to calculate the responsive image requirements to generate a It requires the breakpoints of the css grid system you are using (Bootstrap, Tailwind etc.) are predefined and for the column width your image will be at each breakpoint to be specified. It then creates Example usage is below. My implementation has several todo's outstanding and the code could be tidier. I'm happy to share the Snippet if you were interested in working on it if you think it would be useful for the Community? |
|
That does a bit more than I need, but if you wanna share the pthumb parts of it I'd love to see |
Leave this with me for a bit, I'll dig out the code and post it here. |
|
Finally got fed up enough to give it a shot myself, this is what I came up with. <?php
/**
* Generate the sizes and srcset attributes automatically
* based on passed options similar to the pthumb &options field
*/
if (empty($input)) {
return;
}
$pt_settings = [];
if (empty($pt_settings)) {
if (!$modx->loadClass('phpthumbof', MODX_CORE_PATH . 'components/phpthumbof/model/', true, true)) {
$modx->log(modX::LOG_LEVEL_ERROR, '[imageSizes] Could not load phpThumbOf class.');
return 'Could not load phpthumbof for '.$input;
}
}
$pThumb = new phpThumbOf($modx, $pt_settings, $scriptProperties);
$bp_options = $modx->getOption('bp', $scriptProperties);
$img_options = $modx->getOption('options', $scriptProperties);
if (!empty($img_options)) {
$img_options = explode(',', $img_options);
}
$sizesAttr = 'sizes="';
$srcsetAttr = 'srcset="';
$srcAttr = 'src="';
if (!empty($bp_options)) {
$i = 0;
foreach(explode(',', $bp_options) as $breakpoint_option) {
$src = $pThumb->createThumbnail($input, $img_options[$i].'&dims=1');
$dims = getimagesize($src['file']);
$src['width'] = $dims[0];
$src['height'] = $dims[1];
$sizesAttr .= '(min-width: '.$breakpoint_option.'px) '.$src['width'].'px';
$srcsetAttr .= $src['src'].' '.$src['width'].'w';
$i += 1;
if ($i != sizeof($img_options)) {
$sizesAttr .= ', ';
$srcsetAttr .= ', ';
} else {
$srcAttr .= $src['src'].'"';
}
}
}
$sizesAttr .= '" ';
$srcsetAttr .= '" ';
$output = $sizesAttr . $srcsetAttr . $srcAttr;
return $output;Then you would use it like this [[imageSizes? &input=`path/to/image/file.jpeg` &bp=`1200,576` &options=`w=500,q=60&w=400`]]I'm not really a modx/php dev, so if there is any input/improvements, I'm open to them |
|
My apologies, I clean forgot about this. I intended to clean up the snippet before posting it publicly but have been flat out on other tasks. Here's my version. Much of it needs tidied, the debugging effort is far too repetitive (it can add text to the image output to help check what the responsive images are doing) and the output should really be built from a template chunk with placeholders. Snippet
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've been racking my brain trying to think of a way to do this other than doing n pthumb snippets in 1 chunk
The way I currently do it:
But I thought what if instead each option was processed like an array similar to how CSS short hand vs expanded properties are handled.
Meaning that when passed the options, like this:
Then two images would be generated, but only calling the snippet once. This might mean that it only works with something like toPlaceholder, but maybe thats a fair trade off?
Then to differentiate the images, I see two paths. One is my personal dream scenario, the other is what i imagine is the easier solution.
The first would be being able to also add a comma separated list to the
&toPlaceholderoption:The second one would be to suffix it with a number
[[+pt-img-1]]or to put a number as the placeholder[[+pt-img.1]]:This hit me on the drive home and so I wanted to float it to see if it was interesting to anyone else, in scope, or even possible for that matter.
The text was updated successfully, but these errors were encountered: