Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Ben Miller

  • Posts

  • Joined

  • Last visited

Everything posted by Ben Miller

  1. I never managed to find the settings for thumbnails myself. It sounds like you're trying to assign site styles for individual pages but my gut tells me that Squarespace's settings aren't stored and accessible through CSS. Those settings inform the CSS, though, so maybe there's a way to override all of the appropriate values. The first step would be to isolate a specific page, which results in a selector that looks like "#collection-12345". There's a Squarespace Collection/Block Identifier extension for Chrome that, when enabled, will show the IDs of various blocks and pages (you might need to load the page directly rather than through the editor). It'll give a selector with #collection-12345 which you'd put at the top to ensure the CSS only affects that one page. At one point I had wanted to have an index page with squares and a separate index page with rectangle thumbnails, so I'm curious about that question as well. Squarespace's docs have their usual neutral explanation that addresses the question, suggests it's possible, and then leaves no explanation how: All of the rest is a mystery to me. I was already struggling to override Squarespace's default block layouts. I never seem to be able to find just the right size and padding values to change so everything I touch gives me partial success only. If the grid layout I was using in the above post or in my other post on the same topic can be made to work, it would probably solve your problem. A possible alternative is to use image blocks manually arranged and linked. If you cropped the thumbnails yourself, the automatic scaling might give you the effect you need. Then you would only need to find ways to control the padding on the whole page.
  2. Site URL: https://www.thislandisdigital.com/test-rectangles I've asked a less clear version of this question and wanted to try again with more clarity. The ideal solution would be flexible enough to be reapplied to achieve various similar arrangements. The immediate solution would strictly allow for the one requested arrangement. I am not amazing at CSS, so feel free to over-explain if you'd like. By default the Avenue template's indexes display a set of pages with identically proportioned thumbnails. In site styles, I can change the image ratio and every thumbnail will always occupy a single grid space. My current design uses square thumbnails (ratio 100, or 1:1) arranged in rows of 4 or, on mobile, rows of 2. In other words, I've created a perfect grid of squares. This design is largely inspired by ArtStation which sets a familiar standard in my industry. What I want is for the first two thumbnails to occupy two spaces in the grid for a ratio of 2:1. Because the rows for both desktop (4) and mobile (2) are divisible by 2, there is space for this in concept. Below are images of what I have and what I need. <<< Permission to stop reading here if you've already got an idea. Check images for reference. ⏰ So far I've been able to selectively target individual images and their backgrounds which I used to apply hover effects. I tried various methods of resizing images but often struggled with automatic vertical scaling (I'm looking for double wide with no change to height). Other attempts only scaled or skewed the image, leaving some part of the overall "thumbnail" structure at its original size. I don't know enough CSS to be able to understand that structure just yet. Below is the code I use to identify and affect particular thumbnails (modifying the "n" to a specific index). It's also how I'll assign rectangular hover images to the double-wide images. a.project:nth-child(n):hover { img { // On hovering over a specific block, affect the image at that selection. opacity: 20%; filter: blur(2px); transition: all 0.5s; } .content-fill { // On hovering over a specific block, affect the filled color at that selection. background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e852b782dc9304ac485f646/1585785720583/Thumbnails_HoverImage-Square_01.png); background-size: cover; //or: 100%; background-position: center center; background-repeat: no-repeat; } } I then tried to assign a {display: grid;} with grid-template-areas to an upper element on an index page. With this I successfully arranged the thumbnails as desired BUT had no control over vertical scaling. The double-wide thumbnails ended up appearing double-tall as well. My assumption here is that the width of the thumbnails was directly tied to the browser window (up to the maximum width), while the height had no obvious point of reference. Both my 1:1 thumbs and my 2:1 thumbs had a height of 512px, yet the height of each row was not identical. Instead, the images were locked to a 1:1 ratio, so if an image was assigned a width of two grid tiles, their height (while still one grid space tall) was doubled as well. I was able to rescale the image itself, but apparently not the entire container which stayed the same. I may have even been able to scale the grid space of each image at one point, but the clickable square and backgrounds and such were overlapping and jammed behind one another. Just lots and lots of weirdness. Below is some code for my attempts and a link to a page to test it. // Name the generic children of the layout in whatever order they appear. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { a:nth-of-type(n){width: 100%;} a:nth-of-type(1){grid-area: one;} a:nth-of-type(2){grid-area: two;} a:nth-of-type(3){grid-area: three;} a:nth-of-type(4){grid-area: four;} a:nth-of-type(5){grid-area: five;} a:nth-of-type(6){grid-area: six;} a:nth-of-type(7){grid-area: seven;} a:nth-of-type(8){grid-area: eight;} a:nth-of-type(9){grid-area: nine;} a:nth-of-type(10){grid-area: ten;} a:nth-of-type(11){grid-area: eleven;} a:nth-of-type(12){grid-area: twelve;} a:nth-of-type(13){grid-area: thirteen;} a:nth-of-type(14){grid-area: fourteen;} a:nth-of-type(15){grid-area: fifteen;} a:nth-of-type(16){grid-area: sixteen;} } // Assign a grid display to the wrapper beneath #projectThumbs. #collection-5e83973d00d63d75669cbd19 #projectThumbs>div { display: grid; // Display the wrapper element as a grid. grid-template-areas: // CENTER ISLANDS "one one two two" // Two big "three four five six" // Four small "seven eight eight nine" //Small big small "ten eleven twelve thirteen" //Four small "fourteen fifteen fifteen sixteen"; // Small big small } // Customize the larger thumbnails. // At this point I was hopelessly lost, so this code is mostly to help isolate the specific indices needing double widths. #collection-5e83973d00d63d75669cbd19 #projectThumbs { a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img { height: 50% !important; width: 100% !important; left: 0 !important; right: 0 !important; } a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){ height: 50% !important; width: 100% !important; } }
  3. Not quite, and I'd still be interested in having a more robust solution. Right now the overlay is actually behind the thumbnails, having been loaded onto the background. In order to display both at once, I'm forced to fade the selected thumbnail to show the image hidden behind it. An unintended benefit of this approach was an ability to consistently display legible text over the darkened thumbnails. What I had originally intended, however, was to place the overlay on top of the thumbnails, preserving the brightness and saturation of the thumbnail while giving me greater control over the results. The overlay is a PNG with transparency built in, so I hadn't intended to adjust opacity through the CSS at all (though fading the image in would look nice). As far as my intended design choices go, I tend to solve these sorts of things by experimenting directly with whatever methods are available to me. I was still able to find a decent solution even without a proper overlay and, for all I know, it could still be the best looking solution even after I learn to make an overlay properly. Learning CSS would be easier if I were starting with a blank site with structures of my own creation. Squarespace already has a hierarchy of containers and classes that, for me, are hard dissect and affect. So again, I am still looking for a better way to apply an overlay image on thumbnails, specifically for an index page on the Avenue template. Thanks for any help that comes along.
  4. Any help on this one? I've tried looking into CSS grid tutorials and most of them either focus on text (which doesn't need perfect ratios so much) or on sites built from scratch. Modifying Squarespace for this purpose is clearly not ideal with so much of the structure unknown to me. I was able to extend the approach I was already using by rescaling the 2:1 images, but the clickable square around them remained the same size no matter how many divs I tried to resize. I've also messed with other approaches to creating the mixed grid shown in my last screenshot with no real success. If anyone can get me through doing this an alternate way I'd be happy to hear it. For most of my attempts, the limiting factor was almost always the vertical scaling of images and their subsequent filling of the resulting block. I tried creating a new page with multiple squarespace grid blocks stacked on top of each other to represent each line of the grid. Each grid block allows for only one ratio and the block itself doesn't actually include 2:1 in its drop down (not sure why). A third issue is that the number of items per line would dynamically scale, creating asymmetrical variations of my symmetrical design. I also tried creating a page with a series of image blocks placed in a stack on the page. This placed them all as siblings within the same container (column>row>image blocks). With this I started building the same {display: grid} approach as on the front page. The big problem I had here is that the image blocks themselves could be resized vertically using the handle, yet the resulting size value was nowhere to be found. The images kept cropping themselves all out of whack and making it impossible to create anything like a clean, maintainable grid. As far as my closest approach using the repurposed index, below is my current code setup (in order for it to work, I need to change my thumbnails per-line back to 1 rather than 4. Since I can't leave my site up broken, refer to my screenshots). By selecting the images, I can force them to consume the entire thumbnail space but couldn't quite figure out how to link the height to the width itself to create a 2:1 ratio. If I force the heights of each row to 300px to match the thumbnails, the clickable region is still a full square and the lower thumbnails just overlap it. At this point I'm too confused to get anywhere. // Settings for larger thumbnails. #collection-5c89d82aee6eb05083075575 #projectThumbs { a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img { height: 100% !important; width: 100% !important; left: 0 !important; right: 0 !important; } a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){ //height: 100% !important; //width: 100% !important; } } // Assign a grid display to the wrapper beneath #projectThumbs. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { // Display the wrapper element as a grid. display: grid; // Divide the page into columns that each take up one "fraction". grid-template-columns: 1fr 1fr 1fr 1fr; //grid-template-rows: 1fr 1fr 1fr 1fr; //300px 300px 300px 300px; /* // ALTERNATING = Two big, four small, two big, four small, four small grid-template-areas: "one one two two" "three four five six" "seven seven eight eight" "nine ten eleven twelve" "thirteen fourteen fifteen sixteen"; */ /* // SWITCHBACKS = Two big, four small, center big, four small, center big grid-template-areas: "one one two two" "three four five six" "seven seven eight nine" "ten eleven twelve twelve" "thirteen fourteen fifteen sixteen"; */ // CENTER ISLANDS = Two big, four small, center big, four small, center big grid-template-areas: "one one two two" "three four five six" "seven eight eight nine" "ten eleven twelve thirteen" "fourteen fifteen fifteen sixteen"; /* // BASIC GRID = 4x4 small images. grid-template-areas: "one two three four" "five six seven eight" "nine ten eleven twelve" "thirteen fourteen fifteen sixteen"; */ @media screen and (max-width: 800px) { display: block; } @media screen and (max-width: 640px) { display: block; } } // Name the generic children of the layout in whatever order they appear. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { a:nth-of-type(1){ grid-area: one; // Name of the item. } a:nth-of-type(2){ grid-area: two; } a:nth-of-type(3){ grid-area: three; } a:nth-of-type(4){ grid-area: four; } a:nth-of-type(5){ grid-area: five; } a:nth-of-type(6){ grid-area: six; } a:nth-of-type(7){ grid-area: seven; } a:nth-of-type(8){ grid-area: eight; } a:nth-of-type(9){ grid-area: nine; } a:nth-of-type(10){ grid-area: ten; } a:nth-of-type(11){ grid-area: eleven; } a:nth-of-type(12){ grid-area: twelve; } a:nth-of-type(13){ grid-area: thirteen; } a:nth-of-type(14){ grid-area: fourteen; } a:nth-of-type(15){ grid-area: fifteen; } a:nth-of-type(16){ grid-area: sixteen; } }
  5. Site URL: https://www.thislandisdigital.com/ Context: I've spent some time trying to apply a custom grid layout to my index so that I can highlight certain projects with double sized thumbnails. To do this I followed this tutorial which targets an index: gallery block from a different template rather than the standard index I have available in Avenue (not sure if the scaling is different because of this). I was able to successfully assign an area to each of the index thumbnails and arrange them the way I wanted using grid-template-areas with one main issue. Problem: The thumbnails are forced to match the aspect ratio in my site style rather than cropping or stretching to fill the grid's literal space. What I want is to have a combination of 2/1 and 1/1 aspect ratios. My site style can be one or the other (50 or 100). No matter which I choose, the grid is being stretched vertically to match the same ratio. Here's my code so far. I'll deal with the tablet and mobile arrangements when I solve the desktop issues. #collection-5c89d82aee6eb05083075575 #projectThumbs { > div { // Create a grid layout on the index. display: grid; // Visually map the named items below to the grid using spaces. Repetition matters. grid-template-areas: "firstAB firstAB firstCD firstCD" "secondA secondB secondC secondD" "thirdA thirdBC thirdBC thirdD" "fourthA fourthB fourthC fourthD"; @media screen and (max-width: 800px) { //grid-template-areas: ""; } @media screen and (max-width: 640px) { //display: block; } } // First Row a:nth-of-type(1){ grid-area: firstAB; // Name of the item. } a:nth-of-type(2){ grid-area: firstCD; } // Second Row a:nth-of-type(3){ grid-area: secondA; } a:nth-of-type(4){ grid-area: secondB; } a:nth-of-type(5){ grid-area: secondC; } a:nth-of-type(6){ grid-area: secondD; } // Third Row a:nth-of-type(7){ grid-area: thirdA; } a:nth-of-type(8){ grid-area: thirdBC; } a:nth-of-type(9){ grid-area: thirdD; } // Fourth Row a:nth-of-type(10){ grid-area: fourthA; } a:nth-of-type(11){ grid-area: fourthB; } a:nth-of-type(12){ grid-area: fourthC; } a:nth-of-type(13){ grid-area: fourthD; } } I attached a picture of the result I want vs. the result I'm getting. * I had to temporarily revert my site to a standard 4-wide index and comment the CSS out. Didn't want to leave my site up in a broken state while I wait for a solution (it requires a 1-wide index for some reason). I was able to reduce the visible size of specific images, but only the image element and not whatever larger element it's attached to (still new to CSS). Hopefully the screenshots and my code will be enough to get a hint or direction.
  6. That gets the width of the page fairly well, though it doesn't reach the border lines as I'd hoped. I need to be able to repeat the pattern on multiple pages, too, and I can't parse your selectors enough to do that. Could you describe what that's pointing at on the page?
  7. Site URL: https://www.thislandisdigital.com/test-rectangles I've already located code to create a hover effect from a recent post (though it needs to be written for every single thumbnail). All of the tutorials and tips I've found so far replace one image with another, though, whereas I would like to overlay an image on top of the currently hovered thumbnail. The effect will basically place a border, some glowing vignette, and a few stylized notches as if looking through a camera. The test index I'm using can be found here. The image I'd like to overlay is here. My current hover code looks like this (with some extra toys thrown in while I experiment!): /* On hovering over a specific block, affect its image. */ a.project:nth-child(1):hover img, a.project:nth-child(2):hover img, a.project:nth-child(3):hover img, a.project:nth-child(4):hover img { //visibility: hidden; opacity: 50%; //border-radius: 150px; filter: blur(2px); //grayscale(100%); //invert(100%); transition: all 0.5s; } a.project:nth-child(1):hover .content-fill, a.project:nth-child(2):hover .content-fill, a.project:nth-child(3):hover .content-fill, a.project:nth-child(4):hover .content-fill { background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e83d5e07a31383b2b77d2d3/1585698273099/Thumbnails_HoverImage_02.png); background-size: 100%; //or: cover; background-position: center center; background-repeat: no-repeat; } How do I make the image appear over top of the thumbnails? I don't really want to fade their opacity to reveal something behind them.
  8. Site URL: https://www.thislandisdigital.com/ Right now I have some code set up that assigns a background color to certain text blocks across my site to make them readable in the same way that the "Image Block: Card" element does. Unfortunately, when I try to apply that to pages like my "Home a Drone" page, it cuts out the spacers on the side. Including the spacers doesn't fix the problem either since they won't dynamically scale to match the height of the text block, instead leaving cutouts underneath them. In the example below, the height of the spacers doesn't match the height of the text, leaving a fat T shape. What I need is to 1.) have a block of color that is as wide as the rest of the content on my page (stopping before the side padding), 2.) covers the entire text block so that it can be read easier, 3.) aligns aesthetically with the existing dividers, and 4.) dynamically scales with the rest of the page. I don't know what options I have available to me necessarily, but my first guess is to somehow create a new shape that dynamically follows to the center of each divider (one is a divider element, the other is the "Page Border" from the site style). Any help would be appreciated.
  9. Thanks! Question #2 I can't seem to find how to selectively change the color yet (though I'm having a better time inspecting the page right now). One text color doesn't really work on all of the thumbnails so I'd like to play with dark/light text depending on the thumbnails. Question #3 An alternative to the titles would be to swap out the thumbnail images when the mouse hovers. Any idea how I can go about doing this?
  10. Avenue has an option to include titles over each of those thumbnail images when the mouse hovers over them. I currently have it disabled ("Hide Index Thumb Titles") so only my manually created titles appear.
  11. Site URL: https://www.thislandisdigital.com/ So I'll just say I'm not great with CSS as it applies to Squarespace (so far). I generally understand a decent amount of the action code with the brackets but identifying the right subjects (#thisPiece .thatPart) has given me too much trouble to get much done. Extra explanation on those subjects would be appreciated. Question: How do I selectively hide or otherwise alter (color, animation) the thumbnail titles only for specific pages within an index? Context: My site, ThisLandisDigital.com, uses the Avenue template and a grid of thumbnails organize my portfolio. It's common to include project logos for games and films within related thumbnails, so I've already got a layer of text for the first several images. When I enable the default index titles, the text color is not consistently legible and the text is redundant for some thumbnails. Similarly, when I try including titles directly in all of the thumbnail images, the whole page becomes much harder to read at a glance (the GIFs are distracting enough). The site style controls also don't let me choose top/bottom positions for the title, only left/center/right and overlay/under. I don't know yet what solution will be best or even whether playing with titles on some of the thumbnails will work at all, but to experiment with it I'll need to be able to single out each page's thumbnail and toggle its title visibility. Bonus Question: How would I swap the thumbnail images themselves when hovered such that I could design the titles into the images manually or possibly reduce my GIFs to hover reactions? Thanks.
  • Create New...