2c:null 2d:["$","title",null,{"children":"“classic” vs “subject” auto-cropping with Cloudinary | Eric Portis | Observable"}] 32:[] 30:{"id":"322a4185c346ba23","slug":"classic-vs-subject-auto-cropping-with-cloudinary","title":"“classic” vs “subject” auto-cropping with Cloudinary","thumbnail":"712fb6f5a2b097ab402e1a135de14dbbfb9c0df2866bf1b1663fe11a559afeb8","access_level":"public","create_time":"$D2019-02-27T20:26:17.135Z","update_time":"$D2019-02-28T19:17:31.279Z","view_time":null,"first_public_time":"$D2019-02-28T06:39:27.148Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"“classic” vs “subject” auto-cropping with Cloudinary","cells":[{"id":0,"value":"md`# “classic” vs “subject” auto-cropping with Cloudinary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`First, give me an image URL to work with.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof inputURL = {\n const form = html``;\n const input = form.querySelector('input');\n const button = form.querySelector('button');\n button.addEventListener('click', ( event ) => {\n event.preventDefault();\n fetch('https://source.unsplash.com/random').then( ( response ) => {\n input.value = response.url;\n form.value = response.url;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n });\n input.addEventListener( 'input', () => {\n form.value = input.value;\n } );\n form.value = input.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`(☝️ or click the button to get a new [random image from Unsplash](https://source.unsplash.com))\n\nOK, here's that image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"original = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html`

Crop to:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof ar = {\n const form = html``;\n const inputs = form.querySelectorAll('input');\n const update = () => {\n form.value = form.querySelector('input:checked').value;\n }\n inputs.forEach( ( input ) => {\n console.log(input)\n input.addEventListener( 'input', update );\n } );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof zoom = {\n const form = html``;\n const input = form.querySelector('input');\n const output = form.querySelector('output');\n const update = () => {\n output.textContent = `${ Math.round( parseFloat( input.value ) * 100 ) }%`;\n form.value = ( input.value == 1 ? '1.0' : input.value );\n }\n input.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`Let's compare Cloudinary’s \\`classic\\` vs \\`subject\\` auto-crops.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"images = html`

\n\n

Classic:

\n\n

Subject:

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"subjectURL = `https://o.img.rodeo/image/fetch/$ratio_${ ar }/if_ar_lt_$ratio,w_${ zoom },ar_${ ar },c_crop,g_auto:subject/if_else,h_${ zoom },ar_${ ar },c_crop,g_auto:subject/${ inputURL }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"classicURL = subjectURL.replace( /g_auto:subject/g, 'g_auto:classic' )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"html`

styles

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"