{"id":1224,"date":"2025-12-02T21:00:01","date_gmt":"2025-12-02T20:00:01","guid":{"rendered":"https:\/\/darrigan.net\/blog\/?p=1224"},"modified":"2025-12-07T14:02:20","modified_gmt":"2025-12-07T13:02:20","slug":"display-animated-gif-images-in-collectiveaccess","status":"publish","type":"post","link":"https:\/\/darrigan.net\/blog\/display-animated-gif-images-in-collectiveaccess\/","title":{"rendered":"Display animated GIF images in CollectiveAccess"},"content":{"rendered":"

In CollectiveAccess<\/a> (CA)\u00a0Pawtucket2<\/em> part (public site), GIF images are not animated by default. Here is a way to let GIF images to be animated.<\/p>\n

<\/p>\n

This tutorial is tested for CollectiveAccess<\/a> 1.7.17 and 2.0.9 but may work with intermediate and later versions.<\/p>\n

Modifications in Providence<\/h2>\n

1. media_processing.conf<\/h3>\n

The configuration file media_processing.conf<\/span> (in Providence’s app\/conf<\/span> or app\/conf\/local<\/span> directory) is used to set how any media file is treated or transformed before saving.<\/p>\n

GIF images should be treated differently as other images format. They must be saved in GIF format.<\/p>\n

In this file, create a new line for this mimetype, named image_gif<\/span> for example:<\/p>\n

MEDIA_ACCEPT = {<\/span>
\nimage\/jpeg = image,<\/span>
\n#<\/span> image\/gif = image,<\/span>
\nimage\/gif = image_gif,<\/span>
\nimage\/png = image,
\n…
\n}<\/span><\/p>\n

In the MEDIA_TYPE = {…}<\/span> part, insert this new part with same name, just after the image<\/span> part:<\/p>\n

image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0QUEUE = mediaproc, <\/span>
\n\u00a0 \u00a0 \u00a0QUEUED_MESSAGE = _(\u00ab\u00a0Image is being processed\u00a0\u00bb),<\/span>
\n\u00a0 \u00a0 \u00a0QUEUE_USING_VERSION = original,<\/span>
\n\u00a0 \u00a0 \u00a0VERSIONS = { <\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0icon = {<\/span>
\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0RULE = rule_icon_image_gif, VOLUME = images, BASIS = large,<\/span>
\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0}, <\/span>
\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0iconlarge = {<\/span>
\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_iconlarge_image_gif, VOLUME = images, BASIS = large,<\/span>
\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0}, <\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0tiny = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_tiny_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0}, <\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0thumbnail = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_thumbnail_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0widethumbnail = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_widethumbnail_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0}, <\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0small = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_small_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0preview = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_preview_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0preview170 = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_preview170_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0widepreview = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_widepreview_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0medium = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_medium_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0mediumlarge = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_mediumlarge_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0large = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_large_image_gif, VOLUME = images,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0page = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_page_image_gif, VOLUME = images, BASIS = large,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0original = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_original_image_gif, VOLUME = images,<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0USE_EXTERNAL_URL_WHEN_AVAILABLE = <use_external_url_when_available><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0tilepic = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0RULE = rule_tilepic_image_gif, VOLUME = tilepics, <\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0QUEUE_WHEN_FILE_LARGER_THAN = <queue_threshold_in_bytes><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0}<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0MEDIA_VIEW_DEFAULT_VERSION = tilepic,<\/span>
\n\u00a0 \u00a0 \u00a0MEDIA_PREVIEW_DEFAULT_VERSION = small<\/span>
\n},<\/span><\/p>\n

And in the MEDIA_TRANSFORMATION_RULES = {…}<\/span> part, add related rules:<\/p>\n

# ———————————————————<\/span>
\n# Image rules for GIF<\/span>
\n# ———————————————————<\/span>
\nrule_icon_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 72, height = 72, mode = fill_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_iconlarge_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 250, height = 250, mode = fill_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_tiny_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0 \u00a0width = 72, height = 72, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_thumbnail_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0 \u00a0width = 120, height = 120, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}
\n<\/span>},<\/span>
\nrule_widethumbnail_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 110, height = 75, mode = fill_box, crop_from = center, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n}, <\/span>
\nrule_preview170_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 170, height = 170, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_widepreview_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 200, height = 120, mode = fill_box, crop_from = center, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_preview_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 180, height = 180, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_small_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 240, height = 240, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_medium_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 400, height = 400, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_mediumlarge_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 580, height = 450, mode = bounding_box, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_large_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 700, mode = width, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_page_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SCALE = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width = 1000, mode = width, antialiasing = 0.5<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0SET = {format = image\/gif}<\/span>
\n},<\/span>
\nrule_original_image_gif = {},<\/span>
\nrule_tilepic_image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0SET = {tile_mimetype = image\/gif, format = image\/tilepic}<\/span>
\n},<\/span><\/p>\n

 <\/p>\n

