Get creative with the CLI (video tutorial)

On this page:

• Overview
• Video tutorial
• Tutorial contents
  • Begin with a multi-page PDF.
  • Upload the PDF to Cloudinary
  • Use the explode method to pre-generate each page image
  • Upload an image for each page and apply tags
  • View each new image
  • Find assets with the tag 'blue_signs'
  • Generate a sprite from all images with the tag 'blue_signs'
  • View the sprite
  • View the CSS
  • Use the sprite and CSS in a web page
• Keep learning

Rate this page:

Overview

Watch this tutorial to learn how to use the Cloudinary CLI to create a sprite from images in a PDF.

Video tutorial

Video Player is loading.

Play Video

Play

Mute

Current Time 0:00

/

Duration -:-

Loaded: 0%

Stream Type LIVE

Seek to live, currently behind liveLIVE

Remaining Time --:-

 

1x

Playback Rate

• 2x
• 1.5x
• 1.25x
• 1x, selected
• 0.5x

Descriptions

• descriptions off, selected

Captions

• captions off, selected

Audio Track

Fullscreen

This is a modal window.

The media could not be loaded, either because the server or network failed or because the format is not supported.

This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Begin with a multi-page PDF.

0:16	Choose a multi-page PDF from your files. blue_signs.pdf

Upload the PDF to Cloudinary

0:25	Use the upload command to upload the PDF, specifying its public ID. cld uploader upload blue_signs.pdf public_id=blue_signs

Use the explode method to pre-generate each page image

0:36	Use the explode method to pre-generate images from each page of the PDF. Although not strictly necessary in this context, it does help to speed up the subsequent commands that need the derived images. cld uploader explode blue_signs page=all

Upload an image for each page and apply tags

0:41	Use the upload command to upload the images derived from each page of the PDF as new images, and apply the tag blue_signs to each. cld uploader upload http://res.cloudinary.com/carl/image/upload/pg_1/blue_signs.png tags=blue_signs

View each new image

1:06	Each image has a random public ID. Copy and paste the url to view the image.

Find assets with the tag 'blue_signs'

1:16	List the assets with the blue_signs tag to check that no other assets have the same tag, otherwise they would also be included in the sprite. cld admin resources_by_tag blue_signs tags=true

Generate a sprite from all images with the tag 'blue_signs'

1:32	Use the CLI command to generate the sprite from the tagged images, and apply a transformation to crop each image to a square. cld uploader generate_sprite blue_signs transformation='{"width"=200, "height":200, "crop": "fill", "gravity":"auto"}'

View the sprite

1:48	Copy and paste the secure_image_url into your browser.

View the CSS

1:57	Copy and paste the secure_css_url into your browser.

Use the sprite and CSS in a web page

2:03	Use the CSS classes to display images from your sprite in a web page.

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.