Portfolio: Images

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.9", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Images

To learn more about one-to-one relationships You’re going to add images to blogs in your portfolio project.

• Images belong to a Blog.
• Blogs can have one image.

Each Image record should have a :blog_id foreign key and a :url field.

classDiagram
  class Image {
    blog_id: :id
    url: :string
  }

Image Requirements

Ensure you:

• Can create an associated image from the blog create page using a form with a text input.
• Display the image on the blog show page using an html tag.

You do not need to handle uploading images, only storing the text URL of an existing image.

Bonus: Update Image

Add the ability to update blog images.

Ensure you:

• Can update an associated image from the blog create page using a form with a text input.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, file_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(progress_path, Jason.encode!(Map.put(existing_progress, file_name, completed)))
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout solutions
$ git checkout -b portfolio-blog-images-exercise
$ git add .
$ git commit -m "finish portfolio blog images exercise"
$ git push origin portfolio-blog-images-exercise

Create a pull request from your portfolio-blog-images-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your instructor by including @BrooklinJazz in your PR description to get feedback. You (or your instructor) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.