Learn how to allow users to bookmark and share images they find in other websites and share them on your site.
Now we move on to the first video of this section: Creating an Image Bookmarking Website. We're going to allow users to bookmark and share images they find in other websites, and share them in our site. For this, we'll need to do a few tasks: define a model to store images and their information, create a form and a view to handle image uploads, build a system for users to be able to post images they find in external websites. First, create a new application inside your bookmark's project directory with this command.
Add images to the installed apps setting in the settings.py file, like this code. Now Django knows that a new application is active. Building the image model. Edit the models.py file of the images application, and add these selected code to it. This is the model we're going to use to store images bookmarked from different sites. Let's take a look of the fields of this model. User, the user object that bookmarked this image. This is a foreign key field because it specifies a one-to-many relationship.
A user can post multiple images, but each image is posted by a single user. Title, a title for the image. Slug, a short label containing only letters, numbers, underscores, or hyphens to be used for building beautiful SEO friendly URLs. URL, the original URL for the image. Image, the image file. Description, an optional description for the image. Created, the date-time that indicates when the object has been created in the database.
Since we use auto_now_add, this date-time is automatically set, when the object's created. We use db_index=equal to True, so that Django creates an index in the database for this field. Database indexes improve query performance. Consider setting db_index=True for fields that you frequently query using filter, exclude, or auto-bi. Foreign key fields, or fields with unique is equal to True imply the creation of an index. You can also use method or index_ together to create indexes for multiple fields.
We're going to override the save method of the image model to automatically generate the slug field based on the value of the title field. Import the slugify function and add a save method to the image model by using this code. In this code we use the slugify function provided my Django to automatically generate the image slug, for the given title when no slug is provided. Then we save the object. We'll generate slugs for images automatically so that users don't have to enter a slug for each image.
Creating many-to-many relationships. Now we're going to add another field to the image model to store the users that like an image. We'll need a many-to-many relationship in this case because a user might like multiple images, and each image can be liked by multiple users. Add the selected field to the image model. When you define a many-to-many field, Django creates an intermediate rejoin table using the primary keys of both models. The many-to-many field can be defined in any of the two related models.
As with foreign key fields, the related_name attribute of many-to-many fields, allows us to name this relationship from the related object back to this one. Many-to-many field provide a many-to-many manager that allows us to retrieve related objects such as, image.users_like.all, or from a user object such as, user.images_liked.all. Open the command line, and run this command, to create an initial migration. You should see the output as the same as on the screen.
Now, run this command to apply your migration. You'll get an output that includes this line. The image model is now synced to the database. Registering the image model in the administration site, edit the admin.py file of the images application, and register the image model into the administration site, like this selected code. Start the development server with the command: python manage.py runserver. Open the local host in your browser, and you'll see the image model in the administration site, like this.
Awesome! You've successfully created an image bookmarking website. In the next video, we'll learn about posting content from other websites.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Building a social website
- Sharing content in your website
- Creating an image bookmarking website
- Adding Ajax actions with jQuery
- Tracking user actions
- Using Redis to store item views