Programmable Media

Get creative with the CLI (video tutorial)

Last updated: Sep-12-2024

Overview

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

Video tutorial


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.

Jump to this spot in the video  0:16 Choose a multi-page PDF from your files.
blue_signs.pdf

Upload the PDF to Cloudinary

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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'

Jump to this spot in the video  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'

Jump to this spot in the video  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

Jump to this spot in the video  1:48 Copy and paste the secure_image_url into your browser.

View the CSS

Jump to this spot in the video  1:57 Copy and paste the secure_css_url into your browser.

Use the sprite and CSS in a web page

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

Keep learning

Related topics

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

Get Started with the CLI
Set up the CLI and get familiar with some basic commands
Scripting with the CLI
Use a script to create an animated GIF
Upload with the CLI
Apply background removal to images on upload

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: