feat: add option to disable cropping of project images

research-software-directory · Aug 30, 2022 · 4b682ea · 4b682ea
1 parent 932b26d
commit 4b682ea
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 28 deletions.
diff --git a/database/004-create-project-table.sql b/database/004-create-project-table.sql
@@ -15,6 +15,7 @@ CREATE TABLE project (
 	description VARCHAR(10000),
 	grant_id VARCHAR(50),
 	image_caption VARCHAR(500),
+	image_contain BOOLEAN DEFAULT FALSE NOT NULL,
 	is_published BOOLEAN DEFAULT FALSE NOT NULL,
 	created_at TIMESTAMPTZ NOT NULL,
 	updated_at TIMESTAMPTZ NOT NULL

diff --git a/database/100-create-api-views.sql b/database/100-create-api-views.sql
@@ -486,6 +486,7 @@ CREATE FUNCTION projects_by_organisation(organisation_id UUID) RETURNS TABLE (
 	date_start DATE,
 	updated_at TIMESTAMPTZ,
 	is_published BOOLEAN,
+	image_contain BOOLEAN,
 	is_featured BOOLEAN,
 	image_id UUID,
 	organisation UUID,
@@ -508,6 +509,7 @@ BEGIN
 		project.date_start,
 		project.updated_at,
 		project.is_published,
+		project.image_contain,
 		project_for_organisation.is_featured,
 		image_for_project.project AS image_id,
 		project_for_organisation.organisation,
@@ -585,6 +587,7 @@ CREATE FUNCTION related_projects_for_project(origin_id UUID) RETURNS TABLE (
 	date_start DATE,
 	updated_at TIMESTAMPTZ,
 	is_published BOOLEAN,
+	image_contain BOOLEAN,
 	status relation_status,
 	image_id UUID
 ) LANGUAGE plpgsql STABLE AS
@@ -605,6 +608,7 @@ BEGIN
 		project.date_start,
 		project.updated_at,
 		project.is_published,
+		project.image_contain,
 		project_for_project.status,
 		image_for_project.project AS image_id
 	FROM
@@ -632,6 +636,7 @@ CREATE FUNCTION related_projects_for_software(software_id UUID) RETURNS TABLE (
 	date_start DATE,
 	updated_at TIMESTAMPTZ,
 	is_published BOOLEAN,
+	image_contain BOOLEAN,
 	status relation_status,
 	image_id UUID
 ) LANGUAGE plpgsql STABLE AS
@@ -652,6 +657,7 @@ BEGIN
 		project.date_start,
 		project.updated_at,
 		project.is_published,
+		project.image_contain,
 		software_for_project.status,
 		image_for_project.project AS image_id
 	FROM
@@ -970,6 +976,7 @@ CREATE FUNCTION projects_by_maintainer(maintainer_id UUID) RETURNS TABLE (
 	date_start DATE,
 	updated_at TIMESTAMPTZ,
 	is_published BOOLEAN,
+	image_contain BOOLEAN,
 	image_id UUID
 ) LANGUAGE plpgsql STABLE AS
 $$
@@ -988,6 +995,7 @@ BEGIN
 		project.date_start,
 		project.updated_at,
 		project.is_published,
+		project.image_contain,
 		image_for_project.project AS image_id
 	FROM
 		project
@@ -1214,6 +1222,7 @@ CREATE FUNCTION project_search() RETURNS TABLE (
 	date_start DATE,
 	updated_at TIMESTAMPTZ,
 	is_published BOOLEAN,
+	image_contain BOOLEAN,
 	image_id UUID,
 	keywords citext[]
 ) LANGUAGE plpgsql STABLE AS
@@ -1233,6 +1242,7 @@ BEGIN
 		project.date_start,
 		project.updated_at,
 		project.is_published,
+		project.image_contain,
 		image_for_project.project AS image_id,
 		keyword_filter_for_project.keywords
 	FROM

diff --git a/frontend/components/projects/ProjectCard.tsx b/frontend/components/projects/ProjectCard.tsx
@@ -11,19 +11,22 @@ import ImageAsBackground from '../layout/ImageAsBackground'
 import {getImageUrl} from '../../utils/getProjects'
 
 export type ProjectCardProps = {
-  slug: string
-  title: string
-  subtitle: string | null
-  image_id: string | null
-  updated_at: string | null
-  current_state: 'Starting' | 'Running' | 'Finished'
-  is_featured?: boolean
-  is_published?: boolean
-  menuSpace?: boolean
+  slug: string,
+  title: string,
+  subtitle: string | null,
+  image_id: string | null,
+  updated_at: string | null,
+  current_state: 'Starting' | 'Running' | 'Finished',
+  is_featured?: boolean,
+  is_published?: boolean,
+  image_contain?: boolean,
+  menuSpace?: boolean,
 }
 
-export default function ProjectCard({slug, title, subtitle, image_id, updated_at, current_state,
-  is_featured, is_published, menuSpace}: ProjectCardProps) {
+export default function ProjectCard(
+  {slug, title, subtitle, image_id, updated_at, current_state,
+  is_featured, is_published, image_contain, menuSpace}: ProjectCardProps
+) {
   // get current date
   const today = new Date()
   // featured has primary bg color
@@ -68,6 +71,8 @@ export default function ProjectCard({slug, title, subtitle, image_id, updated_at
             <ImageAsBackground
               alt={title}
               src={getImageUrl(image_id)}
+              bgSize={image_contain ? 'contain' : 'cover'}
+              bgPosition={image_contain ? 'center' : 'top center'}
               className="flex-1 h-full"
               noImgMsg='no image'
             />

diff --git a/frontend/components/projects/ProjectDescription.tsx b/frontend/components/projects/ProjectDescription.tsx
@@ -9,12 +9,15 @@ import ReactMarkdownWithSettings from '../layout/ReactMarkdownWithSettings'
 
 
 type ProjectInfoProps = {
-  image_id: string | null
-  image_caption: string | null
-  description: string
+  image_id: string | null,
+  image_caption: string | null,
+  image_contain: boolean,
+  description: string,
 }
 
-export default function ProjectDescription({image_id,image_caption,description}:ProjectInfoProps) {
+export default function ProjectDescription(
+  {image_id, image_caption, image_contain, description}: ProjectInfoProps
+) {
   const image = getImageUrl(image_id)
 
   function getImage() {
@@ -23,6 +26,8 @@ export default function ProjectDescription({image_id,image_caption,description}:
         <ImageAsBackground
           src={image}
           alt={image_caption ?? 'image'}
+          bgSize={image_contain ? 'contain' : 'cover'}
+          bgPosition={image_contain ? 'center' : 'top center'}
           className="w-full h-[30rem]"
         />
       )

diff --git a/frontend/components/projects/ProjectInfo.tsx b/frontend/components/projects/ProjectInfo.tsx
@@ -9,26 +9,30 @@ import ProjectDescription from './ProjectDescription'
 import ProjectSidebar from './ProjectSidebar'
 
 type ProjectInfoProps = {
-  date_start: string | null
-  date_end: string | null
-  description: string | null
-  image_id: string | null
-  image_caption: string | null
-  grant_id: string | null
-  links: ProjectLink[]
+  date_start: string | null,
+  date_end: string | null,
+  description: string | null,
+  image_id: string | null,
+  image_caption: string | null,
+  image_contain: boolean,
+  grant_id: string | null,
+  links: ProjectLink[],
   researchDomains: ResearchDomain[],
   keywords: KeywordForProject[],
-  fundingOrganisations: ProjectOrganisationProps[]
+  fundingOrganisations: ProjectOrganisationProps[],
 }
 
 
-export default function ProjectInfo({image_id, image_caption, description, date_start, date_end,
-  grant_id, links, researchDomains, keywords, fundingOrganisations}: ProjectInfoProps) {
+export default function ProjectInfo(
+  {image_id, image_caption, image_contain, description, date_start, date_end,
+  grant_id, links, researchDomains, keywords, fundingOrganisations}: ProjectInfoProps
+) {
   return (
     <section className="px-4 grid gap-8 lg:grid-cols-[3fr,1fr] lg:gap-16">
       <ProjectDescription
         image_id={image_id}
         image_caption={image_caption ?? ''}
+        image_contain={image_contain}
         description={description ?? ''}
       />
       <ProjectSidebar

diff --git a/frontend/components/projects/add/AddProjectCard.tsx b/frontend/components/projects/add/AddProjectCard.tsx
@@ -116,7 +116,7 @@ export default function AddProjectCard() {
     }
     // console.log('AddProjectCard.onSubmit...', data)
     // create data object
-    const project:NewProject = {
+    const project: NewProject = {
       slug: data.slug,
       title: data.project_title,
       is_published: false,
@@ -125,6 +125,7 @@ export default function AddProjectCard() {
       date_start: null,
       date_end: null,
       image_caption: null,
+      image_contain: false,
       grant_id: null
     }
     // add software to database

diff --git a/frontend/components/projects/edit/information/ProjectImage.tsx b/frontend/components/projects/edit/information/ProjectImage.tsx
@@ -9,6 +9,7 @@ import IconButton from '@mui/material/IconButton'
 import {useFormContext} from 'react-hook-form'
 
 import ControlledTextInput from '~/components/form/ControlledTextInput'
+import ControlledSwitch from '~/components/form/ControlledSwitch'
 import ImageAsBackground from '~/components/layout/ImageAsBackground'
 import useSnackbar from '~/components/snackbar/useSnackbar'
 import {EditProject} from '~/types/Project'
@@ -77,18 +78,22 @@ export default function ProjectImage() {
         <ImageAsBackground
           src={imageUrl()}
           alt={formData.image_caption ?? 'image'}
+          bgSize={formData.image_contain ? 'contain' : 'cover'}
+          bgPosition={formData.image_contain ? 'center' : 'top center'}
           className="w-full h-[23rem]"
           noImgMsg="Click to upload image < 2MB"
         />
       </label>
+
       <input
         id="upload-avatar-image"
         type="file"
         accept="image/*"
         onChange={handleFileUpload}
         style={{display:'none'}}
       />
-      <div className="flex">
+
+      <div className="flex pt-4">
         <ControlledTextInput
           name="image_caption"
           defaultValue={formData.image_caption}
@@ -110,6 +115,7 @@ export default function ProjectImage() {
             }
           }}
         />
+
         <div className="flex pl-4">
           <IconButton
             color="primary"
@@ -123,6 +129,14 @@ export default function ProjectImage() {
           </IconButton>
         </div>
       </div>
+
+      <div className="flex pb-3">
+          <ControlledSwitch
+            label='Always show the whole image'
+            name='image_contain'
+            control={control}
+          />
+      </div>
     </div>
   )
 }
diff --git a/frontend/pages/projects/[slug]/index.tsx b/frontend/pages/projects/[slug]/index.tsx
@@ -108,6 +108,7 @@ export default function ProjectPage(props: ProjectPageProps) {
           description={project?.description ?? null}
           image_id={project?.image_id}
           image_caption={project?.image_caption ?? null}
+          image_contain={project?.image_contain ?? false}
           grant_id={project.grant_id}
           fundingOrganisations={organisations.filter(item=>item.role==='funding')}
           researchDomains={researchDomains}

diff --git a/frontend/types/Project.ts b/frontend/types/Project.ts
@@ -15,6 +15,7 @@ export type NewProject = {
   date_start: string | null
   date_end: string | null
   image_caption: string | null
+  image_contain: boolean
   grant_id: string | null
 }
 
@@ -167,5 +168,5 @@ export type SearchTeamMember = SearchContributor
 export const ProjectTableProps = [
   'id', 'slug', 'title', 'subtitle', 'is_published',
   'description', 'date_start', 'date_end', 'image_caption',
-  'grant_id'
+  'image_contain', 'grant_id'
 ]