6

I have two friends that want to create a jewelry store, focused on customized jewels. The core feature is the jewelry designer, based on a jewel model.

Here's an example of the sort of thing I am looking to create : http://www.gemvara.com/jewelry/wisteria-pendant/pear-citrine-18k-yellow-gold-pendant-with-diamond/155hhg

You can use the menu on the right to change different areas of the final image, such as the gems or metal used. If you right-click on the image, you can see it's a complete jpg.

How is this kind of dynamic image designed and programmed?

  • No experience here, but my thoughts are it is either A) multiple versions of each "component" of the image, which then assembles them into one combined image and presents to the user, B) a photo for every single variation, or C) an image with a color overlay, like this. I would personally try to go for A. B is too much maintenance and C isn't really accurate. A combination of A and C is probably used there, as if you hover over some of the gems they are 100% identical except for color, which is not the case in nature. – Rachel Apr 26 '16 at 15:56
  • 2
    That's a fairly clean page, from an HTML perspective. I would imagine that you could study the page source (after pretty-printing the Javascript), and learn everything you ever wanted to know about how that page works. – Robert Harvey Apr 26 '16 at 16:11
  • 2
    They are just updating the img attribute to a difference image source on hover. This and this. Nothing fancy here. Inspect Element is your best friend – NiCk Newman Apr 26 '16 at 16:57
  • They are likely generating on the image on the fly, which is the interesting bit. (And not visible in the page source.) There are over 2.3 million possible images based on the combinations you pick. – Gort the Robot Apr 28 '16 at 22:11
  • 1
    @Fabrício I rolled back your edit because it changed the question too much, both making it "too broad" and invaliding the lone answer that is both accepted and highly-upvoted. If you need to ask a different question then I recommend distilling your new question down to something that is reasonably focused, and perhaps looking at other SE sites that may be more appropriate (but please check with a site's help center and meta site before posting to ensure positive reception). – user22815 May 3 '16 at 1:32
4

In the specific case in the example they seem to be combining images of the different parts on the server and then sending a complete image to the browser. As can be seen if we take a look at the URL and start removing things so that we get access to the debug page: http://prodimage-725655301.us-east-1.elb.amazonaws.com/image-generator/debug-product-images/?path=%2FBEH-PEN-01%2FP%2F2%2F14YG-18WG-S-P-G-CH_BOX_-75_14RG_18%2F450%2Fpear-blue-sapphire-14k-yellow-gold-pendant-with-peridot-and-red-garnet.jpg

I don't think they wanted the debug page open to all but now that it is it allows us to see how they do it in the example and it gives us an approach if we want to do something similar ourselves.

12

I'm pretty sure they're generated on the fly based on a bunch of parameters.

You'll note if you Inspect Element that the HTML for the tag includes some code :

  • data-itemcode="BEH-PEN-01"
    Probably the initial base image to use. In this case, Pendent 01
  • data-angle="P"
    Angle probably specifies which version of the image to generate. For example, there are 4 images below the main image.
  • data-version="2"
    Perhaps there was once a version 1 of their image generator tool?
  • data-generatedname="18YG-18RG-I-D-D-CH_CBL_1-5_SS_18"
    Actual data for generated item. You'll note this matches what you select in the dropdowns on the right, such as "18YG" = 18k Yellow-Gold, "18RG" = 18k RoseGold, "CH_CBL_1-5_SS_18" = 1.5mm Cable Chain Sterling Silver 18", etc.
  • data-size="450"
    Final image size to render
  • data-slug="pear-citrine-18k-yellow-gold-pendant-with-diamond"
    user-friendly title to use

If you take the actual image url, you can alter parameters to play around with different variations.

http://sd2.gemvara.net/image-generator/BEH-PEN-01/P/2/18YG-18RG-E-D-D-CH_CBL_1-5_SS_18/450/pear-emerald-18k-yellow-gold-pendant-with-diamond.jpg

For example, "450" can be changed to another size to alter image size. Or "YG" can be changed to "WG" (White Gold), "RG" (Rose Gold), "SS" (Sterling Silver), etc. Or you can choose "PEN-02" to view a different base image with the same colors. And the final bit, "pear-citrine-18k-yellow-gold-pendant-with-diamond", can be set to anything you want and nothing changes other than the title.

Most likely there is a stock image, probably black and white, with regions defined. The image generator applies a hue shift over the individual regions based on what is specified.

Points to support that :

  • If you compare some of the gem colors (Pink Sapphire/Yellow Sapphire for example or Blue Topaz/Green Tourmaline), especially with larger images, you can clearly see the image used is the exact same, only with a different color. This isn't how real individual images would be. I've also seen this kind of stuff before, such as this really poor example where skin tones make it apparent what is happening.

  • Example site does have some variation between stock gem images, most noticeably Ruby and Diamond. This makes me think it uses partial image substitution, because a complete image change would be a lot of maintenance for the number of items this site has.

  • Some images have poor regions defined, making the overall "photoshop" look more apparent. For example, this one has the large gem region poorly defined, and a dark color gem really shows that.

Best guess is that the site catches anything going to /image-generator/ in the url, and hands it off to an image generator process, which returns the final jpg image for display.

  • Good answer. Also, images likely go through a CDN, so that image generation happens only the first time a person asks for a particular combination, which keeps processing time down. – Gort the Robot Apr 29 '16 at 18:12
  • Thank you Rachel for your answer! My question was not clear, sorry for that, but I was more interesting in how the back-end service worked, and what tools could be used to combine those images. ImageMagick could be one tool that could be used for a job like that, but it's very impressive the number of variations a jewel can have and how well combined the images are. The back-end service seems to generate the combined image with parts of different raw images (like the gem colors). – Fabrício May 2 '16 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.