2. media_display.conf<\/h3>\n

The configuration file media_display.conf<\/span> (in Providence’s app\/conf<\/span> or app\/conf\/local<\/span> directory) is used to assign which viewer<\/em> is used for which image format<\/em>.<\/p>\n

In the default_viewers = {…}<\/span> part of this file, one can find different sub-parts named: images<\/span>, video<\/span>, quicktimevr<\/span>, audio<\/span>, pdf<\/span>, text<\/span>, 3d<\/span>, 360<\/span>, binary<\/span>.<\/p>\n

GIF format appears in the images<\/span> sub-part, as defined in the mimetypes<\/span> list: image\/gif<\/span><\/p>\n

mimetypes = {image\/gif<\/span>, image\/jpeg, image\/tiff, image\/png, image\/x-dcraw, image\/x-psd, image\/x-dpx, image\/jp2, image\/x-adobe-dng, image\/x-dcraw, application\/dicom, image\/bmp, image\/x-bmp, image\/webp},<\/span><\/p>\n

and assigned viewer is TileViewer:<\/p>\n

viewer = TileViewer<\/span><\/p>\n

But it seems that TileViewer<\/em> isn’t displaying correctly animated GIF images.<\/p>\n

To resolve this issue, I suggest switching to QTVR<\/strong><\/em> as this viewer.<\/span><\/span><\/span><\/p>\n

To do so, create a new part in default_viewers<\/span> dedicated to GIF format, which we will call image_gif<\/span>. Remove the mimetype image\/gif<\/span> from the list of mimetypes of images<\/span> part and add it in the list of mimetypes for image_gif<\/span>, like this:<\/p>\n

default_viewers = {<\/span>
\n\u00a0 \u00a0 \u00a0image_gif = {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0mimetypes = {image\/gif},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0viewer = QTVR<\/span>
\n\u00a0 \u00a0 \u00a0},<\/span>
\n\u00a0 \u00a0 \u00a0images = {<\/span>
\n#<\/span>\u00a0 \u00a0 \u00a0 \u00a0 mimetypes = {image\/gif,<\/span> image\/jpeg, image\/tiff, image\/png, image\/x-dcraw, image\/x-psd, image\/x-dpx, image\/jp2, image\/x-adobe-dng, image\/x-dcraw, application\/dicom, image\/bmp, image\/x-bmp},<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0mimetypes = {image\/jpeg, image\/tiff, image\/png, image\/x-dcraw, image\/x-psd, image\/x-dpx, image\/jp2, image\/x-adobe-dng, image\/x-dcraw, application\/dicom, image\/bmp, image\/x-bmp, image\/webp},<\/span>
\n\u00a0 \u00a0 \u00a0viewer = TileViewer<\/span>
\n\u00a0 \u00a0 \u00a0},
\n<\/span>\u00a0 \u00a0 \u00a0…
\n…
\n<\/span>}<\/span><\/p>\n

Flush the cache files. Add a GIF image in an object representation to see if it works.<\/p>\n

Modifications in Pawtucket<\/h2>\n

The configuration file media_display.conf<\/span> (in Pawtucket’s app\/conf<\/span> or app\/conf\/local<\/span> directory) is used to assign which viewer<\/em> is used for which image format<\/em>.<\/p>\n

Apply the same modifications as seen above for the Providence.<\/p>\n

Flush the cache files and test it.<\/p>\n

For an example of application see this object:<\/p>\n

https:\/\/collections.univ-pau.fr\/pub\/index.php\/Detail\/objects\/605<\/a><\/p>\n

Choose the second image:<\/p>\n

\"Ordisavant<\/p>\n

You should see the animated GIF:<\/p>\n

\"Ordisavant<\/p>\n","protected":false},"excerpt":{"rendered":"

In CollectiveAccess (CA)\u00a0Pawtucket2 part (public site), GIF images are not animated by default. Here is a way to let GIF images to be animated.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[39],"tags":[121,122,46],"_links":{"self":[{"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/posts\/1224"}],"collection":[{"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":16,"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"predecessor-version":[{"id":1240,"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/posts\/1224\/revisions\/1240"}],"wp:attachment":[{"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/darrigan.net\/blog\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}