Removes the expander due to issues with the mobile device layout and …

…adds options for uid and image_alignment.

src/streamlit_uploads_library/gallery.py

@@ -2,8 +2,10 @@
 from src.streamlit_uploads_library.library import Library
 
 class Gallery(Library):
-    def __init__(self, directory, file_extensions=(".png", ".jpg", ".jpeg"), number_of_columns=5):
-        super(Gallery, self).__init__(directory, file_extensions, number_of_columns)
+    def __init__(self, directory, file_extensions=(".png", ".jpg", ".jpeg"), number_of_columns=5, uid="gallery"):
+        image_alignment = "center"
+        show_details=False
+        super(Gallery, self).__init__(directory, file_extensions, image_alignment, number_of_columns, show_details, uid)
 
     def fetch_files(self):
         return super().fetch_files()

src/streamlit_uploads_library/library.py

@@ -27,12 +27,13 @@ class Library():
         number_of_columns (int): An int() defining the number of required columns, default is 5.
         show_details (bool): A bool() to show or hide the file and edit details, False hides them, default is True to show them.
     """
-    def __init__(self, directory, expanded_details=True, file_extensions=(".png", ".jpg", ".jpeg"), number_of_columns=5, show_details=True):
+    def __init__(self, directory, file_extensions=(".png", ".jpg", ".jpeg"), image_alignment="end", number_of_columns=5, show_details=True, uid="library"):
         self.directory = Path(directory).resolve()
-        self.expanded_details = expanded_details
         self.file_extensions = file_extensions
+        self.image_alignment = image_alignment
         self.number_of_columns = number_of_columns
         self.show_details = show_details
+        self.uid = uid
         self.library = self.create_library(self.number_of_columns, self.show_details)
 
     def fetch_files(self):
@@ -100,48 +101,40 @@ def create_library(_self, number_of_columns, show_details):
             # and rows (st.expander) for details and buttons to keep them in the correct columns.
             for idx in range(_self.num_of_rows_req):
                 with _self.library_rows[_self.library_rows_idx]:
-                    _self.imgs_row = st.container()
-                    if show_details == True:
-                        _self.details_row = st.expander(label="Details", expanded=_self.expanded_details)
-                with _self.imgs_row:
                     _self.imgs_columns = list(st.columns(number_of_columns))
-                if show_details == True:
-                    with _self.details_row:
-                        _self.details_columns = list(st.columns(number_of_columns))
                 # Since we are keeping track of the column and filename indexes we can use 
                 # those to slice the `library_files` list at the correct points for each row 
                 # and then increase or reset the indexes as required.
                 for img in _self.library_files[_self.filename_idx:(_self.filename_idx + number_of_columns)]:
                     with _self.imgs_columns[_self.col_idx]:
                         st.image(img, use_column_width="auto")
                         st.write(
-                                """<style>
-                                [data-testid="stHorizontalBlock"] {
-                                    align-items: center;
-                                }
+                                f"""<style>
+                                [data-testid="stHorizontalBlock"] {{
+                                    align-items: {_self.image_alignment};
+                                }}
                                 </style>
                                 """,
                                 unsafe_allow_html=True
                             )
-                    if show_details == True:
-                        with _self.details_columns[_self.col_idx]:
-                            # with st.expander(label="Details", expanded=_self.expanded_details):
-                                with st.form(key=f"details_form_{_self.filename_idx}"):
-                                    try:
-                                        img_meta = get_image_size.get_image_metadata(img)
-                                        img_path = Path(img).resolve()
-                                        new_name = st.text_input(label="Name:", key=f"{img_path.stem}_name_{_self.filename_idx}", value=f"{img_path.stem}")
-                                        st.text_input(label="Type:", key=f"{img_path.stem}_type_{_self.filename_idx}", value=f"{img_path.suffix.strip('.').upper()}", disabled=True)
-                                        details_col1, details_col2 = st.columns(2)
-                                        del_check = st.checkbox(label="Delete file ?", help="Permanently delete a file from the library.")
-                                        if st.form_submit_button(label="Update", type="primary", use_container_width=True):
-                                            _self.update_file(img_path, new_name, del_check)
-                                        with details_col1:
-                                            st.text_input(label="Width:", key=f"{img_path.stem}_width_{_self.filename_idx}", value=f"{img_meta.width}", disabled=True)
-                                        with details_col2:
-                                            st.text_input(label="Height:", key=f"{img_path.stem}_height_{_self.filename_idx}", value=f"{img_meta.height}", disabled=True)
-                                    except get_image_size.UnknownImageFormat:
-                                        width, height = -1, -1
+                        if show_details == True:
+                            try:
+                                img_meta = get_image_size.get_image_metadata(img)
+                                img_path = Path(img).resolve()
+                                new_name = st.text_input(label="Name:", key=f"{img_path.stem}_{_self.uid}_name_{_self.filename_idx}", value=f"{img_path.stem}")
+                                st.text_input(label="Type:", key=f"{img_path.stem}_{_self.uid}_type_{_self.filename_idx}", value=f"{img_path.suffix.strip('.').upper()}", disabled=True)
+                                details_col1, details_col2 = st.columns(2)
+                                del_check = st.checkbox(label="Delete ?", key=f"{img_path.stem}_{_self.uid}_del_check_{_self.filename_idx}", help="Permanently delete a file from the library.")
+                                if del_check:
+                                    st.button(label="Delete", key=f"{img_path.stem}_{_self.uid}_delete_button_{_self.filename_idx}", type="secondary", use_container_width=True, on_click=_self.update_file, args=(img_path, new_name, del_check))
+                                else:
+                                    st.button(label="Update", key=f"{img_path.stem}_{_self.uid}_submit_button_{_self.filename_idx}", type="primary", use_container_width=True, on_click=_self.update_file, args=(img_path, new_name, del_check))
+                                with details_col1:
+                                    st.text_input(label="Width:", key=f"{img_path.stem}_{_self.uid}_width_{_self.filename_idx}", value=f"{img_meta.width}", disabled=True)
+                                with details_col2:
+                                    st.text_input(label="Height:", key=f"{img_path.stem}_{_self.uid}_height_{_self.filename_idx}", value=f"{img_meta.height}", disabled=True)
+                            except get_image_size.UnknownImageFormat:
+                                width, height = -1, -1
                     # Keeps track of the current column, if we reach the `max_idx` we reset it 
                     # to 0 and increase the row index. This combined with the slicing should 
                     # ensure all images, details and buttons are in the correct columns.