In my Django app, I have utilized Cloudinary for image delivery.
Within the template, the images are displayed with fixed width and height as shown below:
<a href="/photo/{{ photo.id }}/">
{% cloudinary photo.filename width=100 height=100 crop="fill" %}
</a>
Now, I am looking to implement buttons for dynamically increasing and decreasing the size of the photos after the page has loaded.
I plan to have an array of width/height values such as 100, 125, 150, 175, 200, 225, 250, 300, or simply add/subtract 25 from the base width of 100. These changes would be applied by clicking on the "+" and "-" buttons respectively.
The goal is to update the photo sizes without reloading the page, only making an ajax call to Cloudinary to retrieve resized photos. Additionally, Isotope.js will be used to adjust the layout of the grid containing the photos.
This process involves not just updating the width/height values of the rendered photos, but fetching newly sized photos from Cloudinary.
To achieve this, the script below can be used to fetch and render a photo from Cloudinary with customizable width and height:
$.cloudinary.image(data.result.public_id,{
format: data.result.format,
width: 100,
height: 100,
crop: "fill"})
The idea is to loop through the rendered photo elements and replace the existing photos with new ones using the above script.
However, I am currently exploring different approaches to accomplish this.