CODEWITHSUNDEEP
pythondjango
Jay P.
Jay P.

Reputation: 2590

How to apply a responsive size to an image in Django imagekit

I'm using Django-imagekit to cut down image file sizes in my website since their current sizes are around hundreds.

Django-imagekit provides several ways, but I can't use the way done in Django models because I already have about a thousand of images. They need me to upload images to get converted images with smaller sizes.

So, using the thumbnail template tag seems the only way for me right now. However, I'm confused about setting responsive sizes of images in the template tags.

{% thumbnail "100x160" pic.photo %}

Like you see the above code, it requires me to put some specific size as a string format, and this forcibly cuts my images to make them fit into the size. How can I set a flexible size in the template tag?

Upvotes: 0

Views: 811

Answers (1)

Akash D
Akash D

Reputation: 789

You can achieve this by using jquery and bootstrap.

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script type="text/javascript">
  $(document).ready(function() { // check whether your page is loadded fully
    $("img").each(function() {   // for each img it will assign img-responsive class or img-fluid 
        $(this).addClass("img-responsive")
    })
  })
</script>

Upvotes: 1

Related Questions