What is the best way to determine the dimensions of thumbnails for photos stored on external servers?

I am currently working on an auction platform using Python/Django. Users have the ability to input URL's for their product images from external sites like Photobucket.

My approach involves linking to the external product image when showcasing a specific auction. However, for a list of auctions (such as a search results page), I need to display thumbnails.

I have identified two potential solutions:

  1. Utilize the externally hosted images as thumbnails by specifying a standardized small size to convert them into thumbnails. How can I accomplish this? Should I define the thumbnail size in the CSS or elsewhere? What size would be ideal? I would greatly appreciate any code examples as I am not very familiar with CSS or HTML.

  2. Alternatively, when a user submits a URL to an external image, I could download the image to my server and create a thumbnail. Are there any Python/Django tools available for downloading the remote image and generating a thumbnail?

Any general advice is welcomed. I am inclined towards option (1) due to limited resources on my VPS. Any reasons why this might not be a good approach?

Thank you.

htmlcssdjangoimagethumbnails

Answer №1

Both options are viable.

  1. Opting for the first choice may result in fetching very large images that need to be resized by the css/html. This could lead to slow loading times (due to excessive bandwidth usage) and potentially unattractive image resizing (depending on the browser).
  2. Taking the initiative to resize images yourself can be a beneficial approach. It allows for consistent thumbnails and quicker loading speeds. Utilizing caching can ensure that the resized thumbnails are not recalculated every time.

If you explore a bit online, you may discover an image resizing tool available as a REST service. This means you wouldn't need to develop it yourself (even though it's simple) - you could simply append the URL to a resizing service's link and be done with it.

** Update **

Some quick research led to the discovery of these resources:

Answer №2

I recall seeing something quite similar not too long ago. It was a feature that allowed you to link a Django model field to an external image URL and generate thumbnails, as well as upload the image files if needed. I wish I could remember where I saw it.

Wait a minute! It might have been sorl-thumbnail. They provided an example like this:

{% thumbnail "http://www.aino.se/media/i/logo.png" "40x40" crop="80% top" as im %}
    <img src="{{ im.url }}">
{% endthumbnail %}

If you can substitute a direct link with a URL field (instead of an ImageField) from your model (e.g., lot.remoteimageurl), then I believe that's the solution you're looking for.

sorl-thumbnail takes care of creating and caching thumbnails for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to download and install django-extensions along with its dependencies without relying on an internet connection?

I am interested in installing django-extensions and its dependencies, specifically six, without connecting to the internet. I have the tarballs for both django-extensions and six, allowing me to perform an offline installation. However, my logs show that p ...

pythondjangosetup.pydjango-extensions

My intention is to personalize the react-select component to suit my needs

My task involves changing the size of the arrow to be smaller and positioning it under the circle. Despite setting the width and height in the CSS, the desired effect is not achieved. To align with the UI requirements, I need to adjust the swiper-button- ...

htmlcssreactjs

Unexpected behavior from Django's request.POST.items() function

When I receive an ajax request, and print the post data like this: print("post_data %s" % request.POST) I see the following output: post_data <QueryDict: {'csrfmiddlewaretoken': ['...'], 'contact_method 1[]': [&a ...

django

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

javascripthtmlcss

Is there a way to eliminate the whitespace beneath the "Brilliant" division?

[Screenshot of white space under div] [1]: https://i.sstatic.net/cO7TV.jpg I'm having trouble figuring out why there is visible white space here. As a coding beginner, I would really appreciate any assistance. I've tried searching for the soluti ...

htmlcssbootstrap-4removing-whitespace

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Is there a way to combine a smaller image with a larger background image on one canvas while allowing the smaller image to move around? I'll need to save the original background pixel data so that each frame can be redrawn with the overlay in its upda ...

javascriptgraphicshtmlcanvaspixel

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

css

Navigate to the subsequent frame once the HTML5 video finishes playing

I have created a basic HTML webpage with a fullscreen background video (not set to loop) using the Vide plugin. Everything is working well, but I want the video to pause on the last frame to showcase a logo I have included at the end. This functionality w ...

javascriptjqueryhtmlvideosafari

Updating Django objects with htmx and SingleObjectMixin to boost website interactivity

Exploring htmx for the first time has been quite the learning experience for me. I recently transformed each cell in a table into a grade object with links to an UpdateView, but now I'm attempting to allow users to directly modify the object's sc ...

djangohtmx

Is there a way in JavaScript to launch a link in a new tab and overlay a div on top of the existing content of the page?

Is there any method in JavaScript to open a link in a new tab and add a div element on that page? Let's say I have a page called page1.html which has a div containing a link and two radio buttons "yes" and "no". I want to open the link in a separate t ...

javascripthtmljqueryhyperlink

The navigation bar is not extending to fill the entire width of the screen

I recently created a navigation bar using the nav tag and applied CSS to set the width, border, and padding. However, I noticed that there are some empty pixels on each side of the navigation bar that I can't seem to fill up. Here is the HTML code for ...

htmlcss

Incorporating search suggestions into a div with vue 3 and boostrap: a step-by

I am currently experimenting with building a compact search box that offers suggestions using the vue 3 boostrap library. I am aiming to have the suggestions box float on top of the following div without pushing it down. Despite trying to manipulate the z- ...

cssvuejs3bootstrap-5bootstrap-vue

various designs for multi-location infrastructure in angular js

Our angular app is designed with a multi-site architecture, where the base URL of each domain varies. Each site requires a unique header and footer to be incorporated, along with custom CSS and links specific to that site. Is there a way to dynamically in ...

cssangularjstemplates

What format should my URL adopt when fetching users through a token?

I'm currently utilizing Django Rest Framework to implement token authentication for a mobile app designed for a school. When a student logs in, the app dispatches a token to my Django backend, which then consolidates information from its database and ...

djangodjango-rest-framework

The Python Django website is not displaying properly on Ubuntu as it does on Windows

Encountering an issue without knowing its origin is a common problem in web development. I have the same website running on Django 3.0.8 in two different environments - one on a Windows 10 PC and the other on an old Xubuntu 20.04 PC: Despite having identi ...

pythondjangoubuntufont-awesomebootstrap-5

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

htmlcss

How to align multiple span elements vertically using HTML and CSS

<div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Statistics</span> <span class="my-orders-numbers">27</span> </div> <div class="col col-50 histroy ...

htmlcss

What could be causing my Bootstrap accordion to malfunction?

Currently, I am in the process of constructing a website using Bootstrap 4. I have incorporated 3 individual <div> elements, each containing an accordion. These <div> sections are assigned their own unique id to facilitate the showing and hidin ...

javascripthtmlbootstrap-4accordion

"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears. What I'm looking to do is make the image rotate 360° when it changes from ...

javascriptcssimageeventsrotation

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

I am currently working with Material UI and React Grid from DevExtreme to build a table that includes an input field of type date. However, when I attempt to enter the date, it does not register the change in value until I reach the year field, at which po ...

javascripthtmlreactjsmaterial-ui