[{"transcript":" Cloudinary makes it easy to display an image gallery with a large amount of images on your","confidence":0.7918823529411765,"words":[{"word":"Cloudinary","start_time":0.04,"end_time":0.502},{"word":"makes","start_time":0.543,"end_time":0.723},{"word":"it","start_time":0.784,"end_time":0.844},{"word":"easy","start_time":0.904,"end_time":1.085},{"word":"to","start_time":1.125,"end_time":1.226},{"word":"display","start_time":1.266,"end_time":1.648},{"word":"an","start_time":1.708,"end_time":1.789},{"word":"image","start_time":1.849,"end_time":2.07},{"word":"gallery","start_time":2.11,"end_time":2.472},{"word":"with","start_time":2.653,"end_time":2.793},{"word":"a","start_time":2.834,"end_time":2.854},{"word":"large","start_time":2.894,"end_time":3.115},{"word":"amount","start_time":3.135,"end_time":3.356},{"word":"of","start_time":3.396,"end_time":3.457},{"word":"images","start_time":3.577,"end_time":3.899},{"word":"on","start_time":3.919,"end_time":3.959},{"word":"your","start_time":3.999,"end_time":4.1}],"alternatives":[],"language":"en"},{"transcript":" page.","confidence":0.328,"words":[{"word":"page.","start_time":4.331,"end_time":4.459}],"alternatives":[],"language":"en"},{"transcript":" Let's see how we can add the product gallery to add our images in a React application.","confidence":0.8064117647058824,"words":[{"word":"Let's","start_time":4.901,"end_time":5.042},{"word":"see","start_time":5.062,"end_time":5.162},{"word":"how","start_time":5.203,"end_time":5.283},{"word":"we","start_time":5.323,"end_time":5.403},{"word":"can","start_time":5.444,"end_time":5.564},{"word":"add","start_time":5.665,"end_time":5.785},{"word":"the","start_time":5.826,"end_time":5.906},{"word":"product","start_time":5.946,"end_time":6.248},{"word":"gallery","start_time":6.268,"end_time":6.67},{"word":"to","start_time":6.77,"end_time":6.911},{"word":"add","start_time":7.072,"end_time":7.232},{"word":"our","start_time":7.353,"end_time":7.473},{"word":"images","start_time":7.574,"end_time":7.916},{"word":"in","start_time":8.056,"end_time":8.117},{"word":"a","start_time":8.157,"end_time":8.217},{"word":"React","start_time":8.257,"end_time":8.519},{"word":"application.","start_time":8.539,"end_time":8.8}],"alternatives":[],"language":"en"},{"transcript":" To start initializing the product gallery widget, we need to add its script link in","confidence":0.7474666666666667,"words":[{"word":"To","start_time":12.022,"end_time":12.122},{"word":"start","start_time":12.163,"end_time":12.384},{"word":"initializing","start_time":12.444,"end_time":12.966},{"word":"the","start_time":13.006,"end_time":13.086},{"word":"product","start_time":13.106,"end_time":13.388},{"word":"gallery","start_time":13.408,"end_time":13.769},{"word":"widget,","start_time":13.809,"end_time":14.151},{"word":"we","start_time":14.492,"end_time":14.573},{"word":"need","start_time":14.633,"end_time":14.773},{"word":"to","start_time":14.794,"end_time":14.894},{"word":"add","start_time":15.014,"end_time":15.175},{"word":"its","start_time":15.276,"end_time":15.376},{"word":"script","start_time":15.456,"end_time":15.798},{"word":"link","start_time":15.858,"end_time":16.119},{"word":"in","start_time":16.32,"end_time":16.36}],"alternatives":[],"language":"en"},{"transcript":" This will add a Cloudinary property to our Window object,","confidence":0.8398999999999999,"words":[{"word":"This","start_time":20.731,"end_time":20.852},{"word":"will","start_time":20.892,"end_time":21.073},{"word":"add","start_time":21.154,"end_time":21.315},{"word":"a","start_time":21.355,"end_time":21.375},{"word":"Cloudinary","start_time":21.416,"end_time":21.959},{"word":"property","start_time":22.02,"end_time":22.523},{"word":"to","start_time":22.583,"end_time":22.704},{"word":"our","start_time":22.825,"end_time":22.946},{"word":"Window","start_time":23.026,"end_time":23.328},{"word":"object,","start_time":23.469,"end_time":23.59}],"alternatives":[],"language":"en"},{"transcript":" which contains the GalleryWidgetInitialization method.","confidence":0.6668000000000001,"words":[{"word":"which","start_time":23.991,"end_time":24.132},{"word":"contains","start_time":24.173,"end_time":24.556},{"word":"the","start_time":24.596,"end_time":24.697},{"word":"GalleryWidgetInitialization","start_time":24.717,"end_time":26.249},{"word":"method.","start_time":26.269,"end_time":26.39}],"alternatives":[],"language":"en"},{"transcript":" So, let's first add a useEffect to ensure that we have access to the Window object.","confidence":0.7343749999999999,"words":[{"word":"So,","start_time":27.012,"end_time":27.152},{"word":"let's","start_time":27.534,"end_time":27.695},{"word":"first","start_time":27.715,"end_time":27.915},{"word":"add","start_time":28.016,"end_time":28.136},{"word":"a","start_time":28.177,"end_time":28.217},{"word":"useEffect","start_time":28.297,"end_time":28.839},{"word":"to","start_time":29.06,"end_time":29.181},{"word":"ensure","start_time":29.261,"end_time":29.563},{"word":"that","start_time":29.603,"end_time":29.723},{"word":"we","start_time":29.784,"end_time":29.884},{"word":"have","start_time":29.924,"end_time":30.065},{"word":"access","start_time":30.165,"end_time":30.467},{"word":"to","start_time":30.507,"end_time":30.627},{"word":"the","start_time":30.647,"end_time":30.748},{"word":"Window","start_time":30.788,"end_time":31.069},{"word":"object.","start_time":31.089,"end_time":31.23}],"alternatives":[],"language":"en"},{"transcript":" Then we can invoke the GalleryWidget method and pass the following options.","confidence":0.8272500000000002,"words":[{"word":"Then","start_time":31.832,"end_time":31.952},{"word":"we","start_time":31.993,"end_time":32.073},{"word":"can","start_time":32.113,"end_time":32.234},{"word":"invoke","start_time":32.254,"end_time":32.556},{"word":"the","start_time":32.576,"end_time":32.677},{"word":"GalleryWidget","start_time":32.697,"end_time":33.36},{"word":"method","start_time":33.401,"end_time":33.722},{"word":"and","start_time":34.024,"end_time":34.125},{"word":"pass","start_time":34.205,"end_time":34.406},{"word":"the","start_time":34.426,"end_time":34.507},{"word":"following","start_time":34.547,"end_time":34.869},{"word":"options.","start_time":34.889,"end_time":35.07}],"alternatives":[],"language":"en"},{"transcript":" A ContainerRef that points to the div in which we want to render the image gallery,","confidence":0.8211875000000001,"words":[{"word":"A","start_time":35.892,"end_time":35.972},{"word":"ContainerRef","start_time":35.992,"end_time":36.716},{"word":"that","start_time":36.876,"end_time":37.017},{"word":"points","start_time":37.097,"end_time":37.339},{"word":"to","start_time":37.359,"end_time":37.479},{"word":"the","start_time":37.499,"end_time":37.62},{"word":"div","start_time":37.66,"end_time":37.901},{"word":"in","start_time":38.022,"end_time":38.102},{"word":"which","start_time":38.182,"end_time":38.343},{"word":"we","start_time":38.363,"end_time":38.464},{"word":"want","start_time":38.484,"end_time":38.645},{"word":"to","start_time":38.685,"end_time":38.765},{"word":"render","start_time":38.845,"end_time":39.167},{"word":"the","start_time":39.227,"end_time":39.348},{"word":"image","start_time":39.488,"end_time":39.669},{"word":"gallery,","start_time":39.709,"end_time":39.85}],"alternatives":[],"language":"en"},{"transcript":" CloudName, which can be found in our Cloudinary dashboard,","confidence":0.7976666666666667,"words":[{"word":"CloudName,","start_time":40.292,"end_time":40.876},{"word":"which","start_time":41.017,"end_time":41.158},{"word":"can","start_time":41.198,"end_time":41.319},{"word":"be","start_time":41.36,"end_time":41.44},{"word":"found","start_time":41.481,"end_time":41.702},{"word":"in","start_time":41.742,"end_time":41.803},{"word":"our","start_time":41.863,"end_time":41.984},{"word":"Cloudinary","start_time":42.025,"end_time":42.528},{"word":"dashboard,","start_time":42.548,"end_time":42.73}],"alternatives":[],"language":"en"},{"transcript":" and a MediaAssetArray that defines which images from our media library will be used in this gallery.","confidence":0.8065294117647059,"words":[{"word":"and","start_time":43.511,"end_time":43.632},{"word":"a","start_time":43.692,"end_time":43.732},{"word":"MediaAssetArray","start_time":43.772,"end_time":44.896},{"word":"that","start_time":45.036,"end_time":45.177},{"word":"defines","start_time":45.217,"end_time":45.598},{"word":"which","start_time":45.699,"end_time":45.919},{"word":"images","start_time":46.06,"end_time":46.461},{"word":"from","start_time":46.541,"end_time":46.702},{"word":"our","start_time":46.882,"end_time":47.003},{"word":"media","start_time":47.083,"end_time":47.364},{"word":"library","start_time":47.404,"end_time":47.806},{"word":"will","start_time":47.946,"end_time":48.147},{"word":"be","start_time":48.187,"end_time":48.267},{"word":"used","start_time":48.408,"end_time":48.568},{"word":"in","start_time":48.648,"end_time":48.709},{"word":"this","start_time":48.749,"end_time":48.909},{"word":"gallery.","start_time":48.97,"end_time":49.11}],"alternatives":[],"language":"en"},{"transcript":" Let's create the container ref first.","confidence":0.7759999999999999,"words":[{"word":"Let's","start_time":49.682,"end_time":49.844},{"word":"create","start_time":49.865,"end_time":50.088},{"word":"the","start_time":50.108,"end_time":50.169},{"word":"container","start_time":50.209,"end_time":50.635},{"word":"ref","start_time":50.655,"end_time":50.858},{"word":"first.","start_time":50.878,"end_time":51.02}],"alternatives":[],"language":"en"},{"transcript":" We'll use the useRef hook to create a new ref and assign it to the div below.","confidence":0.79,"words":[{"word":"We'll","start_time":51.662,"end_time":51.822},{"word":"use","start_time":51.903,"end_time":52.024},{"word":"the","start_time":52.044,"end_time":52.104},{"word":"useRef","start_time":52.245,"end_time":52.667},{"word":"hook","start_time":52.707,"end_time":52.908},{"word":"to","start_time":52.948,"end_time":53.029},{"word":"create","start_time":53.049,"end_time":53.25},{"word":"a","start_time":53.29,"end_time":53.33},{"word":"new","start_time":53.37,"end_time":53.491},{"word":"ref","start_time":53.551,"end_time":53.752},{"word":"and","start_time":54.195,"end_time":54.295},{"word":"assign","start_time":54.335,"end_time":54.557},{"word":"it","start_time":54.597,"end_time":54.657},{"word":"to","start_time":54.677,"end_time":54.778},{"word":"the","start_time":54.798,"end_time":54.858},{"word":"div","start_time":54.918,"end_time":55.099},{"word":"below.","start_time":55.119,"end_time":55.22}],"alternatives":[],"language":"en"},{"transcript":" Now we can add it to the options but it's also a good idea to add it in the if condition above.","confidence":0.8295454545454546,"words":[{"word":"Now","start_time":55.822,"end_time":55.922},{"word":"we","start_time":55.942,"end_time":56.022},{"word":"can","start_time":56.063,"end_time":56.203},{"word":"add","start_time":56.284,"end_time":56.404},{"word":"it","start_time":56.424,"end_time":56.484},{"word":"to","start_time":56.505,"end_time":56.585},{"word":"the","start_time":56.625,"end_time":56.705},{"word":"options","start_time":56.826,"end_time":57.147},{"word":"but","start_time":57.529,"end_time":57.609},{"word":"it's","start_time":57.65,"end_time":57.75},{"word":"also","start_time":57.79,"end_time":57.971},{"word":"a","start_time":58.011,"end_time":58.051},{"word":"good","start_time":58.091,"end_time":58.252},{"word":"idea","start_time":58.292,"end_time":58.533},{"word":"to","start_time":58.594,"end_time":58.694},{"word":"add","start_time":58.815,"end_time":58.915},{"word":"it","start_time":58.955,"end_time":59.015},{"word":"in","start_time":59.116,"end_time":59.176},{"word":"the","start_time":59.216,"end_time":59.297},{"word":"if","start_time":59.417,"end_time":59.538},{"word":"condition","start_time":59.578,"end_time":59.939},{"word":"above.","start_time":59.96,"end_time":60.06}],"alternatives":[],"language":"en"},{"transcript":" Then we can set the cloud name value which can be found in the Cloudinary dashboard.","confidence":0.8063124999999999,"words":[{"word":"Then","start_time":60.662,"end_time":60.762},{"word":"we","start_time":60.782,"end_time":60.883},{"word":"can","start_time":60.903,"end_time":61.024},{"word":"set","start_time":61.044,"end_time":61.205},{"word":"the","start_time":61.225,"end_time":61.305},{"word":"cloud","start_time":61.325,"end_time":61.607},{"word":"name","start_time":61.647,"end_time":61.848},{"word":"value","start_time":61.888,"end_time":62.23},{"word":"which","start_time":62.612,"end_time":62.733},{"word":"can","start_time":62.773,"end_time":62.893},{"word":"be","start_time":62.934,"end_time":62.994},{"word":"found","start_time":63.034,"end_time":63.255},{"word":"in","start_time":63.316,"end_time":63.396},{"word":"the","start_time":63.416,"end_time":63.497},{"word":"Cloudinary","start_time":63.517,"end_time":63.899},{"word":"dashboard.","start_time":63.939,"end_time":64.14}],"alternatives":[],"language":"en"},{"transcript":" Now let's provide the media assets definitions.","confidence":0.7882857142857143,"words":[{"word":"Now","start_time":64.843,"end_time":64.944},{"word":"let's","start_time":64.985,"end_time":65.126},{"word":"provide","start_time":65.146,"end_time":65.449},{"word":"the","start_time":65.47,"end_time":65.53},{"word":"media","start_time":65.591,"end_time":65.894},{"word":"assets","start_time":65.995,"end_time":66.297},{"word":"definitions.","start_time":66.318,"end_time":66.54}],"alternatives":[],"language":"en"},{"transcript":" The easiest way to define which images are to be displayed is by using the tag property.","confidence":0.7671176470588236,"words":[{"word":"The","start_time":67.422,"end_time":67.542},{"word":"easiest","start_time":67.643,"end_time":67.984},{"word":"way","start_time":68.044,"end_time":68.165},{"word":"to","start_time":68.205,"end_time":68.305},{"word":"define","start_time":68.346,"end_time":68.687},{"word":"which","start_time":68.747,"end_time":68.928},{"word":"images","start_time":69.028,"end_time":69.35},{"word":"are","start_time":69.49,"end_time":69.591},{"word":"to","start_time":69.631,"end_time":69.711},{"word":"be","start_time":69.752,"end_time":69.832},{"word":"displayed","start_time":69.872,"end_time":70.314},{"word":"is","start_time":70.655,"end_time":70.736},{"word":"by","start_time":70.756,"end_time":70.856},{"word":"using","start_time":70.937,"end_time":71.138},{"word":"the","start_time":71.178,"end_time":71.258},{"word":"tag","start_time":71.298,"end_time":71.499},{"word":"property.","start_time":71.539,"end_time":71.7}],"alternatives":[],"language":"en"},{"transcript":" So let's display all images from our library that have the tag gallery images.","confidence":0.7820000000000001,"words":[{"word":"So","start_time":72.361,"end_time":72.462},{"word":"let's","start_time":72.482,"end_time":72.643},{"word":"display","start_time":72.683,"end_time":73.024},{"word":"all","start_time":73.185,"end_time":73.325},{"word":"images","start_time":73.466,"end_time":73.808},{"word":"from","start_time":73.908,"end_time":74.069},{"word":"our","start_time":74.229,"end_time":74.35},{"word":"library","start_time":74.43,"end_time":74.852},{"word":"that","start_time":75.173,"end_time":75.334},{"word":"have","start_time":75.394,"end_time":75.555},{"word":"the","start_time":75.595,"end_time":75.696},{"word":"tag","start_time":75.736,"end_time":75.977},{"word":"gallery","start_time":76.158,"end_time":76.539},{"word":"images.","start_time":76.559,"end_time":76.72}],"alternatives":[],"language":"en"},{"transcript":" To add a tag to multiple images, we can simply select them, click on the tag action,","confidence":0.8426470588235292,"words":[{"word":"To","start_time":77.451,"end_time":77.591},{"word":"add","start_time":77.752,"end_time":77.913},{"word":"a","start_time":77.993,"end_time":78.013},{"word":"tag","start_time":78.073,"end_time":78.334},{"word":"to","start_time":78.374,"end_time":78.475},{"word":"multiple","start_time":78.535,"end_time":78.937},{"word":"images,","start_time":78.977,"end_time":79.318},{"word":"we","start_time":79.559,"end_time":79.66},{"word":"can","start_time":79.68,"end_time":79.8},{"word":"simply","start_time":79.881,"end_time":80.202},{"word":"select","start_time":80.242,"end_time":80.584},{"word":"them,","start_time":80.624,"end_time":80.765},{"word":"click","start_time":81.126,"end_time":81.327},{"word":"on","start_time":81.347,"end_time":81.407},{"word":"the","start_time":81.447,"end_time":81.528},{"word":"tag","start_time":81.568,"end_time":81.829},{"word":"action,","start_time":81.849,"end_time":82.07}],"alternatives":[],"language":"en"},{"transcript":" type in the tag we'd like to use, and then click update.","confidence":0.8075833333333334,"words":[{"word":"type","start_time":82.671,"end_time":82.932},{"word":"in","start_time":82.953,"end_time":83.053},{"word":"the","start_time":83.073,"end_time":83.153},{"word":"tag","start_time":83.194,"end_time":83.394},{"word":"we'd","start_time":83.415,"end_time":83.575},{"word":"like","start_time":83.595,"end_time":83.776},{"word":"to","start_time":83.816,"end_time":83.937},{"word":"use,","start_time":84.097,"end_time":84.258},{"word":"and","start_time":84.64,"end_time":84.72},{"word":"then","start_time":84.74,"end_time":84.881},{"word":"click","start_time":84.921,"end_time":85.102},{"word":"update.","start_time":85.202,"end_time":85.544}],"alternatives":[],"language":"en"},{"transcript":"You should also make sure that","confidence":0.7539999999999999,"words":[{"word":"You","start_time":85.945,"end_time":86.026},{"word":"should","start_time":86.046,"end_time":86.206},{"word":"also","start_time":86.247,"end_time":86.447},{"word":"make","start_time":86.508,"end_time":86.668},{"word":"sure","start_time":86.749,"end_time":86.929},{"word":"that","start_time":86.95,"end_time":87.03}],"alternatives":[],"language":"en"},{"transcript":" the resource list option is not enabled in the restricted media types, and you can check that","confidence":0.8130000000000001,"words":[{"word":"the","start_time":87.09,"end_time":87.291},{"word":"resource","start_time":87.351,"end_time":87.833},{"word":"list","start_time":87.913,"end_time":88.154},{"word":"option","start_time":88.315,"end_time":88.636},{"word":"is","start_time":88.857,"end_time":88.937},{"word":"not","start_time":88.977,"end_time":89.118},{"word":"enabled","start_time":89.198,"end_time":89.74},{"word":"in","start_time":89.82,"end_time":89.921},{"word":"the","start_time":89.941,"end_time":90.021},{"word":"restricted","start_time":90.061,"end_time":90.563},{"word":"media","start_time":90.663,"end_time":90.965},{"word":"types,","start_time":90.985,"end_time":91.286},{"word":"and","start_time":91.788,"end_time":91.868},{"word":"you","start_time":91.908,"end_time":91.988},{"word":"can","start_time":92.009,"end_time":92.109},{"word":"check","start_time":92.149,"end_time":92.31},{"word":"that","start_time":92.33,"end_time":92.41}],"alternatives":[],"language":"en"},{"transcript":" in the security page in your settings.","confidence":0.9118571428571427,"words":[{"word":"in","start_time":92.631,"end_time":92.691},{"word":"the","start_time":92.731,"end_time":92.832},{"word":"security","start_time":92.872,"end_time":93.334},{"word":"page","start_time":93.354,"end_time":93.656},{"word":"in","start_time":93.816,"end_time":93.897},{"word":"your","start_time":93.937,"end_time":94.138},{"word":"settings.","start_time":94.198,"end_time":94.6}],"alternatives":[],"language":"en"},{"transcript":"To show the gallery on our page, we need","confidence":0.7543333333333333,"words":[{"word":"To","start_time":95.002,"end_time":95.102},{"word":"show","start_time":95.122,"end_time":95.303},{"word":"the","start_time":95.343,"end_time":95.444},{"word":"gallery","start_time":95.464,"end_time":95.825},{"word":"on","start_time":95.906,"end_time":95.966},{"word":"our","start_time":96.026,"end_time":96.147},{"word":"page,","start_time":96.167,"end_time":96.448},{"word":"we","start_time":96.669,"end_time":96.75},{"word":"need","start_time":96.77,"end_time":96.85}],"alternatives":[],"language":"en"},{"transcript":" to invoke the render method on the gallery widget.","confidence":0.9373333333333334,"words":[{"word":"to","start_time":96.971,"end_time":97.111},{"word":"invoke","start_time":97.192,"end_time":97.533},{"word":"the","start_time":97.574,"end_time":97.654},{"word":"render","start_time":97.734,"end_time":98.056},{"word":"method","start_time":98.096,"end_time":98.458},{"word":"on","start_time":98.78,"end_time":98.84},{"word":"the","start_time":98.88,"end_time":98.94},{"word":"gallery","start_time":98.98,"end_time":99.302},{"word":"widget.","start_time":99.342,"end_time":99.624}],"alternatives":[],"language":"en"},{"transcript":"So let's add a render","confidence":0.7504000000000002,"words":[{"word":"So","start_time":99.925,"end_time":100.046},{"word":"let's","start_time":100.086,"end_time":100.267},{"word":"add","start_time":100.428,"end_time":100.548},{"word":"a","start_time":100.609,"end_time":100.669},{"word":"render","start_time":100.749,"end_time":100.91}],"alternatives":[],"language":"en"},{"transcript":" after our gallery widget initialization.","confidence":0.8832000000000001,"words":[{"word":"after","start_time":101.473,"end_time":101.714},{"word":"our","start_time":101.814,"end_time":101.935},{"word":"gallery","start_time":101.995,"end_time":102.336},{"word":"widget","start_time":102.357,"end_time":102.678},{"word":"initialization.","start_time":102.839,"end_time":103.542}],"alternatives":[],"language":"en"},{"transcript":"And now we can see the gallery on our page.","confidence":0.8428999999999999,"words":[{"word":"And","start_time":103.843,"end_time":103.904},{"word":"now","start_time":103.924,"end_time":104.004},{"word":"we","start_time":104.024,"end_time":104.105},{"word":"can","start_time":104.125,"end_time":104.245},{"word":"see","start_time":104.265,"end_time":104.426},{"word":"the","start_time":104.446,"end_time":104.526},{"word":"gallery","start_time":104.547,"end_time":104.888},{"word":"on","start_time":104.968,"end_time":105.009},{"word":"our","start_time":105.069,"end_time":105.169},{"word":"page.","start_time":105.189,"end_time":105.31}],"alternatives":[],"language":"en"},{"transcript":" We can take this further and customize our gallery.","confidence":0.8483333333333333,"words":[{"word":"We","start_time":106.373,"end_time":106.433},{"word":"can","start_time":106.473,"end_time":106.574},{"word":"take","start_time":106.594,"end_time":106.735},{"word":"this","start_time":106.776,"end_time":106.937},{"word":"further","start_time":107.018,"end_time":107.4},{"word":"and","start_time":107.542,"end_time":107.642},{"word":"customize","start_time":107.703,"end_time":108.247},{"word":"our","start_time":108.307,"end_time":108.408},{"word":"gallery.","start_time":108.448,"end_time":108.65}],"alternatives":[],"language":"en"},{"transcript":" To start, we can see some spacing on top of the image I used for my gallery here.","confidence":0.8530555555555555,"words":[{"word":"To","start_time":109.151,"end_time":109.252},{"word":"start,","start_time":109.292,"end_time":109.573},{"word":"we","start_time":109.834,"end_time":109.915},{"word":"can","start_time":109.955,"end_time":110.075},{"word":"see","start_time":110.115,"end_time":110.256},{"word":"some","start_time":110.296,"end_time":110.457},{"word":"spacing","start_time":110.517,"end_time":110.999},{"word":"on","start_time":111.1,"end_time":111.18},{"word":"top","start_time":111.24,"end_time":111.421},{"word":"of","start_time":111.461,"end_time":111.542},{"word":"the","start_time":111.582,"end_time":111.662},{"word":"image","start_time":111.803,"end_time":112.084},{"word":"I","start_time":112.185,"end_time":112.225},{"word":"used","start_time":112.345,"end_time":112.506},{"word":"for","start_time":112.586,"end_time":112.727},{"word":"my","start_time":112.767,"end_time":112.908},{"word":"gallery","start_time":112.928,"end_time":113.31},{"word":"here.","start_time":113.33,"end_time":113.41}],"alternatives":[],"language":"en"},{"transcript":" That's because the default aspect ratio of the images is square and my image is wide.","confidence":0.8160625000000001,"words":[{"word":"That's","start_time":113.971,"end_time":114.152},{"word":"because","start_time":114.172,"end_time":114.453},{"word":"the","start_time":114.473,"end_time":114.574},{"word":"default","start_time":114.614,"end_time":115.056},{"word":"aspect","start_time":115.176,"end_time":115.517},{"word":"ratio","start_time":115.558,"end_time":115.959},{"word":"of","start_time":116.04,"end_time":116.12},{"word":"the","start_time":116.16,"end_time":116.24},{"word":"images","start_time":116.341,"end_time":116.762},{"word":"is","start_time":116.923,"end_time":117.003},{"word":"square","start_time":117.064,"end_time":117.445},{"word":"and","start_time":117.666,"end_time":117.746},{"word":"my","start_time":117.786,"end_time":117.967},{"word":"image","start_time":118.048,"end_time":118.288},{"word":"is","start_time":118.409,"end_time":118.469},{"word":"wide.","start_time":118.489,"end_time":118.67}],"alternatives":[],"language":"en"},{"transcript":" We can change that by setting the aspect ratio property to the one we want.","confidence":0.9104,"words":[{"word":"We","start_time":119.191,"end_time":119.272},{"word":"can","start_time":119.292,"end_time":119.433},{"word":"change","start_time":119.453,"end_time":119.694},{"word":"that","start_time":119.734,"end_time":119.875},{"word":"by","start_time":119.915,"end_time":120.035},{"word":"setting","start_time":120.096,"end_time":120.377},{"word":"the","start_time":120.437,"end_time":120.558},{"word":"aspect","start_time":120.739,"end_time":121.06},{"word":"ratio","start_time":121.121,"end_time":121.402},{"word":"property","start_time":121.442,"end_time":121.945},{"word":"to","start_time":121.965,"end_time":122.487},{"word":"the","start_time":122.527,"end_time":122.588},{"word":"one","start_time":122.668,"end_time":122.748},{"word":"we","start_time":122.789,"end_time":122.869},{"word":"want.","start_time":122.909,"end_time":123.05}],"alternatives":[],"language":"en"},{"transcript":" So let's say 16 by 9.","confidence":0.43383333333333335,"words":[{"word":"So","start_time":123.514,"end_time":123.615},{"word":"let's","start_time":123.656,"end_time":123.818},{"word":"say","start_time":123.839,"end_time":123.92},{"word":"16","start_time":123.94,"end_time":123.981},{"word":"by","start_time":124.041,"end_time":124.082},{"word":"9.","start_time":124.102,"end_time":124.123}],"alternatives":[],"language":"en"},{"transcript":" Now the extra space is gone.","confidence":0.6408333333333334,"words":[{"word":"Now","start_time":125.135,"end_time":125.277},{"word":"the","start_time":125.318,"end_time":125.399},{"word":"extra","start_time":125.46,"end_time":125.663},{"word":"space","start_time":125.683,"end_time":125.907},{"word":"is","start_time":125.968,"end_time":126.028},{"word":"gone.","start_time":126.049,"end_time":126.13}],"alternatives":[],"language":"en"},{"transcript":" Aside from images, we can also show videos and spin sets.","confidence":0.8020909090909091,"words":[{"word":"Aside","start_time":126.732,"end_time":126.974},{"word":"from","start_time":127.014,"end_time":127.155},{"word":"images,","start_time":127.235,"end_time":127.577},{"word":"we","start_time":127.819,"end_time":127.899},{"word":"can","start_time":127.919,"end_time":128.04},{"word":"also","start_time":128.08,"end_time":128.301},{"word":"show","start_time":128.342,"end_time":128.543},{"word":"videos","start_time":128.623,"end_time":129.046},{"word":"and","start_time":129.167,"end_time":129.287},{"word":"spin","start_time":129.368,"end_time":129.609},{"word":"sets.","start_time":129.629,"end_time":129.71}],"alternatives":[],"language":"en"},{"transcript":" Let's try adding a video in our gallery.","confidence":0.78,"words":[{"word":"Let's","start_time":130.454,"end_time":130.615},{"word":"try","start_time":130.635,"end_time":130.817},{"word":"adding","start_time":130.918,"end_time":131.12},{"word":"a","start_time":131.161,"end_time":131.201},{"word":"video","start_time":131.242,"end_time":131.565},{"word":"in","start_time":131.625,"end_time":131.686},{"word":"our","start_time":131.726,"end_time":131.828},{"word":"gallery.","start_time":131.848,"end_time":132.07}],"alternatives":[],"language":"en"},{"transcript":" We'll duplicate the tag object.","confidence":0.6516,"words":[{"word":"We'll","start_time":132.554,"end_time":132.736},{"word":"duplicate","start_time":132.777,"end_time":133.182},{"word":"the","start_time":133.202,"end_time":133.283},{"word":"tag","start_time":133.324,"end_time":133.587},{"word":"object.","start_time":133.607,"end_time":133.81}],"alternatives":[],"language":"en"},{"transcript":" Rename the tag to gallery-videos, but also set the media type property to video, to indicate that we're displaying videos.","confidence":0.8009499999999999,"words":[{"word":"Rename","start_time":134.5,"end_time":134.881},{"word":"the","start_time":134.901,"end_time":134.982},{"word":"tag","start_time":135.042,"end_time":135.282},{"word":"to","start_time":135.323,"end_time":135.483},{"word":"gallery-videos,","start_time":135.543,"end_time":136.887},{"word":"but","start_time":137.268,"end_time":137.388},{"word":"also","start_time":137.468,"end_time":137.729},{"word":"set","start_time":137.789,"end_time":137.97},{"word":"the","start_time":138.01,"end_time":138.09},{"word":"media","start_time":138.17,"end_time":138.551},{"word":"type","start_time":138.571,"end_time":138.772},{"word":"property","start_time":138.832,"end_time":139.273},{"word":"to","start_time":139.313,"end_time":139.434},{"word":"video,","start_time":139.514,"end_time":139.935},{"word":"to","start_time":140.095,"end_time":140.216},{"word":"indicate","start_time":140.316,"end_time":140.697},{"word":"that","start_time":140.737,"end_time":140.858},{"word":"we're","start_time":140.918,"end_time":141.118},{"word":"displaying","start_time":141.158,"end_time":141.62},{"word":"videos.","start_time":141.66,"end_time":141.78}],"alternatives":[],"language":"en"},{"transcript":" Also, don't forget to tag your videos as well.","confidence":0.6844444444444444,"words":[{"word":"Also,","start_time":142.463,"end_time":142.705},{"word":"don't","start_time":142.786,"end_time":142.948},{"word":"forget","start_time":142.988,"end_time":143.23},{"word":"to","start_time":143.251,"end_time":143.291},{"word":"tag","start_time":143.352,"end_time":143.553},{"word":"your","start_time":143.574,"end_time":143.695},{"word":"videos","start_time":143.715,"end_time":144.038},{"word":"as","start_time":144.098,"end_time":144.159},{"word":"well.","start_time":144.179,"end_time":144.26}],"alternatives":[],"language":"en"},{"transcript":" If we refresh the page, we'll see the new video as the last element of our gallery.","confidence":0.8368235294117646,"words":[{"word":"If","start_time":144.781,"end_time":144.842},{"word":"we","start_time":144.882,"end_time":145.002},{"word":"refresh","start_time":145.043,"end_time":145.344},{"word":"the","start_time":145.404,"end_time":145.485},{"word":"page,","start_time":145.505,"end_time":145.786},{"word":"we'll","start_time":145.866,"end_time":146.067},{"word":"see","start_time":146.108,"end_time":146.268},{"word":"the","start_time":146.309,"end_time":146.409},{"word":"new","start_time":146.469,"end_time":146.65},{"word":"video","start_time":146.69,"end_time":147.092},{"word":"as","start_time":147.273,"end_time":147.373},{"word":"the","start_time":147.434,"end_time":147.554},{"word":"last","start_time":147.594,"end_time":147.856},{"word":"element","start_time":147.956,"end_time":148.318},{"word":"of","start_time":148.378,"end_time":148.418},{"word":"our","start_time":148.519,"end_time":148.619},{"word":"gallery.","start_time":148.639,"end_time":148.8}],"alternatives":[],"language":"en"},{"transcript":" There's also an option to change the display mode of the gallery.","confidence":0.7998333333333333,"words":[{"word":"There's","start_time":150.123,"end_time":150.324},{"word":"also","start_time":150.344,"end_time":150.546},{"word":"an","start_time":150.566,"end_time":150.626},{"word":"option","start_time":150.707,"end_time":150.928},{"word":"to","start_time":150.968,"end_time":151.049},{"word":"change","start_time":151.109,"end_time":151.371},{"word":"the","start_time":151.391,"end_time":151.492},{"word":"display","start_time":151.573,"end_time":152.016},{"word":"mode","start_time":152.056,"end_time":152.297},{"word":"of","start_time":152.318,"end_time":152.378},{"word":"the","start_time":152.418,"end_time":152.479},{"word":"gallery.","start_time":152.519,"end_time":152.68}],"alternatives":[],"language":"en"},{"transcript":" Instead of thumbnails, we can also display indicators.","confidence":0.809875,"words":[{"word":"Instead","start_time":153.443,"end_time":153.644},{"word":"of","start_time":153.664,"end_time":153.704},{"word":"thumbnails,","start_time":153.725,"end_time":154.409},{"word":"we","start_time":154.952,"end_time":155.033},{"word":"can","start_time":155.053,"end_time":155.194},{"word":"also","start_time":155.274,"end_time":155.516},{"word":"display","start_time":155.576,"end_time":155.938},{"word":"indicators.","start_time":155.958,"end_time":156.2}],"alternatives":[],"language":"en"},{"transcript":" Let's add the carousel style property and set it to indicators, and also the carousel location and set it to bottom.","confidence":0.7925714285714287,"words":[{"word":"Let's","start_time":157.161,"end_time":157.322},{"word":"add","start_time":157.382,"end_time":157.482},{"word":"the","start_time":157.522,"end_time":157.602},{"word":"carousel","start_time":157.643,"end_time":158.124},{"word":"style","start_time":158.144,"end_time":158.405},{"word":"property","start_time":158.485,"end_time":159.007},{"word":"and","start_time":159.248,"end_time":159.328},{"word":"set","start_time":159.368,"end_time":159.509},{"word":"it","start_time":159.569,"end_time":159.609},{"word":"to","start_time":159.649,"end_time":159.729},{"word":"indicators,","start_time":159.83,"end_time":160.391},{"word":"and","start_time":160.813,"end_time":160.913},{"word":"also","start_time":160.953,"end_time":161.154},{"word":"the","start_time":161.174,"end_time":161.254},{"word":"carousel","start_time":161.294,"end_time":161.776},{"word":"location","start_time":161.796,"end_time":162.277},{"word":"and","start_time":162.418,"end_time":162.498},{"word":"set","start_time":162.538,"end_time":162.699},{"word":"it","start_time":162.739,"end_time":162.799},{"word":"to","start_time":162.839,"end_time":162.919},{"word":"bottom.","start_time":162.939,"end_time":163.1}],"alternatives":[],"language":"en"},{"transcript":" This turns our thumbnails into circle indicators and puts them at the bottom of the carousel.","confidence":0.813375,"words":[{"word":"This","start_time":163.681,"end_time":163.821},{"word":"turns","start_time":163.842,"end_time":164.063},{"word":"our","start_time":164.143,"end_time":164.243},{"word":"thumbnails","start_time":164.283,"end_time":164.826},{"word":"into","start_time":164.906,"end_time":165.127},{"word":"circle","start_time":165.167,"end_time":165.509},{"word":"indicators","start_time":165.649,"end_time":166.272},{"word":"and","start_time":166.413,"end_time":166.493},{"word":"puts","start_time":166.553,"end_time":166.754},{"word":"them","start_time":166.774,"end_time":166.915},{"word":"at","start_time":166.955,"end_time":167.015},{"word":"the","start_time":167.055,"end_time":167.136},{"word":"bottom","start_time":167.176,"end_time":167.517},{"word":"of","start_time":167.558,"end_time":167.618},{"word":"the","start_time":167.658,"end_time":167.718},{"word":"carousel.","start_time":167.759,"end_time":168.1}],"alternatives":[],"language":"en"},{"transcript":" So now we have a standard image gallery in which we can display any image,","confidence":0.8819333333333333,"words":[{"word":"So","start_time":168.562,"end_time":168.662},{"word":"now","start_time":168.702,"end_time":168.823},{"word":"we","start_time":168.863,"end_time":168.944},{"word":"have","start_time":168.964,"end_time":169.085},{"word":"a","start_time":169.105,"end_time":169.125},{"word":"standard","start_time":169.165,"end_time":169.607},{"word":"image","start_time":169.688,"end_time":169.909},{"word":"gallery","start_time":169.949,"end_time":170.331},{"word":"in","start_time":170.412,"end_time":170.492},{"word":"which","start_time":170.552,"end_time":170.713},{"word":"we","start_time":170.754,"end_time":170.834},{"word":"can","start_time":170.874,"end_time":170.995},{"word":"display","start_time":171.035,"end_time":171.417},{"word":"any","start_time":171.538,"end_time":171.638},{"word":"image,","start_time":171.739,"end_time":171.94}],"alternatives":[],"language":"en"},{"transcript":" video or spin set from our Cloudinary media library.","confidence":0.7371111111111112,"words":[{"word":"video","start_time":172.201,"end_time":172.584},{"word":"or","start_time":172.745,"end_time":172.846},{"word":"spin","start_time":172.886,"end_time":173.188},{"word":"set","start_time":173.208,"end_time":173.41},{"word":"from","start_time":173.43,"end_time":173.591},{"word":"our","start_time":173.672,"end_time":173.812},{"word":"Cloudinary","start_time":173.893,"end_time":174.417},{"word":"media","start_time":174.457,"end_time":174.719},{"word":"library.","start_time":174.739,"end_time":174.9}],"alternatives":[],"language":"en"},{"transcript":" Alright, so let's do a quick recap.","confidence":0.5914285714285714,"words":[{"word":"Alright,","start_time":175.482,"end_time":175.726},{"word":"so","start_time":175.746,"end_time":175.868},{"word":"let's","start_time":175.888,"end_time":176.03},{"word":"do","start_time":176.05,"end_time":176.172},{"word":"a","start_time":176.213,"end_time":176.274},{"word":"quick","start_time":176.314,"end_time":176.497},{"word":"recap.","start_time":176.537,"end_time":176.679}],"alternatives":[],"language":"en"},{"transcript":" To bring the product gallery widget code into our project,","confidence":0.8200000000000001,"words":[{"word":"To","start_time":177.302,"end_time":177.383},{"word":"bring","start_time":177.423,"end_time":177.584},{"word":"the","start_time":177.624,"end_time":177.685},{"word":"product","start_time":177.725,"end_time":178.027},{"word":"gallery","start_time":178.047,"end_time":178.39},{"word":"widget","start_time":178.43,"end_time":178.752},{"word":"code","start_time":178.813,"end_time":179.074},{"word":"into","start_time":179.215,"end_time":179.417},{"word":"our","start_time":179.497,"end_time":179.598},{"word":"project,","start_time":179.638,"end_time":179.9}],"alternatives":[],"language":"en"},{"transcript":" we need to add its script link into the index.html file.","confidence":0.7707272727272726,"words":[{"word":"we","start_time":180.381,"end_time":180.482},{"word":"need","start_time":180.502,"end_time":180.683},{"word":"to","start_time":180.703,"end_time":180.784},{"word":"add","start_time":180.985,"end_time":181.165},{"word":"its","start_time":181.266,"end_time":181.387},{"word":"script","start_time":181.447,"end_time":181.809},{"word":"link","start_time":181.889,"end_time":182.13},{"word":"into","start_time":182.532,"end_time":182.734},{"word":"the","start_time":182.774,"end_time":182.854},{"word":"index.html","start_time":182.955,"end_time":183.417},{"word":"file.","start_time":183.538,"end_time":183.698}],"alternatives":[],"language":"en"},{"transcript":" Then we use the useEffect to ensure that we have access to the window object.","confidence":0.8161333333333334,"words":[{"word":"Then","start_time":184.522,"end_time":184.663},{"word":"we","start_time":184.703,"end_time":184.823},{"word":"use","start_time":184.904,"end_time":185.045},{"word":"the","start_time":185.065,"end_time":185.145},{"word":"useEffect","start_time":185.266,"end_time":185.789},{"word":"to","start_time":185.869,"end_time":185.97},{"word":"ensure","start_time":186.01,"end_time":186.312},{"word":"that","start_time":186.352,"end_time":186.472},{"word":"we","start_time":186.493,"end_time":186.613},{"word":"have","start_time":186.633,"end_time":186.754},{"word":"access","start_time":186.814,"end_time":187.056},{"word":"to","start_time":187.096,"end_time":187.196},{"word":"the","start_time":187.217,"end_time":187.297},{"word":"window","start_time":187.337,"end_time":187.679},{"word":"object.","start_time":187.739,"end_time":187.86}],"alternatives":[],"language":"en"},{"transcript":" And use the window.cloudinary.galleryWidget property to initialize the widget.","confidence":0.7761111111111111,"words":[{"word":"And","start_time":188.542,"end_time":188.642},{"word":"use","start_time":188.843,"end_time":189.024},{"word":"the","start_time":189.064,"end_time":189.164},{"word":"window.cloudinary.galleryWidget","start_time":189.225,"end_time":191.353},{"word":"property","start_time":191.434,"end_time":191.936},{"word":"to","start_time":191.996,"end_time":192.096},{"word":"initialize","start_time":192.157,"end_time":192.679},{"word":"the","start_time":192.699,"end_time":192.819},{"word":"widget.","start_time":192.839,"end_time":192.96}],"alternatives":[],"language":"en"},{"transcript":" We created a ref that points to the gallery diff element and set the container property of the widget to it.","confidence":0.8125714285714287,"words":[{"word":"We","start_time":193.631,"end_time":193.751},{"word":"created","start_time":193.791,"end_time":194.192},{"word":"a","start_time":194.253,"end_time":194.293},{"word":"ref","start_time":194.373,"end_time":194.634},{"word":"that","start_time":194.875,"end_time":195.015},{"word":"points","start_time":195.095,"end_time":195.356},{"word":"to","start_time":195.376,"end_time":195.496},{"word":"the","start_time":195.537,"end_time":195.597},{"word":"gallery","start_time":195.637,"end_time":196.038},{"word":"diff","start_time":196.078,"end_time":196.259},{"word":"element","start_time":196.419,"end_time":196.801},{"word":"and","start_time":197.383,"end_time":197.503},{"word":"set","start_time":197.543,"end_time":197.704},{"word":"the","start_time":197.724,"end_time":197.824},{"word":"container","start_time":197.864,"end_time":198.265},{"word":"property","start_time":198.305,"end_time":198.767},{"word":"of","start_time":198.988,"end_time":199.068},{"word":"the","start_time":199.108,"end_time":199.188},{"word":"widget","start_time":199.208,"end_time":199.489},{"word":"to","start_time":199.529,"end_time":199.63},{"word":"it.","start_time":199.65,"end_time":199.69}],"alternatives":[],"language":"en"},{"transcript":" We also provided our cloud name value and the media assets library that defined","confidence":0.8367142857142856,"words":[{"word":"We","start_time":200.192,"end_time":200.292},{"word":"also","start_time":200.352,"end_time":200.553},{"word":"provided","start_time":200.593,"end_time":200.915},{"word":"our","start_time":200.975,"end_time":201.076},{"word":"cloud","start_time":201.136,"end_time":201.417},{"word":"name","start_time":201.457,"end_time":201.678},{"word":"value","start_time":201.719,"end_time":202.06},{"word":"and","start_time":202.261,"end_time":202.341},{"word":"the","start_time":202.382,"end_time":202.442},{"word":"media","start_time":202.482,"end_time":202.804},{"word":"assets","start_time":202.904,"end_time":203.266},{"word":"library","start_time":203.346,"end_time":203.768},{"word":"that","start_time":203.808,"end_time":203.949},{"word":"defined","start_time":204.009,"end_time":204.19}],"alternatives":[],"language":"en"},{"transcript":" which images we want in our gallery.","confidence":0.8378571428571429,"words":[{"word":"which","start_time":204.551,"end_time":204.772},{"word":"images","start_time":204.953,"end_time":205.334},{"word":"we","start_time":205.414,"end_time":205.535},{"word":"want","start_time":205.575,"end_time":205.796},{"word":"in","start_time":205.836,"end_time":205.916},{"word":"our","start_time":205.977,"end_time":206.057},{"word":"gallery.","start_time":206.097,"end_time":206.498}],"alternatives":[],"language":"en"},{"transcript":"To render the gallery on our page, we invoke the render","confidence":0.7419999999999999,"words":[{"word":"To","start_time":206.84,"end_time":206.96},{"word":"render","start_time":207.0,"end_time":207.281},{"word":"the","start_time":207.321,"end_time":207.402},{"word":"gallery","start_time":207.442,"end_time":207.843},{"word":"on","start_time":207.924,"end_time":208.004},{"word":"our","start_time":208.064,"end_time":208.185},{"word":"page,","start_time":208.205,"end_time":208.526},{"word":"we","start_time":208.706,"end_time":208.867},{"word":"invoke","start_time":208.927,"end_time":209.329},{"word":"the","start_time":209.409,"end_time":209.469},{"word":"render","start_time":209.489,"end_time":209.61}],"alternatives":[],"language":"en"},{"transcript":" method after the gallery widget method.","confidence":0.8788333333333332,"words":[{"word":"method","start_time":209.951,"end_time":210.292},{"word":"after","start_time":210.473,"end_time":210.714},{"word":"the","start_time":210.754,"end_time":210.854},{"word":"gallery","start_time":210.915,"end_time":211.316},{"word":"widget","start_time":211.356,"end_time":211.677},{"word":"method.","start_time":211.717,"end_time":212.039}],"alternatives":[],"language":"en"},{"transcript":"By adding the carousel style and carousel location properties,","confidence":0.724111111111111,"words":[{"word":"By","start_time":212.36,"end_time":212.48},{"word":"adding","start_time":212.56,"end_time":212.761},{"word":"the","start_time":212.801,"end_time":212.882},{"word":"carousel","start_time":212.922,"end_time":213.404},{"word":"style","start_time":213.424,"end_time":213.725},{"word":"and","start_time":213.865,"end_time":213.986},{"word":"carousel","start_time":214.046,"end_time":214.487},{"word":"location","start_time":214.528,"end_time":214.949},{"word":"properties,","start_time":214.969,"end_time":215.19}],"alternatives":[],"language":"en"},{"transcript":" we change the appearance of our gallery from thumbnails to indicators at the bottom.","confidence":0.8676428571428572,"words":[{"word":"we","start_time":215.771,"end_time":215.911},{"word":"change","start_time":215.972,"end_time":216.373},{"word":"the","start_time":216.394,"end_time":216.474},{"word":"appearance","start_time":216.534,"end_time":217.016},{"word":"of","start_time":217.056,"end_time":217.117},{"word":"our","start_time":217.217,"end_time":217.318},{"word":"gallery","start_time":217.358,"end_time":217.78},{"word":"from","start_time":217.82,"end_time":217.98},{"word":"thumbnails","start_time":218.041,"end_time":218.583},{"word":"to","start_time":218.784,"end_time":218.925},{"word":"indicators","start_time":219.065,"end_time":219.668},{"word":"at","start_time":219.768,"end_time":219.829},{"word":"the","start_time":219.869,"end_time":219.929},{"word":"bottom.","start_time":219.969,"end_time":220.15}],"alternatives":[],"language":"en"}]