Get creative with the CLI (video tutorial)
Last updated: Sep-02-2024
On 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
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.
Choose a multi-page PDF from your files.blue_signs.pdf |
Upload the PDF to Cloudinary
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
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
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
Each image has a random public ID. Copy and paste the url to view the image. |
Find assets with the tag 'blue_signs'
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'
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
Copy and paste the secure_image_url into your browser. |
View the CSS
Copy and paste the secure_css_url into your browser. |
Use the sprite and CSS in a web page
Use the CSS classes to display images from your sprite in a web page. |
Keep learning
Related topics
- Learn more in the Cloudinary CLI Reference.
- Read about the Cloudinary CLI in this blog post.
If you like this, you might also like...
Get Started with the CLI
Set up the CLI and get familiar with some basic commandsScripting with the CLI
Use a script to create an animated GIFUpload with the CLI
Apply background removal to images on upload
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.
✖️