Cloudinary is the market leader in providing a comprehensive cloud-based image and video management platform

Cloudinary

Having a blog to write and share our knowledge on the internet is essential for visibility and making us known in our field as an authority on a subject. This article will teach you how to build a blog that has dynamic pages for each article. Table of Contents Prerequisites Getting Started What is Nuxt? What is Nuxt Content? What is Cloudinary? Creating a Blog with Nuxt Creating the Blog Notes Fetching the Posts Creating Dynamic Pages Final Thoughts Learn More To follow along, view the codebase and its repo on and the for reference. GitHub demo Prerequisites The following are required to complete this tutorial: Cloudinary account. is free Sign up Basic knowledge of JavaScript Familiarity with Vue Getting Started To get started, open up the terminal and run the command: npx create-nuxt-app blog-for-developers The command above will kick off a command-line interface (CLI) prompt that will allow us to configure various aspects of our project. Now that the boilerplate is set up with all the files and folders, let’s run the development server which is accessible on inside the project. http://localhost:3000 # change directory to project folder cd blog-for-developers # start the development environment npm run dev NuxtJS is an open-source intuitive Vue framework that allows us to build user interfaces, making web development simple and powerful. What is Nuxt? During the initial setup of this project, we selected the Nuxt content module. This module lets us use our codebase as a Git-based headless CMS to access markdown, JSON, YAML, XML, and even CSV files through an API-like interface. With this module , it will inject the instance globally in our project to access it anywhere in a project. What is Nuxt Content? @nuxt/content $content Cloudinary is a cloud-service image and video management tool for web and mobile applications. With Cloudinary, we can upload, create, and manage digital experiences across any browser and device. What is Cloudinary? Creating a Blog with Nuxt Before we create the content for the blog in markdown using Nuxt content, let’s first create the landing page for the blog that will include the navigation links and some text. In the , we can add our favorite font to the head section and use a particular font family as seen below: Add Font Style nuxt.config.js file The above code block will have no effect on the page until we write the CSS that will use the font. Now, add the following code to the which will include the navigation links and some text on the home page. Remove the component, . pages/index.vue <Tutorial /> <template> <section class =" showcase "> < header > < h2 class =" logo "> < nuxt - link to ="/"> ecosurf </ nuxt - link > </ h2 > < nav class =" nav desktop "> < ul > < li class =" nav__list "> < nuxt - link to ="/ blogs "> Stories </ nuxt - link > </ li > </ ul > </ nav > </ header > < video autoplay loop muted src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video > < div class =" overlay "></ div > < div class =" text "> < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 > < h3 data - type =" uppercase "> Exploring The World </ h3 > < p > View of the tropical island landscape, from a hill with houses, palm trees and many trees, and in the distance the hills that surround the sea, on a sunny day . </ p > </ div > < ul class =" social "> < li > < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a > </ li > < li > < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a > </ li > </ ul > </ section > </ template > In the above code block, we included a with the source of the video stored in Cloudinary with attributes such as autoplay, loop, and muted that mute the video when it loads. To obtain the media stored in Cloudinary, we upload our desired video to the media library tab. Thereafter, copy the URL which will be attached to the of the . <video> src <video> Also, we referenced the links in the navigation header with the component to both the home and the routes which we will create to view all our blogs. To make sure our page is styled with CSS, create a folder at the root of the project, , and include the following from this . In the file, update the file to include the created CSS file with the following: nuxt-link / /blogs assets/styles/main.css gist nuxt.config.js ... ...
 } export default { css : [ '@/assets/styles/main.css' ], Here is what our page should look like: Creating the Blog Notes To build our blog site, we need to have content to display and render on the page. First, create a directory and then the blog directory that will contain all the markdown files. Writing all the content in markdown supports a lot of the markdown syntax standards such as the headings, links, and code blocks with syntax highlighting for different programming languages. PS: The Nuxt content utilizes the content folder to store all the files. Here’s an example of a markdown file in the content directory. Add the following to the file . /blogs content content/blogs/egghead.md title: Egghead author: Teri Eyenike
    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.
    date: May 2, 2021
    publishOn: 2021-05-02T00:00:00
    tags: ["learning", "platform"]
 --- --- cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!  Markdown files have the ability to add metadata using the concept of front matter which is denoted with the triple-dash syntax at the start and stop of the front matter. The metadata, is what is displayed to readers like the time of publication and excerpt of the blog content, is what is displayed to readers. Other various properties can be included. PS: Inside of the front matter, it uses the YAML syntax. To fetch the posts for the blog page, let’s create a new route under . Create a folder, called blogs, and in there create file for the directory, blogs. Next, copy and add the following code to the file to display the rendered markdown files. Fetching the Posts pages index.vue pages/blogs/index.vue <template> </template> // pages/blogs/index.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container section" > < div class = "container__grid" > < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" > < img :src = "blog.cover_image" alt = "blog photographs" /> < div class = "pad__card" > < div class = "author" > < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span > < p > {{ blog.date }} </ p > </ div > < h2 class = "title" > {{ blog.title }} </ h2 > < p > {{ blog.description.substring(0, 150) }}... </ p > < button > < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link > </ button > </ div > </ div > </ div > </ div > </ main > < script > export default { async asyncData ( {$content} ) { const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch() return { blogs } }, head ( ) { return { title : "Read interesting stories as a nomad" , meta : [ { hid : 'description' , name : 'description' , content : 'Daily and juicy content as you learn, work, and relax. WFH' } ] } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } .section { padding : 3em 0 ; } .container__grid { display : grid; gap: 2em ; grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr)); } .card { background : #f0f7f4 ; box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 ); border-radius : 5px ; } .card img { object-fit : cover; border-top-left-radius : 5px ; border-top-right-radius : 5px ; width : 100% } .pad__card { padding : 2em ; } .author { display : flex; align-items : center; } .author , .title { margin-bottom : 1em ; } .author span { margin : 0 0.3em ; } .author__name { text-transform : capitalize; } button { border : unset; padding : 1em 2em ; margin-top : 2em ; background : #0D5159 ; font-weight : 700 ; cursor : pointer; } button a { color : #fff ; } </ style > The code block above does the following: : used to generate our page from Nuxt as it generates individual files statically to users. We pass in the method where the blog notes are stored, the function, and the method. asyncData $content sortBy() fetch : takes two parameters, (sort it by date) and the desc attributes on how you want the content to appear based on the most recent content published sortBy() publishOn To make each blog article dynamic, we will assign it to a URL, where it’s the blog slug on the Read more button using the component. /blogs/ <nuxt-link> The last step for viewing the snippet of the rendered posts from the content directory is to use the v-for directive and loop over the blogs and render each article in a card. Rendering the posts Here is what the blog page should look like now: Creating Dynamic Pages Now let’s create pages for each blog post to have dynamic URL routes. In Nuxt, to create dynamic pages, we append an underscore before the .vue file name so as not to make the URL hardcoded. We then create the file under the blogs directory and add the following code: _slug.vue <template> </template> // pages/blogs/_slug.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container" > < div class = "return" > < nuxt-link to = "/" > < img alt = "back to home" src = "/home.png" /> </ nuxt-link > < span > / </ span > < nuxt-link to = "/blogs" > Blog </ nuxt-link > < span > / </ span > < p > {{ note.title.substring(0, 15) }}... </ p > </ div > < section > < h1 > {{ note.title }} </ h1 > < nuxt-content :document = "note" cla /> </ section > </ div > </ main > < script > export default { async asyncData ( {$content, route} ) { const note = await $content( `blogs/ ${route.params.slug} ` ).fetch() return { note } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } section { padding-bottom : 2em ; } .return { display : flex; margin : 1.5em 0 ; } .return img { width : 20px ; height : 20px ; } .return span { margin : 0 1em ; } h1 { margin-bottom : 1em } </ style > This block of code does the following: : We use the content to fetch a specific file from the directory blogs using the route parameter and the slug which will map to our actual file name ${route.params.slug} To render the markdown as actual content defined in the markdown file, we use the nuxt-content component and pass the prop of the with the entire object document note : Defining the scoped to the style element make sure that the styling only applies to a specific page scoped Final Thoughts The creation of a blog is great when you want to share your thoughts with a wider audience and Nuxt has provided us with a way to do so in this article. There are still other features we can still explore to make sure we have a robust blog website. Learn More Nuxt content Nuxt documentation Try out the live demo

How to Build Your Own Blog with Nuxt, Nuxt Content, and Cloudinary

Cómo crear su propio blog con Nuxt, Nuxt Content y Cloudinary

Comment créer votre propre blog avec Nuxt, Nuxt Content et Cloudinary

Nuxt, Nuxt Content और Cloudinary के साथ अपना खुद का ब्लॉग कैसे बनाएं

Nuxt、Nuxt Content、および Cloudinary を使用して独自のブログを作成する方法

Como construir seu próprio blog com Nuxt, Nuxt Content e Cloudinary

Cách tạo Blog của riêng bạn với Nuxt, Nội dung Nuxt và Cloudinary

如何使用 Nuxt、Nuxt 内容和 Cloudinary 构建自己的博客

while developing a rails you might want to allow your users to upload an image provides an easy and free way of achieving that.... sounds good? let's get started. Application Cloudinary Oh, wait before we start you'll need an API key from if you don't have an account yet, . Alright let's get started now. Cloudinary go ahead and create it Assuming that you have a rails Application with a Post model We'll start by adding cloudinary and carrier wave to Our gem file in the following order. gem 'carrierwave' gem 'cloudinary' then run Next, if you don't have one yet generate an uploader by running bundle i rails g uploader image also, you'll need to have an image column in your post table assuming that you have a post model you can run rails generate migration AddImageToPosts image: string After running let's create a file in the folder, let's go ahead and add our configurations rails db:migrate cloudinary.yml config #config/cloudinary.yml development: cloud_name: CLOUD NAME api_key: 'API KEY' api_secret: API SECRET enhance_image_tag: true static_file_support: false production: cloud_name: CLOUD NAME api_key: 'API KEY' api_secret: API SECRET enhance_image_tag: true static_file_support: true after adding the configurations we need to mount our uploader in the post model # app/models/post.rb class Post < ApplicationRecord mount_uploader :image , ImageUploader end next, we need to configure our uploader to work with Cloudinary. your should look like this app/uploaders/image_uploader.rb #app/uploaders/image_uploader.rb class ImageUploader < CarrierWave::Uploader:: Base include Cloudinary::CarrierWave process convert: 'png' process tags: [ 'post_picture' ] version :standard do process resize_to_fill: [ 100 , 150 , :north ] end version :thumbnail do resize_to_fit( 50 , 50 ) end CarrierWave.configure do |config| config.cache_storage = :file end end And now we are ready to start uploading images to our . app in our form for a post creating < fieldset > <%= f.label :image , 'image' %> <%= f.hidden_field :image_cache %> <%= f.file_field :image %> </ fieldset > to display the image for a given post < img src = "<%= @post .image %>" /> By now we should be able to upload and display from our application. images learn more at https://cloudinary.com/documentation/rails_carrierwave I hope this post was helpful if you have a question or a suggestion leave a comment or find me on twitter

Creating Image Uploader in Rails 6 Using Cloudinary and Carrierwave

Comparing Cloudinary CDN and Amazon AWS CDN CloudFront 

Ruby on Rails has an awesome gem to upload, store and display images: . It's very easy to use and it comes with a local disk-based service, that should be enough to store everything you need if you just want to practice using Rails. Active Storage However, when you start building more elaborated websites and deploy them to production, you'll start noticing the limitations of Active Storage's local disk. In Heroku, for example, although you are able to upload images using disk storage and everything will look fine, these files will disappear after the application is automatically restarted (which happens once every 24 hours on the free plan). Of course, this all makes sense. The purpose of the local disk is for development and testing. For production, Active Storage facilitates uploading files to cloud storage services, such as Amazon S3, Google Cloud Storage, an Microsoft Azure Storage, which are suggested by . Rails Guides Or, if you are a developer student like me and want to save any possible dollar, you can use . Cloudinary Why choose Cloudinary? The first reason that made me choose Cloudinary was the price. It's free! At least for my needs and, I think, for most of yours as well. The Free Classic Plan gives you 10GB of storage, and it's not just for one year, it's forever. The second reason was the possibility to use it on my existing Rails application. Cloudinary provides a that simplifies the integration with Ruby on Rails applications, which, according to the documentation, presents the following features: Ruby Gem Methods to build URLs for image and video manipulations; Rails view helper tags for embedding and transforming images; API wrappers for file upload, administration, sprite generation and more; Server-side file upload plus direct unsigned file upload from the browser using the jQuery plugin; Migration tool; Active Record integration; CarrierWave plugin; Static image syncing for CDN delivery; General Ruby integration for non-Rails frameworks such as Sinatra. Not enough, Cloudinary also allows you to manipulate uploaded images simply by passing a set of transformation parameters on the dynamic URL in your views. For example, you can resize and crop the images, change its format and quality, rotate, and apply a large variety of special effects and filters. All manipulations are performed automatically in the cloud. The free plan offers 20,000 monthly transformations. Setting up Cloudinary on your Rails application The first step, of course, it's to sign up for a Cloudinary free account. Then, to install the Cloudinary Ruby gem on your project, add the following line to the Gemfile: gem 'cloudinary' And run bundle install. To use the library, you need to configure your project to provide Cloudinary's cloud_name, api_key, and api_secret. These credentials can be found on the Dashboard page of your account. Setting the configuration parameters can be done globally by creating a file under the directory of your Rails project. The contents of this file should look like this: cloudinary.yml config production: cloud_name: "sample" api_key: "874837483274837" api_secret: "a676b67565c6767a6767d6767f676fe1" secure: true cdn_subdomain: true You can your customized configuration file through Cloudinary's Management Console, and just place it under the directory. You might also define several optional if relevant for your project. download cloudinary.yml config configuration parameters So, now that everything is configured for using the gem, you will need to create the functionality for uploading and displaying the images on your website. Cloudinary offers many uploading options, such as an upload widget, server-side upload, and direct uploading from the browser. Moreover, it also supports integration with other libraries, like CarrierWage, Attachinary, and Active Storage, which can be useful for integrating image uploads with your models. In my case, my application was almost ready when I realized I needed an alternative to store the images. Until there, I was using Active Storage's local disk, and since I didn't want to change so much of my code, my decision was pretty clear. Integrating Cloudinary with Active Storage The Cloudinary gem allows you to use all its great features, while still using Active Storage to easily upload images from HTML forms to your model. Assuming you have already configured your application to use Active Storage (if not, I recommend reading ), the following steps are pretty straightforward. this article 1. Declare the Cloudinary service in the file by adding a new entry with a custom name (e.g., cloudinary) and the service configuration: config/storage.yml Cloudinary cloudinary: service: 2. In each environment you want to use Cloudinary, you have to tell Active Storage to use this service by updating . For example, if you want to use it on the production environment, you need to have the following line on the : config.active_storage.service config/environments/production.rb config.active_storage.service = # Store uploaded files on the local file system (see config/storage.yml for options). :cloudinary 3.  After setting up Cloudinary as the service, you will use direct uploading, which is already supported by Active Storage. To do that, include in your application's JavaScript bundle: activestorage.js //= require activestorage 4. On the form, include the direct upload URL on the input field: <%= %> <%= %> <%= %> <% %> form_for @post do |f| f.file_field , :picture : ' - ', : class form control direct_upload true f.submit , 'Create' : ' - - - - -100 -3' class btn sign up button btn outline secondary w mt end 5. Now you just need to display the image in the browser. Use the helper method to generate a permanent URL link, that upon access, redirects to a Cloudinary endpoint. url_for <%= %> url_for(@post.picture) One problem and how I solve it: Although with these configurations uploading and storage work fine, in the browser vertical images were being displayed in the wrong orientation. Turns out this happens because pictures captured on cameras, including from mobile devices, are stored with a series of metadata. One of them is called EXIF (exchangeable image file format), which informs the image's orientation. It seems that not all browsers have the support to get this information and apply the rotation automatically. Searching about this problem, I found out that if the image is transformed, Cloudinary will automatically orientate the image based on its EXIF information, and the image will be delivered with the correct orientation. Easy enough, no? As I said before, it's very easy to manipulate uploaded images on Cloudinary, simply by passing a set of transformation parameters on the dynamic URL in your views. Well, not so much. Even though the documentation states that the helper method was enhanced to accept any Cloudinary image transformation as a parameter, when I tried to do that, it results in an error saying this method only accepts 0..1 argument. url_for I couldn't find any answers to this problem yet, but searching through Cloudinary's settings, I found out that is possible to set up default transformations without changing my code. In your account settings, under the tab, you will find a section for . Upload upload presets Click on , and in the tab, you will find When you click on you will see all the available transformation options, including automatic rotation and use EXIF data. add presets Upload Manipulations Incoming Transformations. edit, In my case, I select the following transformations: use EXIF data, a default width, and quality automatic - good. And ta-dah!! Everything looks perfect now and my website it's fully functional, no more vanishing images (and for free!). Update (april 8th 2020) I contacted Cloudinary's support team about this error I was getting,  and it turns out it was a mistake in the documentation. So, instead of using the helper method, you need to use one of these: url_for <%= cl_image_tag(@user.avatar.key, , ) %> OR

<%= cloudinary_url(@user.avatar.key, options = {}) %> width: 200 crop: :scale //

Image Storage in Rails Apps Using  Cloudinary and Active Storage

The web is now dominated with more visual content than ever hence the need to consider ways of delivering these images with the smallest possible file size while maintaining optimal visual quality. The less file size, the faster the browser can download and render the image, the optimal visual quality, the more satisfied your users will be. This, therefore, leads to better user experience, increased retention rate, conversion rate, and user satisfaction. There are many existing techniques and algorithms used to enhance and optimize images already. In this article, I'll introduce you to an amazing technique (based on my opinion and experience), which would help you better enhance and serve your media assets using a cloud-based image and video management platform. Introduction Original Images are often created with the original extra-high resolution to ensure optimal visual quality, thereby resulting in high file size. This would lead to images delivered slowly when used in web pages. Not cool, right? So how then do we deliver images on the web with optimal speed and optimal visual quality? The Need for Optimization The web is filled with tons of images; virtually every website on the internet has more than one image. Optimizing images allows you to deliver high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size. According to , 47 % of users expect a page to load in 2 seconds or less, and users will abandon a website that takes more than 3 seconds to load. This will drastically reduce your conversion rate (Amount of visitors turned into users). Kissmetrics The conversion rate is the number of conversions divided by the total number of visitors. For example, if an e-commerce site receives 200 visitors in a month and has 50 sales, the conversion rate would be 50 divided by 200, or 25%. ~ Optimizely Optimizing Images will: Improve page load speed Improve user experience Improve SEO ranking And this can be done in different ways, either by resizing the images, caching, or by compressing the image size. Introducing Cloudinary is the market leader in providing a comprehensive cloud-based image and video management platform. Cloudinary is being used by hundreds of thousands of users around the world, from small startups to large enterprises. ~ Cloudinary Source For better understanding, this is how Cloudinary image optimization works: Upload your image(s) to their service You get a URL for the image Apply transformations (if you want) to optimize the images Load your image on your website via the URL Bingo! you have optimized image(s) Whenever you apply any transformation to an image, Cloudinary performs the following optimizations by default: Strips all associated metadata from the transformed image file leaving the original image untouched Applies an automatic quality adjustment to generated WebP, GIF, JPEG, and JPEG-XR image formats. Runs optimization algorithms to minimize the file size without impairing the visual quality when generating images in the PNG, JPEG, or GIF format. Getting Started The process of getting your images on Cloudinary is pretty quick, but before I show you how-to, let's roll through one fact that this is a PAID SERVICE :). Chill, there is a FREE plan for developers and businesses but with limitations (limited credits: sort of internet data for using Cloudinary services) With the FREE plan, you get 25 credits. One credit equals 1000 transformations or 1GB of managed storage or 1GB of monthly viewing bandwidth or 500 SD video processing seconds or 250 HD video processing seconds. For now, you don't need to worry about PAID plans, but as your images and it's bandwidth increase, your credits get maxed out, and you will need to upgrade to either the Plus ($89/month) or Advanced plan ($224/month). See all plans . here Let's get started, yeah? STEP ONE Create a Cloudinary Account . Follow all the prompts and fill them appropriately. here Upon successful creation of your account, you will get a Cloud name, API Key, API Secret, and Environment variable, which can be found in your console dashboard. The API keys and Secrets are useful when you're working with , but in this article, we'll only use the HTTPS CDN method to fetch images. I'll be publishing another article around how to setup Cloudinary with a React application soon. Cloudinary SDKs Subscribe to my to get updated. newsletter here STEP TWO Head to your media library in your Cloudinary console, where all your uploaded media assets will be listed. If your account is newly created, then you will only find a sample image. Treat this media library like a drive where you can create folders, subfolders, and add images in them. STEP THREE Create a new folder and upload your desired image or upload it in the root folder. STEP FOUR Click on the image you uploaded then click on the 🔗 icon at the left top corner of the image. You have now copied the URL of the uploaded image. On my end, I uploaded and here is the generated URL this image https://res.cloudinary.com/bolaji/image/upload/v1583358060/hashnode_banner.png Now you can use this URL as your image source attribute and load on your website. I'll load the URL above like so: < = = = > a href "https://hashnode.com" target "_blank" rel "noopener noreferrer" < = = </ > img src "https://res.cloudinary.com/bolaji/image/upload/v1583358060/hashnode_banner.png" alt "Hashnode Banner" img </ > a Pretty cool, right? Cloudinary Automatic Image Transformations Cloudinary allows you to add some transformation parameters and values to your image.  Its algorithm analyzes the image to find the best quality compression level and optimal encoding settings based on the image content and the viewing browser, to produce an image with good visual quality while minimizing the file size. Automatic Image Quality and Encoding: q_auto (quality) This transformation allows you to control the visual quality and compression level of JPEG, JPEG 2000, JPEG XR, WebP, and GIF images with the quality parameter (q in URLs). I uploaded to Cloudinary with an initial file size of 1.46 MB this image Now I apply the parameter with value (q_auto) just after the and the image is delivered with optimal visual quality while minimizing the file size to 297 KB based on the image content and the viewing browser. That's about 1163 KB lost in 215 ms. q auto /upload/, https://res.cloudinary.com/bolaji/image/upload/q_auto/v1583381262/bolaji_headshot.jpg Automatic Image Fetch Format: f_auto (fetch format) This transformation allows you to analyze the image content and select the best format to deliver with the fetch parameter (f in URLs). Different browsers support different image formats, Cloudinary allows you to deliver the best format according to the browser used by each of your visitors while saving bandwidth and optimizing delivery time. I uploaded to Cloudinary with an initial file size of 1.46 MB this image Now I apply the parameter with value (f_auto) just after the and the image is delivered as WebP to Chrome browsers (376 KB), JPEG-XR to Internet Explorer browsers, or as a regular JPEG to browsers that support neither format. f auto /upload/, https://res.cloudinary.com/bolaji/image/upload/f_auto/v1583381262/bolaji_headshot.jpg If you add the and parameter, then Cloudinary will deliver WebP and JPEG-XR to the compatible browsers but might deliver selected images as PNG-8 or PNG-24 if the quality algorithm determines that as optimal. f_auto q_auto Using the automatic format and automatic quality is most recommended as it allows Cloudinary's algorithm to decide how to deliver the image based on the user's browsers leading to better visual quality and optimal images. https://res.cloudinary.com/bolaji/image/upload/q_auto,f_auto/v1583381262/bolaji_headshot.jpg Conclusion The faster your website loads images, the faster your website loads, the better your SEO ranking becomes, the better your user experience becomes, the more users interact with your website/ product, the increased your conversion rates become. It's a win-win, satisfy your users and increase your conversion rates. I consider this article fundamental as there is so much more you can do with Cloudinary to manage your media assets, and I hope this helps you find your way to the numerous other transformations you can perform with Cloudinary :). Further Resources Cloudinary Image Transformation Documentation Compress Images for Web and Boost Performance on Your Site Optimization and Fast Delivery Automatically Reduce Image Size Without Losing Quality Compression of Image Files With Only One Line of Code How to make your website load lightning fast with WebP images Automatically Reduce Image Size Without Losing Quality Best Image Optimization Techniques: Expert Roundup Previously published at https://bolajiayodeji.com/image-optimization-and-transformation-with-cloudinary-ck7ft0r9100p7nds1ja70s9mu

