Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Q-infographic Build Status

Maintainer: Nicolas Staub

Q infographic is one tool of the Q toolbox to display different graphics depending on their container size. Test it in the Q Playground.

Table of contents


git clone
cd ./Q-infographic
nvm use
npm install
npm run build


There is one env variable IMAGE_SERVICE_URL to be defined. It should contain a URL with 3 parameters that will get replaced before the URL is used to load the images. {key} will be replaced by the string Q-server stored as the key when the file got uploaded through Q-servers /file endpoint provided by the file plugin {width} is replaced by the width the image should be loaded {format} will be png or webp (a picture element is used in the HTML with multiple source elements) Example:{key}?width={width}&format={format}

If IMAGE_SERVICE_URL is not configured, the image.url property is used directly to load the image. This is mostly useful for dev and testing with fixture data. On production you most certainly want to use an image service to deliver resized and optimized images to the users.


Start the Q dev server:

npx @nzz/q-cli server

Run the Q tool:

node index.js

to the top


The testing framework used in this repository is Code.

Run the tests:

npm run test

Implementing a new test

When changing or implementing...

  • A route, it needs to be tested in the e2e-tests.js file
  • Something on the frontend, it needs to be tested in the dom-tests.js file

to the top


We provide automatically built docker images at There are three options for deployment:

  • use the provided images
  • build your own docker images
  • deploy the service using another technology

Use the provided docker images

  1. Deploy nzzonline/q-infographic to a docker environment
  2. Set the ENV variables as described in the configuration section


The tool structure follows the general structure of each Q tool. Further information can be found in Q server documentation - Developing tools.

There are 4 endpoints for renderingInfo:


This is the default endpoint called for web targets. It returnes the complete markup including a picture element for the image in case an exact width is given in toolRuntimeConfig.size.width. In case the width is missing a script measuring the width after the dom is ready is returned. This script will call /rendering-info/web-images with the exact container width passed in the width query parameter.


There are 2 places where this route is called from.

  1. From inside the handler for rendering-info/web using server.inject
  2. From the client side script returned from /rendering-info/web if no exact width is given

This route handler renders the view/images.html template and returns a <picture> element containing different <source> elements for the image in different sizes for different screen DPI and png/webp. Each <img> has an alt-tag which is defined by the item.title and item.subtitle. The matrix of how it will be displayed can be found (here)[

<img src="{{ image.urls.png1x }}" {% if (not displayOptions.hideTitle) or (not displayOptions.hideTitle and not


This endpoint loads the images upfront and injects them in the markup as base64. This is only used for the screenshotting service as loading the images like this doesn't need a script to check if the images are loaded before taking the screenshot.


This endpoint returns amp-html for the complete graphic including title/subtitle/image/footer. It is to serve the AMP version of currently.

to the top



If checked the format for WebP images will be webpll. If unchecked webply. These formats are recognised by fastly image service (

to the top


Copyright (c) 2019 Neue Zürcher Zeitung.

This software is licensed under the MIT License.


No description, website, or topics provided.







No packages published