Feature #1128

Media Management

Added by Pavan Rikhi over 2 years ago. Updated 4 months ago.

Status:ClosedStart date:08/18/2019
Priority:NormalDue date:08/28/2019
Assignee:Pavan Rikhi% Done:


Category:MediaSpent time:-
Target version:v0.7.0 - Misc Pages & UI
Easy Pickings:


The server should accept the largest versions of images, scaling & optimizing them at pre-defined resolutions. Then images can be returned as a map of widths to urls, or we can use a function to enforce proper client urls to the generated images.

Maybe just use this functionality for Product/Category images at first, instead of generalizing. Eventually there can be an admin page for managing uploaded media, supporting PDFs & other file types as well as allowing customization of filenames & titles w/ embed codes for adding the media to a page.

Associated revisions

Revision eca8cb2b
Added by Pavan Rikhi 4 months ago

[#1128] Add Image Processing Module to Server

Add an Images modules to the server. This module is responsible for
saving, scaling, & optimizing images.

An `ImageConfig` must first be instantiated. This determines which
optimizers are available & whether or not imagemagick is available to
resize images. Currently optipng, jpegtran, & gifsicle is used for

The `scaleImage` function takes a filename, image content, & destination
path. The MD5 hash of the content is appended to the filename & the
original image is saved & optimized. Then, the original image is scaled
to the width specified by each `ImageSize` value, saved to a
width-specific folder, & optimized.

Refs #1128

Revision 5366a77a
Added by Pavan Rikhi 4 months ago

[#1128] Rewrite ImageMigration Script to Scale & Optimize Images

Rewrite the image-migration script so that it uses data from the current
database instead of connecting to the old ZenCart MySQL database. When
migrating images, we hash the file & append the hash to the filename,
scale them to all the sizes specified in the Images module, & optimize
all the resulting images.

Refs #1128

Revision d1b9717c
Added by Pavan Rikhi 4 months ago

[#1128] Return Scaled Image Data With Products

Add a new BaseProductData type to hold the Product data required by the
Client, as well as the ImageSourceSet data for a Product generated by
the Images module. Remove the ToJSON & FromJSON instances for the Product
type and replace API usages with the new BaseProductData.

Add a makeBaseProductData to the CommonData module & modify routes that
use to return a Product to use this function to return a BaseProductData

Refs #1128

Revision e12a2f7d
Added by Pavan Rikhi 4 months ago

[#1128] Use Scaled Images When Rendering Product Images

Add a new ImageData type to the Models.Fields module, as well as a JSON
decoder, & utility functions for defining the `srcset` & fallback `src`
attributes for images that use the ImageData type.

Modify the views that render Product images so that they include srcset
& sizes attributes so that browsers pull the smallest image necessary.

Refs #1128

Revision c7b37415
Added by Pavan Rikhi 4 months ago

[#1128] Add SourceSet Data to Categories Returned By API

Add a CategoryData type to the CommonData module, along with a
makeCategoryData function for constructing the Category's ImageSourceSet
and converting a Category entity into a CategoryData.

Remove the ToJSON & FromJSON instances for the Category type and change
the Category return types in routes to the new CategoryData type.

Refs #1128

Revision 68653ccc
Added by Pavan Rikhi 4 months ago

[#1128] Use Scaled Images When Rendering Category Images

Replace the `imageURL` field of the Category type with an `image` field
containing the ImageData for the Category image.

Modify the views to render the image with srcset & sizes attributes so
browsers can choose the appropriate image to download & render.

Closes #1128


#1 Updated by Pavan Rikhi 12 months ago

  • Category changed from General to Media

#2 Updated by Pavan Rikhi 4 months ago

Instead of strings for images, send some object like:

[ { height: <int>, width: <int>, src: <path> }
, ...

And then use the srcset attribute when rendering the image. See if we need any other info for using srcset with images.

Do we store the image data in the database, poll the filesystem during requests, or keep a cache of the image data?

Check sizes necessary for each product & category image. List pages, details pages, cart pages, etc.

#3 Updated by Pavan Rikhi 4 months ago

Start an Images module in the server that handles resizing images to set heights or widths and then optimizing them. Have an ImageOptimizationConfig that has flags for which optimizers are available(optipng, jpegtran, gifsicle)(use executableAvailable to check existence). Hash the source images and append this to the file name, along w/ size info.

Use temp directory for processing, cleaning up afterwards.

Modify ImageMigration script so thumbnails are generated.

#4 Updated by Pavan Rikhi 4 months ago

  • Start date set to 08/18/2019

#5 Updated by Pavan Rikhi 4 months ago

  • % Done changed from 0 to 60

Image module, image migration, & product images done. Need to commit & add support for the scaled category images.

#6 Updated by Pavan Rikhi 4 months ago

  • % Done changed from 60 to 100
  • Status changed from New to Closed

#7 Updated by Pavan Rikhi 4 months ago

  • Due date set to 08/28/2019

Also available in: Atom PDF