Image Optimization and Transformation with Cloudinary

Imagine that you're a social media intern. Please, bear with me! You're a social media intern and your manager, instead of including you in on strategy meetings, hands you a laundry list of image-related tasks. It includes: Crop . this Brighten . that Overlay "New arrivals!" on the Twitter header image. Resize the Facebook share card. Get me coffee. Translate "New arrivals!" to Russian, German, and Swahili. ...You get the point Now, you're a smart cookie. There's no way you want to spend your day wasting away on the computer having to manipulate all these images. So, you set out to find a better way. MANUALLY ⏸ Story over, for now Sorry, I get carried away. However, that scenario is no made-up story. It's real! Every day, whether at work or for personal projects, millions of images get created, edited, updated, hosted, taken down, lost, and so on. Services that help manage the chaos or streamline the process can be helpful. incredibly The other day, a friend shared with me . Immediately, I saw it as being an answer to so many image-related inefficiencies suffered by companies and people. Very quickly, I'll mention a and a . Cloudinary's URL API why how Why From a single image, dozens of tweaked versions might need to get created (faded, text-overlay, black-white, etc.). Each of those versions takes time to create, update, and organize. How Cloudinary's URL API takes a dynamic parameter that applies transformations to the image upon retrieval. Think of it like on-demand Photoshop! Personally, this got me excited. Notably, the transformation. After spending a little time playing with it, I wanted to see if it could be extended to incorporate localization (translation) of image text. Text Overlay A working demo came out of the exercise. You can play with it , or keep reading and learn how it works! here First off, let's take a quick look at the anatomy of the URL API. A large section of parameters exists between the and sections. These are a list of image transformations that get executed when the image is requested. Pretty cool! Right? The documentation is if you'd like to dive deeper. upload/ /horse.jpg right here https://res.cloudinary.com/demo/image/upload/c_crop,g_face,ar_16:9,w_1200,h_600/e_auto_contrast/b_rgb:00000099,e_gradient_fade,y_-0.4/co_white,fl_relative,l_text:Times_100_bold_italic:I%20am%20a%20unicorn!,w_0.95/co_black,e_shadow,x_2,y_1/fl_layer_apply,g_south_west,x_20,y_25/dpr_auto,q_auto,f_auto/horse.jpg Now, the image you see below gets rendered using the link above. Moreover, - this is the crucial part - if you change the transformation, a brand new image gets returned! The is easily visible when inspecting the URL. While we can't add a custom transformation tags (that is, on Cloudinary's side), we do have the ability to apply transformations to the URL. Meaning that, in the case of localizing our image overlays, we can coerce the URL before requesting the image. l_text:Times_100_bold_italic:I%20am%20a%20unicorn! A serverless GraphQL resolver function can get deployed to an to accomplish this. It can handle the parsing of the URL and translation. There are many ways to deploy a serverless function. However, 8base made it super simple and straight forward. 8base workspace As a quick specification, let's design the function to behave as follows. If a `local_[2-char-lang-code]` tag precedes the text, translate the text, and update the URL. If a local code does not precede the text, return the original URL. Enough talk, let's do it 1. Create a new 8base project Note: If you have an existing projected, you can always add a new function to it. npm install -g 8base-cli 8base init my-project --functions="resolver:localizer" # Install the CLI globally # Initialize a new project with a GraphQL resolver called "localizer." These commands create a new project with all the files and code we need to start invoking our GraphQL resolver function. We'll need to make a few changes though before it's translating our Cloudinary URL's 😉 2. Update the resolver's graphql.schema Open up the file at . We need to define our query operation and response. In this case, we'll be returning an object with the updated after having received the . Update the file with the following snippet. src/resolvers/localizer/schema.graphql url cloudinaryUrl type LocalizeResult { : !
}

