From baa48e4174158b6876906bab8dacbdb401147653 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Thu, 5 Mar 2026 21:32:10 +0100 Subject: [PATCH 1/4] feat: show platinum sponsor logo smaller, add calls to add your logo and add a text --- .../Listing/variations/SponsorCardListing.jsx | 18 +++++-- .../FooterSponsors/FooterSponsors.jsx | 50 +++++++++++++++++-- .../components/FooterSponsors/YourLogo.svg | 3 ++ frontend/src/components/cards/SponsorCard.jsx | 6 ++- frontend/theme/extras/custom.overrides | 1 - .../site/components/footer_sponsors.less | 6 --- .../extras/site/components/layout/footer.less | 16 ++++++ frontend/theme/globals/site.variables | 3 ++ 8 files changed, 86 insertions(+), 17 deletions(-) create mode 100644 frontend/src/components/FooterSponsors/YourLogo.svg delete mode 100644 frontend/theme/extras/site/components/footer_sponsors.less diff --git a/frontend/src/components/Blocks/Listing/variations/SponsorCardListing.jsx b/frontend/src/components/Blocks/Listing/variations/SponsorCardListing.jsx index 1de39d85..386148c0 100644 --- a/frontend/src/components/Blocks/Listing/variations/SponsorCardListing.jsx +++ b/frontend/src/components/Blocks/Listing/variations/SponsorCardListing.jsx @@ -9,12 +9,20 @@ import { } from '@package/components'; const SponsorCardListing = (props) => { - const { items, isEditMode, cols = 3, linkToPage = false } = props; + const { + items, + isEditMode, + cols = 3, + linkToPage = false, + randomize = true, + } = props; - const randomized_items = items - .map((value) => ({ value, sort: Math.random() })) - .sort((a, b) => a.sort - b.sort) - .map(({ value }) => value); + const randomized_items = randomize + ? items + .map((value) => ({ value, sort: Math.random() })) + .sort((a, b) => a.sort - b.sort) + .map(({ value }) => value) + : items; return ( diff --git a/frontend/src/components/FooterSponsors/FooterSponsors.jsx b/frontend/src/components/FooterSponsors/FooterSponsors.jsx index 515ed960..0c9833df 100644 --- a/frontend/src/components/FooterSponsors/FooterSponsors.jsx +++ b/frontend/src/components/FooterSponsors/FooterSponsors.jsx @@ -6,6 +6,8 @@ import { Button } from '@package/components'; import { flattenToAppURL } from '@plone/volto/helpers'; import { UniversalLink } from '@plone/volto/components'; +import yourLogoHereSVG from './YourLogo.svg'; + const FooterSponsors = (props) => { const { type = 'platinum' } = props; const subrequest_key = `${type}_sponsors`; @@ -31,13 +33,41 @@ const FooterSponsors = (props) => { ); }, [dispatch, subrequest_key, type]); - const plural = sponsors?.items.length > 1 ? 's' : ''; + const plural = sponsors?.items.length > 1 ? 's' : '(s)'; const capitalizedType = String(type[0]).toUpperCase() + String(type).slice(1); + const sponsorItems = sponsors?.loaded + ? sponsors.items.length > 0 && + sponsors.items.map((item) => { + item['size'] = 'thumb'; + return item; + }) + : []; + + const listingSize = 5; + + if (sponsorItems.length > 0) { + const remainder = sponsorItems.length % listingSize; + if (remainder > 0) { + const placeholdersToAdd = listingSize - remainder; + for (let i = 0; i < placeholdersToAdd; i++) { + sponsorItems.push({ + '@id': '/foundation/sponsorship', + title: 'Put your logo here', + size: 'thumb', + isPlaceholder: true, + image: { + scales: { thumb: { download: yourLogoHereSVG } }, + }, + }); + } + } + } + return sponsors?.loaded ? sponsors.items.length > 0 && (
-

{`Our proud ${capitalizedType} Sponsor${plural}`}

+

Powering the Future of Open Sovereignty

- +

+ Plone thrives because of organizations that believe in secure, + independent, and open technology. We are deeply grateful to our + Platinum Sponsors for their visionary support in sustaining the + world's most secure CMS. Join them in shaping the future of digital + freedom. +

+ +
) : ''; diff --git a/frontend/src/components/FooterSponsors/YourLogo.svg b/frontend/src/components/FooterSponsors/YourLogo.svg new file mode 100644 index 00000000..522b349d --- /dev/null +++ b/frontend/src/components/FooterSponsors/YourLogo.svg @@ -0,0 +1,3 @@ + + YOUR LOGO HERE + \ No newline at end of file diff --git a/frontend/src/components/cards/SponsorCard.jsx b/frontend/src/components/cards/SponsorCard.jsx index 79eb8505..81c3196c 100644 --- a/frontend/src/components/cards/SponsorCard.jsx +++ b/frontend/src/components/cards/SponsorCard.jsx @@ -6,7 +6,11 @@ import { UniversalLink } from '@plone/volto/components'; import { ListingImage } from '@package/components'; const SponsorCard = (props) => { - let image = ListingImage({ item: props, className: 'item-image' }); + let image = ListingImage({ + item: props, + className: 'item-image', + size: props?.size, + }); let cardClass = cx('item', { 'sponsor-card': true, diff --git a/frontend/theme/extras/custom.overrides b/frontend/theme/extras/custom.overrides index b0769fea..1b9a64c7 100644 --- a/frontend/theme/extras/custom.overrides +++ b/frontend/theme/extras/custom.overrides @@ -59,6 +59,5 @@ @import 'site/components/widgets/image_widget.less'; @import 'site/components/controlpanels/membership.less'; -@import 'site/components/footer_sponsors.less'; @import 'site/print.less'; diff --git a/frontend/theme/extras/site/components/footer_sponsors.less b/frontend/theme/extras/site/components/footer_sponsors.less deleted file mode 100644 index 7c0e4dbb..00000000 --- a/frontend/theme/extras/site/components/footer_sponsors.less +++ /dev/null @@ -1,6 +0,0 @@ -.footer-sponsors-listing-headline { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; -} diff --git a/frontend/theme/extras/site/components/layout/footer.less b/frontend/theme/extras/site/components/layout/footer.less index 22e5a0c9..26f1bc5f 100644 --- a/frontend/theme/extras/site/components/layout/footer.less +++ b/frontend/theme/extras/site/components/layout/footer.less @@ -3,6 +3,7 @@ margin: 1rem 0 0 0; box-shadow: 0px 5px 7px 5px rgba(119, 119, 119, 0.1); font-family: @headerFontName; + background-color: @footerLightGrey; #footer-main { display: flex; @@ -66,6 +67,21 @@ } } + .footer-sponsors-listing { + padding-bottom: 2em; + + .footer-sponsors-listing-headline { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + } + + .item { + background-color: transparent; + } + } + #footer-small-wrapper { padding: 1.5rem; margin-top: 1.5rem; diff --git a/frontend/theme/globals/site.variables b/frontend/theme/globals/site.variables index e8831fb7..d0a54b56 100644 --- a/frontend/theme/globals/site.variables +++ b/frontend/theme/globals/site.variables @@ -118,6 +118,9 @@ /*--- --------------------------------Plone.org Variables-------------------------------- ---*/ /*--- -------------------------------------------------------------------------------- ---*/ +@footerLightGrey: #f7f7f7; + + @footerBordersColor: @lightGrey; @footerColumnsTextColor: #222; @footerLastColumnTextColor: #737373; From bde1526ba5126511bc337e24a5a1b12326e7dd85 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Thu, 5 Mar 2026 21:35:56 +0100 Subject: [PATCH 2/4] lint --- frontend/src/components/FooterSponsors/FooterSponsors.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/components/FooterSponsors/FooterSponsors.jsx b/frontend/src/components/FooterSponsors/FooterSponsors.jsx index 0c9833df..7f02eecc 100644 --- a/frontend/src/components/FooterSponsors/FooterSponsors.jsx +++ b/frontend/src/components/FooterSponsors/FooterSponsors.jsx @@ -33,8 +33,6 @@ const FooterSponsors = (props) => { ); }, [dispatch, subrequest_key, type]); - const plural = sponsors?.items.length > 1 ? 's' : '(s)'; - const capitalizedType = String(type[0]).toUpperCase() + String(type).slice(1); const sponsorItems = sponsors?.loaded ? sponsors.items.length > 0 && sponsors.items.map((item) => { From 62367da3f238761c86431af42e0a37dc3ca73892 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Thu, 5 Mar 2026 21:36:01 +0100 Subject: [PATCH 3/4] formatting --- frontend/theme/extras/site/components/layout/footer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/theme/extras/site/components/layout/footer.less b/frontend/theme/extras/site/components/layout/footer.less index 26f1bc5f..e6399702 100644 --- a/frontend/theme/extras/site/components/layout/footer.less +++ b/frontend/theme/extras/site/components/layout/footer.less @@ -1,9 +1,9 @@ #footer { padding: 2rem 0 0 0; margin: 1rem 0 0 0; + background-color: @footerLightGrey; box-shadow: 0px 5px 7px 5px rgba(119, 119, 119, 0.1); font-family: @headerFontName; - background-color: @footerLightGrey; #footer-main { display: flex; From 8c09271bf24624591128b86c793a8900b20c2360 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Sat, 7 Mar 2026 15:17:27 +0100 Subject: [PATCH 4/4] use a single logo with dashed border --- .../FooterSponsors/FooterSponsors.jsx | 4 +-- .../components/FooterSponsors/YourLogov2.svg | 28 +++++++++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/FooterSponsors/YourLogov2.svg diff --git a/frontend/src/components/FooterSponsors/FooterSponsors.jsx b/frontend/src/components/FooterSponsors/FooterSponsors.jsx index 7f02eecc..1f7669a4 100644 --- a/frontend/src/components/FooterSponsors/FooterSponsors.jsx +++ b/frontend/src/components/FooterSponsors/FooterSponsors.jsx @@ -6,7 +6,7 @@ import { Button } from '@package/components'; import { flattenToAppURL } from '@plone/volto/helpers'; import { UniversalLink } from '@plone/volto/components'; -import yourLogoHereSVG from './YourLogo.svg'; +import yourLogoHereSVG from './YourLogov2.svg'; const FooterSponsors = (props) => { const { type = 'platinum' } = props; @@ -41,7 +41,7 @@ const FooterSponsors = (props) => { }) : []; - const listingSize = 5; + const listingSize = sponsorItems.length + 1; if (sponsorItems.length > 0) { const remainder = sponsorItems.length % listingSize; diff --git a/frontend/src/components/FooterSponsors/YourLogov2.svg b/frontend/src/components/FooterSponsors/YourLogov2.svg new file mode 100644 index 00000000..24c01776 --- /dev/null +++ b/frontend/src/components/FooterSponsors/YourLogov2.svg @@ -0,0 +1,28 @@ + + + + YOUR LOGO HERE + +