Made Easy with CoreMedia: Image cropping and sizing

Are you tired of having to use multiple tools for image handling for your various channels (web, mobile, in-store, etc)? Look no further than CoreMedia Studio!

The problem with images are all of the different ways that image can be surfaced to customer facing devices. The image needs to be cropped and sized appropriately for all rendering options and controlling that could be cumbersome. Take a look at this video to see how easily you can adjust crops and immediately preview them across devices and channels in a Salesforce Commerce Cloud site.

 

Advertisements

Using Dynamic Drive’s Image Zoomer in WebSphere Commerce

zoom-auroraThis blog post shows how you can use the Image Zoomer plugin by Dynamic Drive:John Davenport Scheuer for jQuery to provide image zoom capability in WebSphere Commerce. While many companies use their own package for image zoom like Adobe, a Dojo widget, or any other JavaScript framework, I wanted to show how easy it is to use this plugin on your WebSphere Commerce site. One, because most of WebSphere Commerce uses Dojo and two, I wanted to show how easy it is to do something like this with the MVC code base in the Aurora store front.

First off, you will need to read about the plugin and the instructions here. Download all of the files and images to your local machine and place them in the following directories. This article assumes you are using the base installation and the AuroraStoreFrontAssetStore.

  • Copy multizoom.js to AuroraStorefrontAssetStorejavascript
  • Copy multizoom.css to AuroraStorefrontAssetStorecss
  • Copy spinningred to AuroraStorefrontAssetStoreimages

Next you are going to put this block of code in ProductDisplay.jsp which can be located in the following directory: AuroraStorefrontAssetStoreLayouts

aurora-zoom1-code

I modified the original script from the site to use some JSP variables so the code can be reused across extended sites. For instance, the ${jsAssetsDir} variable is used to point to the correct location for the storefront.

Next, inside of ProductFullImage_UI.jspf which can be found in AuroraStorefrontAssetStoreWidgetsProductFullImage needs to be modified to include the code below. Once again I modified the script so it points to the productFullImage and to the correct location for the load GIF:

aurora-zoom-code2

Some additional steps you may want to implement for a full integration:

  • Implement this feature on the Quick view screen.
  • I didn’t modify the code to work when you switch image angles or swatches. This would be a good thing for you to figure out.

Quick video of it working in Aurora:

You can also check out this article: 25+ jQuery Image Zoom Effect Plugins

Image maps now supported in the WebSphere Commerce Business User tooling!

As promised, my second blog post on the new features in WebSphere Commerce is here.  This is a really nice feature because now you don’t need a third-party tool or HTML snippet to create image maps in your content. This enables marketing teams to do a lot more right within one tooling. There is an entire tutorial posted in the InfoCenter for how to do this with the new Feature Pack 6.

sb_imagemapsample

Very Cool: 25 jQuery image galleries and slideshow plugins

Had to put this on my blog, great set of free plugins:

Image galleries. jQuery slideshow. jQuery Gallery. | Webdesigner Depot.