extend type Query {
  localize(cloudinaryUrl: !): LocalizeResult
} url String String 3. Update the mock for invoke-local Update so that the function can get invoked locally with data. The mock file generated has the same schema as what gets passed to the function in production. src/resolvers/localizer/mocks/request.json { : { : }, : { : }, : } "data" "cloudinaryUrl" "https://res.cloudinary.com/cdemo/image/upload/c_crop,g_face,ar_16:9,w_1200,h_600/e_auto_contrast/b_rgb:00000099,e_gradient_fade,y_-0.4/co_white,fl_relative,l_text:Times_100_bold_italic:local_es:Breaking%20news:%208base%20solves%20all%20your%20image%20related%20needs!,w_0.95/co_black,e_shadow,x_2,y_1/fl_layer_apply,g_south_west,x_20,y_25/dpr_auto,q_auto,f_auto/dosh1/img-0.jpg" "headers" "x-header-1" "header value" "body" "{\"cloudinaryUrl\":\"https://res.cloudinary.com/cdemo/image/upload/c_crop,g_face,ar_16:9,w_1200,h_600/e_auto_contrast/b_rgb:00000099,e_gradient_fade,y_-0.4/co_white,fl_relative,l_text:Times_100_bold_italic:local_es:Breaking%20news:%208base%20solves%20all%20your%20image%20related%20needs!,w_0.95/co_black,e_shadow,x_2,y_1/fl_layer_apply,g_south_west,x_20,y_25/dpr_auto,q_auto,f_auto/dosh1/img-0.jpg\"}" 4. The function We're going to need a translation engine. I chose AWS Translate, which offers 2-million free characters per month. Let's add the required library and config to the project. npm install --save aws-sdk # Install AWS SDK Update src/resolvers/localizer/handler.ts. AWS  = ( );

