Облачный с Django - используйте javascript для динамического увеличения / уменьшения ширины и высоты фотографии после отображения страницы - PullRequest
Новая
       62

Облачный с Django - используйте javascript для динамического увеличения / уменьшения ширины и высоты фотографии после отображения страницы

1 голос
/ 30 января 2020

У меня есть приложение Django, где я использовал Cloudinary для доставки изображений.

Изображения отображаются в шаблоне с фиксированной шириной и высотой следующим образом: 

<a href="/photo/{{ photo.id }}/">
    {% cloudinary photo.filename width=100 height=100 crop="fill" %}
</a>

Я хочу добавить кнопки «+» и «-» для динамического увеличения и уменьшения ширины и высоты фотографии после отображения страницы.

У меня будет массив возможных значений ширины / высоты, например, 100, 125, 150, 175, 200, 225, 250, 300 или просто добавьте 25 к «базовой» ширине 100 и вычтите 25, чтобы уменьшить ширину до 100 (или используйте кнопку «сброса» для сброса значения до 100). Они будут выбраны путем последовательного нажатия кнопок «+» и «-».

В идеале страница не перезагружается, только облачный вызов выполняется с использованием ajax для получения фотографий с измененным размером. Я использую Изотоп. js для отображения фотографий в сетке, которая будет вызываться для повторной настройки макета фотографии на странице.

Это не просто динамическое изменение значений ширины / высоты отображаемых фотографий, но и получение новых размеров. фотографии из облачного хранилища.

Следующий скрипт получит и отобразит фотографию из облачного хранилища и может заменить переменные ширину и высоту: 

$.cloudinary.image(data.result.public_id,{
    format: data.result.format, 
    width: 100, 
    height: 100, 
    crop: "fill"})

Я представляю циклический просмотр элементов отображаемых фотографий для замены существующих фотографий с новыми фотографиями, используя скрипт выше.

Но изо всех сил пытаются придумать подход.

1 Ответ

1 голос
/ 30 января 2020

Если вы хотите получить новый URL, вы можете установить ширину / высоту: 

myWidth = 300
myHight = 300
cloudinary.CloudinaryImage("sample").build_url(
  width = myWidth, height = myHight, crop = 'fill')

Результат будет: http://res.cloudinary.com/demo/image/upload/c_fill, h_300, w_300 / sample

...