hello
i've got a site setup with the following generating responsive images from an uploaded image.
this works fine, but for the functional images, i would ideally like to auto-create 2 of the 3 in each group by resizing the largest image.
so in the following section:
r_img_224_448 & r_img_224 would be created from r_img_224_672, and automatically recreated when it was changed.
if I try to set the assoc_field to point to r_img_224_672 they are not auto-generated at all, and need to be manually recreated.
if i do the same with type thumbnail they won't create at all.
also, (though i think an answer to the above will also do this), I would like to be able to allow the user to control the compression on the images (on a per base image basis), how can i regenerate all thumbnails if this value changes (a button would do).
i can do the changing value for compression, its the regeneration i'm getting nowhere with
does anyone know of a way to do this or is it just not doable?
hopeful thanks in advance
i've got a site setup with the following generating responsive images from an uploaded image.
- Code: Select all
<cms:hide><!-- full images (maintain aspect ratio, can be cropped) --></cms:hide>
<cms:editable order=g_order_r_img name='grp_r_img_full' label="Full Responsive Images" desc="Full images shown on site, maintaining original aspect ratio" type='group' />
<cms:editable group='grp_r_img_full' order='10' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_full' show_preview='1' label='Full size' desc='full size [preview full size]' hidden='0'/>
<cms:editable group='grp_r_img_full' order='20' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_1920' width='1920' show_preview='1' preview_width='960' label='1920px wide' desc='HD up [preview 1/2 size]' />
<cms:editable group='grp_r_img_full' order='30' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_1600' width='1600' show_preview='1' preview_width='800' label='1600px wide' desc='medium desktop, portrait tablet, ipad@2x [preview 1/2 size]' />
<cms:editable group='grp_r_img_full' order='40' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_1366' width='1366' show_preview='1' preview_width='768' label='1366px wide' desc='most common desktop [preview 1/2 size]' />
<cms:editable group='grp_r_img_full' order='50' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_1024' width='1024' show_preview='1' preview_width='512' label='1024px wide' desc='some netbooks, some tablets [preview 1/2 size]' />
<cms:editable group='grp_r_img_full' order='60' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_960' width='960' show_preview='1' preview_width='480' label='960px wide' desc='inbetweener [preview 1/2 size]' />
<cms:editable group='grp_r_img_full' order='70' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_800' width='800' show_preview='1' preview_width='400' label='800px wide' desc='mobile, 360x2, 180x3 [preview 1/2 size]' />
<cms:editable group='grp_r_img_full' order='80' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_640' width='640' show_preview='1' label='640px wide' desc='mobile, 640, 320@2' />
<cms:editable group='grp_r_img_full' order='90' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_320' width='320' show_preview='1' label='320px wide' desc='mobile, 180x3' />
<cms:hide><!-- placeholder with aspect-ratio --></cms:hide>
<cms:editable group='grp_r_img_full' order='999' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='0' quality='0' name='r_img_ph' width='5' show_preview='1' preview_width= '60' label='5px wide' desc='loading placeholder [preview 12x size]' hidden='0'/>
<cms:hide><!-- functional images (fixed ratio, can be cropeed) --></cms:hide>
<cms:editable order="<cms:add g_order_r_img '1' />" name='grp_r_img_func' label="Functional Responsive Images" desc="Images used for lists, headings, etc., square aspect ratio" type='group' />
<cms:hide><!-- 224x224 (14rem @ 16px) --></cms:hide>
<cms:editable group='grp_r_img_func' order='100' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_224_672' width='672' height='672' show_preview='1' label='672x672px' desc='x3' />
<cms:editable group='grp_r_img_func' order='110' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality='100' name='r_img_224_448' width='448' height='448' show_preview='1' label='448x448px' desc='x2' />
<cms:editable group='grp_r_img_func' order='120' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality='100' name='r_img_224' width='224' height='224' show_preview='1' label='224x224px' desc='page headers (large)' />
<cms:hide><!-- 192x192 (12rem @ 16px) --></cms:hide>
<cms:editable group='grp_r_img_func' order='200' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_192' width='192' height='192' show_preview='1' label='192x192px' desc='page headers (small), card lists (large)' />
<cms:editable group='grp_r_img_func' order='210' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_192_384' width='384' height='384' show_preview='1' label='384x384px' desc='x2' />
<cms:editable group='grp_r_img_func' order='220' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_192_576' width='576' height='576' show_preview='1' label='576x576px' desc='x3' />
<cms:hide><!-- 120x120 (7.5rem @ 16px) --></cms:hide>
<cms:editable group='grp_r_img_func' order='300' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_120' width='120' height='120' show_preview='1' label='120x120px' desc='card lists (medium)' />
<cms:editable group='grp_r_img_func' order='310' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_120_240' width='240' height='240' show_preview='1' label='240x240px' desc='x2' />
<cms:editable group='grp_r_img_func' order='320' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_120_360' width='360' height='360' show_preview='1' label='360x360px' desc='23' />
<cms:hide><!-- 80x80 (5rem @ 16px) --></cms:hide>
<cms:editable group='grp_r_img_func' order='400' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_80' width='80' height= '80' show_preview='1' label='80x80px' desc='card lists (small)' />
<cms:editable group='grp_r_img_func' order='410' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_80_160' width='160' height='160' show_preview='1' label='160x160px' desc='x2' />
<cms:editable group='grp_r_img_func' order='420' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_80_240' width='240' height='240' show_preview='1' label='240x240px' desc='x3' />
<cms:hide><!-- placeholder with square --></cms:hide>
<cms:editable group='grp_r_img_func' order='999' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='0' quality='0' name='r_img_ph_sq' width='5' height='5' show_preview='1' preview_width= '60' label='5x5px' desc='square loading placeholder [preview 12x size] - Placeholder' hidden='0'/>
this works fine, but for the functional images, i would ideally like to auto-create 2 of the 3 in each group by resizing the largest image.
so in the following section:
- Code: Select all
<cms:hide><!-- 224x224 (14rem @ 16px) --></cms:hide>
<cms:editable group='grp_r_img_func' order='100' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality=g_img_comp name='r_img_224_672' width='672' height='672' show_preview='1' label='672x672px' desc='x3' />
<cms:editable group='grp_r_img_func' order='110' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1' quality='100' name='r_img_224_448' width='448' height='448' show_preview='1' label='448x448px' desc='x2' />
<cms:editable group='grp_r_img_func' order='120' type='jcropthumb' assoc_field='gg_image' no_aspect='0' limit_to_max='1
r_img_224_448 & r_img_224 would be created from r_img_224_672, and automatically recreated when it was changed.
if I try to set the assoc_field to point to r_img_224_672 they are not auto-generated at all, and need to be manually recreated.
if i do the same with type thumbnail they won't create at all.
also, (though i think an answer to the above will also do this), I would like to be able to allow the user to control the compression on the images (on a per base image basis), how can i regenerate all thumbnails if this value changes (a button would do).
i can do the changing value for compression, its the regeneration i'm getting nowhere with
does anyone know of a way to do this or is it just not doable?
hopeful thanks in advance