28. AirBnB Clone LiveView part 3

Setting up Image Schema and Migration for Phoenix LiveView

In this video, I'll show you how to add images to your AirBnB clone built with Phoenix LiveView. We'll create a database table for apartment images and associate them with existing apartments. I'll guide you through setting up the schema, migration, and relationships to properly structure your data.

defmodule MyBnB.Repo.Migrations.CreateApartmentImages do
  use Ecto.Migration

  def change do
    create table(:apartment_images) do
      add :apartment_id, references(:apartments, on_delete: :delete_all)
      add :path, :string, null: false
      add :position, :integer, default: 0, null: false

      timestamps(type: :utc_datetime)
    end

    create index(:apartment_images, [:apartment_id])
    create unique_index(:apartment_images, [:apartment_id, :position])
  end
end

Setting up Schema Associations between Apartments and Images

For a robust image solution, we need to establish proper schema associations. I'll show you how to set up a has_one relationship for the primary apartment image while still allowing multiple images per apartment for future expansion. This approach gives you flexibility while keeping the code clean when displaying the primary image on the listing page.

# In apartment.ex
schema "apartments" do
  field :name, :string
  field :city, :string
  field :amount, :integer

  has_one :image, MyBnB.Apartments.Image, where: [position: 0]

  timestamps(type: :utc_datetime)
end

# In image.ex
schema "apartment_images" do
  field :path, :string
  field :position, :integer

  belongs_to :apartment, MyBnB.Apartments.Apartment

  timestamps(type: :utc_datetime)
end

Preloading and Displaying Apartment Images in LiveView Templates

The final piece of the puzzle is preloading and displaying your apartment images in the LiveView template. I'll show you how to create a dedicated preload function, modify your LiveView mount function, and update the template to display the correct image for each apartment with a fallback for missing images.

# In the LiveView module
def mount(_params, _session, socket) do
  apartments = Apartments.list_apartments() |> Apartments.with_image()

  {:ok,
   socket
   |> stream(:apartments, apartments)}
end

# In the template
<img
  :if={apartment.image}
  class="rounded-lg shadow object-cover h-56"
  src={apartment.image.path}
  alt=""
/>
<img
  :if={is_nil(apartment.image)}
  class="rounded-lg shadow object-cover h-56"
  src="https://lsk-public.b-cdn.net/_image_2_.png"
  alt=""
/>

What you will learn:

• How to create and configure an image schema with proper database constraints
• Setting up apartment-image associations with a has_one/belongs_to relationship
• Implementing a position system for managing multiple images per apartment
• Efficiently preloading images with a dedicated function
• Exposing the uploads directory to make images accessible to the browser
• Organizing image storage with a proper folder structure