Get creative with the CLI (video tutorial)

Overview

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

Video tutorial

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.