Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
hello
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
A quick advice - can your question be simplified in some way to easily recreate locally and understand better? Just the bare essential would be more comfortable to work with.
:) ok, sorry about that

basically I want to:
  1. generate a group of thumbnails from a jcropthumb editable.
  2. automatically recreate the above thumbnails if editable changes
  3. have a button for user to recreate all thumbnails in a template
i think that covers it, and far more simply!
hello,
does anyone have any ideas or pointers?
Code: Select all
<cms:editable name='grp'  label="Images"  type='group' />
<cms:editable group='grp' order='100' type='jcropthumb' assoc_field='gg_image' name='img_x3' width='672' height='672' show_preview='1' label='672x672px' desc='x3'  />
<cms:editable group='grp' order='110' type='jcropthumb' assoc_field='img_x3'   name='img_x2' width='448' height='448' show_preview='1' label='448x448px' desc='x2'  />
<cms:editable group='grp' order='120' type='jcropthumb' assoc_field='img_x3'   name='img_x1' width='224' height='224' show_preview='1' label='224x224px' desc='x1'  />


i've tried all combinations of thumbnail & jcropthumb, different params like auto_refresh, etc. eg.
Code: Select all
<cms:editable group='grp' order='100' type='jcropthumb' assoc_field='gg_image' name='img_x3' width='672' height='672' show_preview='1' label='672x672px' desc='x3'  />
<cms:editable group='grp' order='110' type='jcropthumb' assoc_field='img_x3'   auto_refresh='1' hide_assoc_preview='0' name='img_x2' width='448' height='448' show_preview='1' label='448x448px' desc='x2'  />
<cms:editable group='grp' order='120' type='jcropthumb' assoc_field='img_x3'   auto_refresh='1' hide_assoc_preview='0' name='img_x1' width='224' height='224' show_preview='1' label='224x224px' desc='x1'  />


but just can't figure out if this is reasonably simply doable or whether it's back to the dark arts (for me at least) of php.

Would really appreciate the tiniest of hints if anyybody has any.
cheers,
gwil
4 posts Page 1 of 1