The project page in the York template family is a custom gallery view, designed for making elegant portfolio layouts. Use the project page to create layouts that mix text and imagery in eye-catching ways.
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor share the same underlying structure and functionality. This guide applies to all these templates. These templates also support gallery pages, which offer different options.
Version 7.1 doesn't support project pages. You can't add or edit project pages in the Squarespace App.
Set up the project page
To set up a project page:
- Open the Pages panel.
- Click the + icon to add a Project.
- For best results, add several images or videos, and give each one a title and description.
Add images and videos
To add images and videos:
- Open the Pages panel.
- Click your project page in the left panel.
- Upload images, add stock images, and add videos. All videos must have a thumbnail image.
- Set the image or video's publication status.
To edit settings for images and videos you've already uploaded, double-click the image or video in the side panel.
Layout
Use the Project: layout section of site styles to adjust the layout.
- Image alignment - Align all captions and images to the right, left, or center.
- Image spacing - Adjust the space between each image in the project.
- Banner spacing - Adjust the space between the page header and the first image. Text height in the Page: Intro Text section may also affect this.
- Allow full width portrait and square - Display portrait and square images at the width of the main content area. If Full bleed project is selected, they display at the width of the browser. This tweak appears when Portrait and square caption style is set to Standard or Offset.
Note: Project pages don’t support lightboxes or deeplink URLs. You can add clickthrough URLs to project page images, which will work when connected to gallery blocks or summary blocks, but won't work on the project page itself. If you want a link that works on the project page, add a link to the image's caption.
Add captions
To add or adjust titles and description text:
- Open the Pages panel.
- Click the project page.
- Double-click the image in the side panel.
- Add your text to the Title and Description fields.
Titles and descriptions display below landscape images, and below or beside portrait and square images. Adjust their layout in the Project: layout section of site styles.
- Use the Show project captions tweak to display or hide all image names and description text.
- Collapse landscape spacing removes the space below landscape images that don't have captions.
Use the tweaks in the Project: fonts section of site styles to style the text of your image title and descriptions.
- To justify the text left, right, or center, use the Caption title align and Caption body align tweaks.
- For captions displaying beside portrait or square images, use the Align alternate captions to image tweak.
If you’ve selected Image alignment: center and checked Show project captions, you can further adjust where the captions display on the page with the Portrait and square caption style and Landscape caption style tweaks.
- For either tweak, choosing Standard displays the caption directly below the image, and Offset moves the caption further down, equally spaced from the next image.
- Choosing Portrait and square caption style: alternate moves captions to the side of square and portrait images. The captions alternate from left to right. Images without captions will be centered.
- Choosing Landscape caption style: inset moves up the captions beneath landscape images to slightly overlap.
Image and video sizes
Images in project pages will never stretch larger than their original dimensions, even if set to full-bleed. This prevents your images from looking blurry or pixelated.
- In general, the image size on your project page is determined by the original dimensions of your image. If you want the image to look larger on the page, upload an image with larger dimensions.
- To reduce the size of the image on the page, upload an image with smaller dimensions.
- The Site outer padding tweak may affect the width of images that aren’t set to full-bleed.
- Video width is set by the hosting site. To customize video width, use the video embed code and set the width manually within the code.
- For help with banners and responsive design, review our best practices.
Full-bleed images
Full-bleed images extend to the edges of the browser, ignoring the outer padding. To enable this, first ensure your images are large enough. Images in project pages never stretch larger than their original dimensions. They also won't display wider than 2500 pixels because of how Squarespace optimizes responsive design, but we recommend uploading images at least 2500 pixels wide for best results.
If your images are large enough, you can use site styles to make them full-bleed. This will affect all project pages on your site.
In project pages, images can only display full-bleed when:
- Images are centered.
- Captions are below images.
- Landscape images must be set to full-bleed before non-landscape images can be set to full bleed.
To display all your images full-bleed, first set landscape images:
- Open site styles and scroll to the Project: layout section.
- Choose Image alignment: center. This centers your images.
- Ensure Show project captions is checked, even if you don't have captions.
- Choose Full bleed project. This sets your landscape images to full-bleed.
Then set non-landscape images:
- Choose Portrait and square caption style: standard or offset. This moves any captions below your non-landscape images.
- Check Allow full width portrait and square. This sets your non-landscape images to full-bleed.
- Save and refresh the page.
Move images
To rearrange the order of images on the page, change the order within the page's panel. The side panel of project pages have the same functionality as gallery pages.
You can move an image and its corresponding title and caption between any project page or gallery page. To learn more, visit Moving content between pages.
Header and footer
In addition to images and captions, project pages support:
- Page banners - An image or video that displays at the top of the page.
- Page title, description, and category text - Text that displays at the top of the page. If you have a page banner, this text displays over the image or video.
- Header and footer areas - Areas at the top and bottom of the page that you can customize with your own content.
If your project page doesn’t have a featured image, the first image added to your project page automatically becomes the banner image at the top. Add a featured image to replace it, or uncheck Show project banner in site styles to hide it on all project pages.
Page loading
Images and captions on project pages appear to slide up from the bottom as you scroll down the page. To remove this effect, uncheck the Cascade images and captions tweak. When unchecked, images and captions fade in instead.
Gallery page vs. project page
In addition to project pages, these templates support standard gallery page.
While project pages are great for a mix of imagery and text, gallery pages are ideal for putting the focus on images and video alone. Unlike project pages, gallery pages support deeplink URLs, clickthrough URLs, and lightbox functionality.
To test out both options, you can move images between gallery pages and project pages.
Note: Gallery pages don't support page banner videos.
Switching templates
If you switch to any template other than York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, or Taylor, your project pages convert to gallery pages.
If you switch back to York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, and Taylor, you may need to create new project pages and gallery pages and move images into them to recreate your original format.
Mobile
On mobile devices and narrow browsers, content stacks vertically in a single column.