Message Cam from Super about Super 3.1, CSS to Fix Syncing and Database views.

Create Optimism Fractal Blog, Videos, and Media Pages/Database

fix the bottom 10 videos

update optimystics and eden fractal sites to super 3.1, then see if i need to do the same there

consider if now is the right time to Create Optimism Fractal Blog, Videos, and Media Pages/Database

Hi Dan - I will work through these today. Cam.

Images in synced blocks are not displaying correctly. It looks like some of the images have a different width set - some are showing page-width and the ones that look ok are showing normal. I recommend adjusting the width and position of the images in Notion to see if that fixes up how super sees the image. Even though these look the same in Notion, the different page width of your Super site will be able to show the differences that would otherwise not be noticed on the Notion page.
I note that you've already tried re-sizing the images - Can you please invite me to this page with edit access so I can inspect the layout inside Notion and see if I can work out what is happening? cam@super.so
Implementing a gallery database is a good way to show this information - it does not rely on synced blocks and it's really easy to create multiple views and filters for different parts of the site. Here is some custom code you can try on the blog gallery.

.notion-collection-gallery.large {
  grid-template-columns: 1fr !important; /* make the gallery one column wide */
}

.notion-collection-card__cover.large, .notion-collection-card__cover.large img {
  height: 400px !important; /* make the images bigger */
}
.notion-collection-card .notion-property__title .notion-property__title__icon-wrapper {
  display: none !important; /* hide the page icon */
}

May 1

Thank you very much for the insightful response and css code for the gallery view.

1. I checked the notion page for OptimismFractal.com/media and Optimystics.io/videos and they both have the "Full Width" option turned off. I believe that both sites are using the same exact CSS code from a template I purchased last year, so I think the page with would be set to be the same in Super as well. Please let me know if there's anything else I should check here.

2. Yes I just gave you access to the pages for both OptimismFractal.com/media and Optimystics.io/videos. The notion links for these are provided in my previous messages.

3. Great, I agree with the benefits of gallery databases. I just tried adding it to the Blog page and it's starting to work but I have a few questions/issues:

a. The pictures are much less wide than the text, which looks rather awkward, as you can see in the picture below. I tried increasing the height to about 900px in the code that you provided and this makes the width about the same as the text below as I want, but if the window size is smaller or I'm on mobile then this adds a lot of black space between the picture and the text (also shown below). Is it possible to add some other property such as width or a ratio to make sure that the pictures will be the same width as the text on any screen size?

Here's how it looks on mobile with a 1000px height

b. I'd also like to be able to display two blog posts on one row in some pages, rather than just one. I tried changing the part of the code for "grid-template-columns: 1fr " to '2fr' or just '2' as it seems like this is how I can enable two gallery items on each row rather than one, but it's not changing anything. How can I display two gallery pages on a line instead of just one?

c. Is there CSS code that can be added to frame each gallery page with a box around the image and the text? I'd love to display some of the gallery items in this way to provide a more structured view, similar to how Ethereum.org does this in the following picture

Hi Cam, I have a few questions and would greatly appreciate your help:

When I upgraded to Super 3.1, many of my synced blocks with images stopped displaying correctly. For example, prior to Super 3.1 I had many pictures of youtube thumbnails featuring shows on my videos page and they looked great with full sized pictures and the text well positioned beneath it. I synced this across multiple locations throughout a couple sites on Super and it looked great in all places. You can see how one of these synced blocks looked below before Super 3.1 and the next picture after to see how it looks after updating to Super 3.1. These pictures are both live at Optimystics.io/videos, which you can see at https://www.notion.so/edencreators/Optimystics-Videos-4aa0cc0fe82f46fd8fb6a8548b7a5732?pvs=4.

Do you know why Super is doing this to synced blocks and how to fix it?

An example of a well spaced picture and text before Super 3.1 is below. For some reason there are some synced blocks that still are sized perfectly like this and I’m not sure why… I suspect that it may have something to do with where the pictures are synced but I don’t know why that would make a difference or if there is some other issue taking place.

Mis-sized pictures after Super 3.1 are shown below. It displays different depending on the monitor or screen size and I don’t understand why it positions some synced blocks differently than others. I also experienced a similar issue with synced pictures many months ago but it haven’t experienced it in a long time and I’m not sure if Super 3.1 reintroduced a similar kind of issue again.

I tried un-syncing some of the blocks since that is what fixed a similar issue I experienced many months ago. However after un-syncing, the pictures and text are not properly aligned like in the first photo shown above. I also tried resized the pictures to make it look like the first picture and haven’t been able to make it look right yet. You can see this at OptimismFractal.com/media, which is hosted at https://www.notion.so/edencreators/Media-eac86b8f965a415c9a69c2b58aa97103?pvs=4. These videos are intended to sync with the Optimystics videos page linked above. The images show perfectly aligned with the text in some displays but look totally different in other window sizes or displays, as you can see in the two pictures below. Do you know how I can make the pictures and text show up in more alignment like they used to do in the first picture above (before Super 3.1)?

I’m considering implementing a gallery database to display video thumbnails and descriptions instead of using the synced picture and text blocks like in the notion pages linked above. This could resolve the issues above and also be a more flexible way to display this kind of content for other reasons as well. However, I’ve tried creating a database for videos and haven’t figured out how to make the database gallery show large enough cards. I’ve tried setting the Card Size to Large in the Gallery Layout section, but the cards are still showing very small. I’d like to be able to display Cards that are the size of the first picture above or have two cards in one row, but even with the large card size the site only shows small cards with 3 cards in each row on an average laptop sized window. You can see an example of this at Optimystics.io/blog, which is hosted at https://www.notion.so/edencreators/Optimystics-Blog-6cf34bfe6f4149a1b97f450d962730dc?pvs=4 . 3a. How can I make the card sizes larger I can display images like video thumbnails and blog posts with this database architecture? Is there some CSS code to resize gallery cards or is there an option for this in Super’s settings? 3b. How can I remove the page icon at the left side of the title of each these blog posts? I turned off ‘Show page icon’ in the Gallery layout settings for the database but it still shows the little document icon next to the title of each blog post. I think this didn’t show before Super 3.1, though I am not sure.