Here is my code:

(ns jimmystore.pages.photo-page
  (:require
   [clojure.string :as str]
   [jimmystore.image-utils :as image-utils]
   [re-frame.core     :as rf]
   [reagent.core      :as ra]))


(defn photo-card
  [photo title pic-id]

  [:div {:class "col-md-2-5
                 col-5
                 m-md-2
                 m-3"}
   [:div.card
    [:div {:class "img-container"}
     [:img {:src (image-utils/img-blob->img-src photo)
            :class "card-img-top"
            :data-toggle "modal"
            :data-target (str "#" pic-id)}]]]
   [:div.card-body
    [:h5.card-title.text-center title]]])

(defn photos-element [{:keys [items]} img]
  (let [item-coll (take 16 items)] ; later this can be sorted in different ways, hard limit of 16
    [:div {:class  "container
                   d-flex
                   flex-wrap
                   align-items-center
                   justify-content-center"}
     (map-indexed
      (fn [idx {:keys [id name] :as item}]
        (let [img-data (get img id)]  ; retrieve data stored under the pic-id key
          (when-not img-data          ; then only fetch if img-data is not already present
            (rf/dispatch [:retrieve-item-picture id [:retrieve-picture-success id]]))
          [photo-card img-data name id]))
      item-coll)]))

(defn photo-modal
  [modal-id photo description sizes]
  [:div.modal.fade {:id modal-id
                    :tabindex "-1"
                    :role "dialog"
                    :aria-labelledby (str modal-id "-label")
                    :aria-hidden "true"}
   [:div.modal-dialog.modal-dialog-centered :role "document"
    [:div.modal-content
     [:div.modal-header
      [:h5.modal-title {:id (str modal-id "-label")} "Photo Detail"]
      [:button.close {:type "button" :data-dismiss "modal" :aria-label "Close"}
       [:span {:aria-hidden "true"} "×"]]]
     [:div.modal-body
      [:div.row
       [:div.col-md-8
        [:img {:src (image-utils/img-blob->img-src photo) :alt "Photo" :class "img-fluid"}]]
       [:div.col-md-4
        [:p description]
        (for [size sizes]
          [:button.btn.btn-primary.m-1 {:type "button"} size])]
        ;; Add your proceed to purchase button here, with relevant onclick handler if needed
       [:button.btn.btn-success {:type "button"} "Proceed to Purchase"]]]
     [:div.modal-footer
      [:button.btn.btn-secondary {:type "button" :data-dismiss "modal"} "Close"]]]]])

(defn page []
  #_{:clj-kondo/ignore [:unresolved-symbol]}
  (ra/with-let [_      (rf/dispatch  [:get-items])
                items  (rf/subscribe [:items])
                img    (rf/subscribe [:img])
                dbdb   (rf/subscribe [:dbdb])]
    [:div {:class "container"}
     [:h3 "Select a photo."]
     [photos-element @items @img]
  ;;  [:p (str @img)]
     [photo-modal 1 1 1]]))

(def page-info {:page-id :photo
                :view   #'page})



Here are my events:

(ns jimmystore.events
  (:require
    [re-frame.core :as rf]
    [ajax.core :as ajax]
    [reitit.frontend.easy :as rfe]
    [reitit.frontend.controllers :as rfc]))

;;dispatchers

(rf/reg-event-db
  :common/navigate
  (fn [db [_ match]]
    (let [old-match (:common/route db)
          new-match (assoc match :controllers
                           (rfc/apply-controllers (:controllers old-match) match))]
      (assoc db :common/route new-match))))

(rf/reg-fx :common/navigate-fx!
  (fn [[k & [params query]]]
    (rfe/push-state k params query)))

(rf/reg-event-fx :common/navigate!
  (fn [_ [_ url-key params query]]
    {:common/navigate-fx! [url-key params query]}))

(rf/reg-event-db :set-docs
  (fn [db [_ docs]]
    (assoc db :docs docs)))

(rf/reg-event-fx :fetch-docs
  (fn [_ _]
    {:http-xhrio {:method          :get
                  :uri             "/docs"
                  :response-format (ajax/raw-response-format)
                  :on-success       [:set-docs]}}))

(rf/reg-event-fx :test-get-api
 (fn [_ _]
   {:http-xhrio {:method          :get
                 :uri             "/test-get"
                 :response-format (ajax/json-response-format {:keywords? true})
                 :on-success       [:set-docs]}}))

(rf/reg-event-fx :test-post-api
  (fn [_ _]
    {:http-xhrio {:method          :post
                  :uri             "/test-post"
                  :params          {:test-post {:data 1 :foo :bar 2 "ASDASD"}}
                  :format          (ajax/json-request-format)
                  :response-format (ajax/json-response-format {:keywords? true})
                  :on-success      [:no-op]}}))

(rf/reg-event-fx :get-items
  (fn [_ _]
    {:http-xhrio {:method          :get
                  :uri             "/get-items"
                  :response-format (ajax/json-response-format {:keywords? true})
                  :on-success      [:get-items-success]}}))

(rf/reg-event-db :get-items-success
  (fn [db [_ response]]
    (assoc db :items response)))

(rf/reg-event-db :retrieve-picture-success
  (fn [db [_ id response]]
    (assoc-in db [:img id] response)))

(defn- get-file-size [file]
  (.-size file))

(defn- get-file-name [file]
  (.-name file))

(defn- get-file-type [file]
  (.-type file))

(rf/reg-event-db :set-file-to-upload
 (fn [db [_ file]]                ;; Local url (for previews etc.)
   (assoc db :upload {:object-url (js/window.webkitURL.createObjectURL file)
                      :file       file
                      :size       (get-file-size file)
                      :name       (get-file-name file)
                      :type       (get-file-type file)})))


(rf/reg-sub :upload
 (fn [db _]
   (-> db :upload)))

(rf/reg-event-db :common/set-error
  (fn [db [_ error]]
    (assoc db :common/error error)))

(rf/reg-event-fx :page/init-home
  (fn [_ _]
    {:dispatch [:fetch-docs]}))

(rf/reg-event-db :no-op
 (fn [db  _]
   db))

;; Modal events

(rf/reg-event-db :open-modal
 (fn [db [_ photo-id]]
    (assoc db :modal {:visible? true :photo-id photo-id})))

(rf/reg-event-db :close-modal
 (fn [db _]
   (assoc-in db [:modal :visible?] false)))

;;subscriptions

(rf/reg-sub :common/route
  (fn [db _]
    (-> db :common/route)))

(rf/reg-sub :common/page-id
  :<- [:common/route]
  (fn [route _]
    (-> route :data :name)))

(rf/reg-sub :common/page
  :<- [:common/route]
  (fn [route _]
    (-> route :data :view)))

(rf/reg-sub :docs
  (fn [db _]
    (:docs db)))

(rf/reg-sub :common/error
  (fn [db _]
    (:common/error db)))

(rf/reg-sub :items
  (fn [db _]
    (-> db :items)))

(rf/reg-sub :img
  (fn [db _]
    (-> db :img)))

(rf/reg-sub :modal
 (fn [db _]
   (:modal db)))

(rf/reg-sub :dbdb
  (fn [db _]
    db))

What do I need to do to properly implement my photo modal?