31:[] 2f:{"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"},{"id":151,"value":"md`First, give me an image URL to work with.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":8,"value":"original = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"html`

Crop to:

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":158,"value":"md`Let's compare Cloudinary’s \\`classic\\` vs \\`subject\\` auto-crops.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"images = html`

\n\n

Classic:

\n\n

Subject:

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":49,"value":"classicURL = subjectURL.replace( /g_auto:subject/g, 'g_auto:classic' )","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"html`

styles

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}