AWS.config.update({ : , : { : process.env.AWS_IAM_SECRET_KEY, : process.env.AWS_IAM_ACCESS_KEY 
    }
}); translate = AWS.Translate({ : }); const require 'aws-sdk' region 'us-east-1' credentials accessKeyId secretAccessKey const new apiVersion '2017-07-01' /* Other code ... */ When developing locally, you'll need to set your AWS credentials as environment variables or static values. The example you see above is what works when the function gets deployed to 8base. Here's the documentation on accessing . 8base environment variables Since we're using TypeScript, the function response needs a . This type match the structure and name of that added to the file. For our scenario, prepend the following to the function body. type must graphql.schema type LocalizeResult = {
  data: {
    url: string
  }
}; The function body is pretty self-explanatory. Instead of describing it and then showing it , please read the inline comments for clarification on what's happening. here there (event: any, : any) : <LocalizeResult> => { REG_EX = url = event.data.cloudinaryUrl matchObj = REG_EX.exec(url); (matchObj) { local = matchObj[ ], text  = matchObj[ ]; { request = translate.translateText({ : local.slice( ), : , : (text)
      }).promise(); data = request; url = url.replace( , data.TranslatedText.replace( , ))
    } (err) { .log(err, err.stack);
    }    
  } { : {
      url
    }
  }
}; export default async ctx Promise /**
   * Regex Statement for matching our custom local_tag and preceeding text
   */ const /(local_[a-z]{2})\:(.*?)([,\/])/g /**
   * Pull the given cloudinary url from our function arguments 
   */ let /**
   * Execute our Regex statement returning a match object
   */ const /**
   * If a local tag is matched, we're in business! If not,
   * we're simply returning the passed url.
   */ if /**
     * Pull out the matched local and text values from
     * the matchObj array.
     */ let 1 2 try /**
       * Make the request to AWS Translate after decoding the given text
       * and slicing the last two characters from the local tag (e.g. local_es)
       */ let TargetLanguageCode -2 SourceLanguageCode 'auto' Text decodeURI let await /**
       * The ACTUAL cloudinary url will break if it has our custom tag. Plus, we
       * need to update the text with the translation! So, let's replace the previously
       * matched locale and text with our tranlsated text, that needs to be escaped.
       */ ` : ` ${local} ${text} /[.,%\`\s]/g '%20' catch console /**
   * Return the final result.
   */ return data 5. Run it! Done! Let's prove it by invoking our function locally. The returned URL's text section translates to the locale specified language! Copy the link and throw it in a browser to see the magic. base invoke-local localize -p src/resolvers/localize/mocks/request.json
invoking...

Result:
{ : { : { : }
  }
} 8 "data" "localize" "url" "https://res.cloudinary.com/demo/image/upload/c_crop,g_face,ar_16:9,w_1200,h_600/e_auto_contrast/b_rgb:00000099,e_gradient_fade,y_-0.4/co_white,fl_relative,l_text:Times_100_bold_italic:¡Soy%20un%20unicornio%20genial!,w_0.95/co_black,e_shadow,x_2,y_1/fl_layer_apply,g_south_west,x_20,y_25/dpr_auto,q_auto,f_auto/horse.jpg" 🏁 Wrap up Sorry, we're going back to storytime. Remember back when you were a social media intern? Well, you ended up finding and using Cloudinary for all your on-the-fly image transformation and 8base for lightening fast serverless deployment of serverless GraphQL functions. Excited by the chance to become "Employee of the Month", you approach your boss and share with him the big news by saying: "I was able to apply dynamic URL transformations to our images using a URL API and extend its functionality to support real-time translations of text overlay!" Seemingly confused, your manager looks at your hands and responds: "You forgot my coffee?" Just so you know; Cloudinary and 8base both do A LOT more than what is in this post. I highly recommend you check them out!

Localizing Image Text Overlays using Cloudinary + 8base + AWS Translate

Earlier this year, I decided to leave my job. While exploring new opportunities, I came across and became interested in a company that specializes in digital asset management (DAM), called Cloudinary. Happily, after a few rounds of interviews, both technical and nontechnical, I received an offer and joined the company in June as a full-time developer evangelist. My ramp-up plan was straightforward: Spend two weeks in Cloudinary’s office in Tel Aviv, Israel and meet the team there: engineers, product managers, senior executives. Out of pure luck, on the first day of my visit, Cloudinary hosted an internal , “ ,” in which I participated. It turned out to be a gem of an experience. hackathon Hack Outside the Crop Two things struck me soon after I’d spent some time in the Tel Aviv office. One, everyone was amicable and genuinely curious about who I am and what I know. I hadn’t expected the many hugs on day one but, hey, no complaints from me. Those warm gestures suit my personality and I like that kind of congenial work environment. Two, I was impressed to see the top executives casually walking around the office often, which gives us many opportunities to talk to them. It was obvious that if they are free, they are absolutely accessible. After being introduced and shown around the office on my first day, I joined the . From an organizational perspective, the hackathon was pretty standard, starting with pitching ideas and forming teams. The primary criteria were to create hacks that would augment, expand, or enhance Cloudinary’s core product offerings. hackathon I teamed up with another developer evangelist so that we could also use our time together to swap knowledge. That was a greatly beneficial for me because I was new to the technologies being adopted at Cloudinary and had a lot to learn. Nonetheless, I found it challenging at the beginning to even grasp the fundamentals. Thanks to the generous help of my team member and the engineers, all located in one section of the office, I made remarkable strides in short order. Gaining knowledge had never been so easy! The project that our team worked on was a Vue.js-based video editor that would enable marketers and bloggers to stitch and edit videos online with Cloudinary as the back end. The goal was to create an easy-to-use interface, as opposed to a fat client app, for downsizing videos for web browsers. Even though it was my very first experience with , I found it appealing and have since used it in multiple projects. Vue.js All in all, I much enjoyed the hackathon. It afforded me an invaluable opportunity to — * Meet and work with several Cloudinary teams. * Gain in-depth knowledge from a fellow evangelist. * Learn new technologies, both Vue.js and Cloudinary’s. And I got to eat a lot of delicious food while doing all that. In a matter of only a few hours, all the hackathon teams managed to whip up great hacks. At the end, each team presented its hack and I was amazed at how technical some of the solutions were. Check out all the . projects created by the teams Spa treatment and fun day with a +1. First place: Dinner with a +1 in a chef restaurant. Second place: The winning team built a digital asset management (DAM) terminal. DAM is a new Cloudinary offering that accords marketing, creative, and development teams the freedom to use rich media to drive customer or user engagement across diverse use cases. Conveniently, with the DAM terminal, you can execute file-system text commands and operations in the browser, just like in a UNIX terminal. Conclusion All in all, I found it both challenging and exciting to join Cloudinary at the time of the hackathon. Challenging, because I had to grasp the technical details fast; exciting, because I was thrown into the deep end, so to speak, but I learn best that way. Above all, it was gratifying to learn from all those knowledgeable, seasoned colleagues.

A Cloudinary Newbie’s First Impressions and First Hackathon

In today's digital world, where images and videos are pivotal in web applications, optimizing the media delivery process is essential for a seamless user experience. One powerful solution for managing and serving media assets is Cloudinary. In this blog post, we'll explore how to integrate Cloudinary into your Next.js application using the package. next-cloudinary What is Cloudinary? Cloudinary is a cloud-based media management platform that provides an end-to-end solution for storing, managing, optimizing, and delivering media assets such as images, videos, and documents. It offers a robust set of features for transforming and serving media efficiently. Cloudinary also helps developers handle tasks like resizing, cropping, and format conversion without the need for complex server-side code. Why Use Cloudinary with Next.js? Integrating Cloudinary with your Next.js application brings several benefits: Cloudinary optimizes media assets for faster loading, improving your website's performance and user experience. Optimized Image and Video Delivery: Cloudinary allows you to dynamically transform images and videos to suit various device screen sizes and resolutions, reducing the need for manual asset preparation. Media Transformation: Cloudinary leverages a Content Delivery Network (CDN) to deliver assets quickly and efficiently. It also provides caching options for faster load times. CDN and Caching: Cloudinary provides secure and scalable cloud-based storage, reducing the complexity of managing media files on your servers. Secure Storage: With the package, you can easily integrate Cloudinary into your Next.js project. Seamless Integration: next-cloudinary Setting Up a Next.js Project Before we integrate Cloudinary, ensure you have a Next.js project up and running. If not, you can create one using the following steps: Install Node.js if you haven't already. You can download it
from the . official website Create a new Next.js project using the following commands: npx create-next-app my-next-cloudinary-app
cd my-next-cloudinary-app Run the development server with . Your Next.js app should now be running at . npm run dev http://localhost:3000 Integrating Cloudinary with Next.js using next-cloudinary To integrate Cloudinary with your Next.js application, we'll use the package, which streamlines the process. Follow these steps: next-cloudinary 1. Install the Package next-cloudinary In your Next.js project directory, install the package using npm or yarn: next-cloudinary Copy code
npm install next-cloudinary
# or
yarn add next-cloudinary 2. Set Up a Cloudinary Account If you haven't already, create a and obtain your API credentials, including your cloud name and image preset. Cloudinary account 3. Get the Cloud name After logging in to your Cloudinary account, you will see the dashboard. Grab your cloud name and copy it into the environment variables of file in your nextjs app. next.config.js const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "*******",
  },
};

module.exports = nextConfig; Make sure that you name the variable as as the next-cloudinary package automatically reads this environment variable. NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME 4. Get an Unsigned Upload Preset Now, we will need an Upload Preset to upload images. Click on the settings icon in the left sidebar of your Cloudinary Account. Now, you will see the Accounts Page. Click on the Upload Tab from the left sidebar to head to upload settings. Now, you will see the upload page. On this page, you will see the Upload Presets section. Click from there to get an unsigned upload preset. Enable unsigned uploading As soon as you click it, you will see an upload preset. Copy that upload preset. Paste this upload preset as an environment variable in the file in your next.js app. next.config.js const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "********",
    NEXT_PUBLIC_CLOUDINARY_PRESET_NAME:"********"
  },
};
module.exports = nextConfig; We are going to name the environment variable as . NEXT_PUBLIC_CLOUDINARY_PRESET_NAME That's it. We have all the things that are required for the setup. 5. Add Cloudinary in the allowed domains In Next.js applications, when you serve images from a domain that differs from the current domain of your application, you need to specify the external domain in the file. next.config.js const nextConfig = {
  reactStrictMode: false,
  env: {
    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: "********",
    NEXT_PUBLIC_CLOUDINARY_PRESET_NAME:"********"
  },
  images: {
    domains: ["res.cloudinary.com"],
  },
};
module.exports = nextConfig; Add the in the images section. res.cloudinary.com 6. Use in Your Components next-cloudinary Now, we can use Cloudinary in our components to upload the images. The the package exposes a component named as . We are going to use that component for image upload. Here's the code. next-cloudinary CldUploadButton "use client";
import { CldUploadButton } from "next-cloudinary";
export default function Photos() {
  return (
    <div>    
      <CldUploadButton
        options={{ multiple: true }}
        uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_PRESET_NAME}
      >
        <span>
          Upload
        </span>
      </CldUploadButton>
    </div>
  );
} Make sure that you have the environment variable in place for uploadPreset. And that's it. With this, we have completed the setup for Cloudianry to upload the images. Here's a demo Conclusion In this comprehensive guide, we've covered the benefits of integrating Cloudinary with Next.js and provided a step-by-step tutorial on using the package to easily manage and serve media assets. Following these steps can enhance your web application's performance, optimize media delivery, and provide a superior user experience. Cloudinary is a powerful tool for managing media, and when combined with Next.js, it becomes a dynamic duo for building efficient and visually stunning web applications. Start harnessing the power of Cloudinary in your Next.js project today! next-cloudinary

CLOUDINARY

cloudinary.com

-- employees

Since n.d.

COMPANY RANKING

CLOUDINARY

EVERGREEN INDEX #3090

Representing this company? Click here to claim and customize this page!

Cloudinary WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

CLOUDINARY

cloudinary.com

-- employees

Since n.d.

COMPANY RANKING

CLOUDINARY

EVERGREEN INDEX #3090

RELATED COMPANIESRANK

STORIES ABOUT CLOUDINARY

Representing this company? Click here to claim and customize this page!

Cloudinary WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!