Skip to main content

... use SEO-URLs with TouchZoom and Quickzoom

This pages shows you how to use FSI QuickZoom or FSI TouchZoom with SEO optimised URLs.

FSI QuickZoom and FSI TouchZoom recognise images delivered by FSI Server - if the URL has been modified for SEO, you will need to follow these steps.

Image requests​

This is what a normal FSI Server image request looks like - as seen by viewers:

https://myserver.com/fsi/server?type=image&source=website/images/products/123/1/12345.jpg&format=jpeg&height=100

Example of an SEO optimised URL:

https://myserver.com/v2/x100/website/images/products/123/1/12345/jpg/Red-Dress.jpg

imgSrcAttributeName​

If you want to have the SEO optimised image URL in the src attribute (which would prevent FSI QuickZoom from recognising the image), you can add an alternate image src attribute that contains the FSI Server's auto-generated responsive image URL.

Example code:

<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="//myserver.com/fsi/viewer/applications/quickzoom/js/fsiquickzoom.js"></script>
    <script type="text/javascript">
      $FSI.quickZoomParameters = {imgSrcAttributeName: original-image};
    </script>
  </head>
  <body>
    <img
      alt=""
      src="//myserver.com/v2/x100/website/images/products/123/1/12345/jpg/Red-Dress.jpg"
      original-image="//myserver.com/fsi/server?type=image&source=website/images/products/123/1/12345.jpg&format=jpeg&height=100"
      width="400" />
  </body>
</html>

The seo-optimised URL is set as src, while the original FSI Server image request is set as original-image.

By setting the imgSrcAttributeName parameter to original-image, FSI QuickZoom will use the image request set there as a reference.

If you want to do this for your whole website, you can of course set this globally in the _default.xml or in a configuration XML:

<fsi_parameter>
  <QuickZoom>
    <inPlaceZoom value="true" />
    <imgSrcAttributeName value="original-image" />
  </QuickZoom>
</fsi_parameter>