Jump to content

Search the Community

Showing results for tags 'portfolio'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

  1. Hi, I have a question if my idea for a "dynamic" portfolio is correct and is possible to do in Squarespace. Case: I provide services, have use multiple skills, that I would like to present in my categorized portfolio. I apply to multiple employers and businesses as a freelancer. In creative field, it is almost certain that I would be asked for portfolio. Usually business want specialised portfolio for a specific task, uncategorised portfolio with unrelated skills/projects is a bad look. Example: I wrote content of an e-book, designed the layout, then was asked to adjust the layout for print, provided html email layouts for marketing team etc. In portfolio, I can present that I can: write copy, design a layout, know DTP rules, can code marketing emails. A solution suggested on forums: is to create multiple portfolio pages and then link to them from a single page using gallery. This solution doesn't allow for tags & categories, works more like folders on a desktop. My idea: is to create another blog type page, write the whole case study and my roles in the project. Create single page, put summary blocks that would show work from single tag or category. If you have any tips how to solve this, please let me know.
  2. Here's the problem: My homepage is a portfolio page. I want the portfolio background to land on the same photo as the 1st portfolio. Originally I just uploaded the same photo for both the Section background and the portfolio's feature image. However, I had to edit the focus point of the image(s) and it was impossible to select the same focus point for both images. So when you hovered over the first portfolio link, the image would bounce around. My solution was to just delete the feature image for the 1st portfolio, revealing no change when you hover over the 1st portfolio, and the images change on hover for the others. Unfortunately, when you hover from the 2nd or 3rd portfolio, back to the 1st the image does not change. Is there a way with CSS to make Section Background for my home page to equal the feature image for 1st portfolio? My website is: https://www.kiriako.ca/
  3. Bummer of the day. After working days to create a new portfolio I got this pop-up. There is a limit on portfolio items! Why? The only solution I now have is to rebuild every item as a page and not as a portfolio item. Back to start.
  4. I am experiencing major delays in portfolio content showing up, particularly in mobile view, on the "Our Work" Page of my site while using the site-wide animation "slide". This is the portfolio image gallery that links to the portfolio sub-pages set to "grid-overlay" layout. This makes it so that while viewing the "Our Work" page you have to scroll way down the page before content populates. Does anyone know how to disable site-wide animations for just one Page? Is there any custom css that might solve this? Site unpublished. Password: Squarespace
  5. Hi All, I’m working with the Novo template in 7.1 and trying to modify the portfolio page click through link for one of my sub-pages. The portfolio page automatically adds a hover effect on top of my preview image which I’d like to keep so I don’t want to build these using different page types. I’d like to just stop the link from being active. I saw that it might be possible with a pointer event tag but I’m not sure exactly how to execute that. Any help is much appreciated! Thanks!
  6. Hello, Do any of you have an idea how to show two images next to each other in the mobile view of the portfolio grid? It would be very cool if someone had a solution😍 best Wolfgang
  7. Hi all, I'm unsure of how to achieve what I want. Our homepage needs a headline text... then two links to portfolios that produce an image when you hover. Right now the only way seems to be to create two separate sections that occupy the majority of the screen... and the fonts for the two individual sections are far too large. Is there anyway to address the two issues? (the heading and the portfolio font size.) You'll have to scroll down to see everything in it's current form. redscaleprojects.com/home2
  8. Hello, Do any of you have an idea how to show two images next to each other in the mobile view of the portfolio grid? It would be very cool if someone had a solution😍 https://chicory-megalodon-nbzd.squarespace.com/work/#work best Wolfgang
  9. So I discovered this website and I love the layout... what would be the best way to do this with SquareSpace, if possible? I'm not sure if I should have the links going to blog posts, or just individual pages, but either way I think I could make it work! Thank you! Dan
  10. Some code for Portfolio Page - Grid Simple in 7.1. All code: Add to Design > Custom CSS <style> <script> you need to add to Page Header or Code Injection #1. Change Overlay Color /* Show dark overlay on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); /* chage overlay color here */ transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } #2. Add Subtitle First, find subpage [url slug] Next, use this CSS /* Add subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01"; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 01"; } Repeat for other sub pages #3. Add Multi Subtitle /* Multi subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; white-space: pre-wrap; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01 \A second subtitle \A third subtitle "; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 02 \A second subtitle \A third subtitle 2"; } #4. Change to 5 items/row (Desktop) /* Portfolio 5 columns */ @media screen and (min-width:992px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code. #5. Change to 2 items/row (Mobile) /* Mobile 2 columns */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code. #6. Add “new” badge to next to title /* new badge */ a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "New"; position: absolute; top: -5px; font-size: 14px; background-color: red; color: white; line-height: 20px; padding: 2px; margin-left: 10px; } #7. Add an icon next to title a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 50px; height: 50px; display: block; float: right; } Replace with [URL Slug] (see screenshot in first code) #8. Zoom in image on hover /* Zoom in image on hover */ .grid-image img { transition: all 0.3s; } .grid-image-inner-wrapper { overflow: hidden; } a.grid-item:hover img { transform: scale(1.3); transition: all 0.3s; } #9. Add “view” text when hover image /* Add view text on hover image */ .grid-image:before { content: "view"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } #10. Show Overlay + Title over image when hover (Desktop only) /* show overlay title on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } .grid-image:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } .portfolio-text { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999999999; width: 100%; text-align: center; transition: all 0.3s; opacity: 0; } a.grid-item { position: relative; } a.grid-item:hover .portfolio-text { opacity: 1; } .portfolio-text { margin: 0 !important; } h3.portfolio-title { margin: 0 !important; } #11. Change Aspect ratio on sepcific portfolio page First, find [page id] Next, use this CSS /* aspect ratio 2:3 */ body#collection-622f619622029655b91503a8 .grid-image { padding-bottom: 150% !important; } 2:3 = (100 x 3)/2 = 150% #12. Remove Pagination /* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; } #13. Remove Pagination Title Only /* remove pagination title */ .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { display: none; } #14. Remove Pagination Arrows Only /* remove pagination arrows */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke { display: none; } #15. Replace Pagination Title with text Prev/Next /* Pagination title */ [data-collection-type*="portfolio"] { h2.item-pagination-title { display: none; } .item-pagination-prev-next { display: block !important; }} #16. Repalce Pagination Arrow with custom icon /* Custom pagination arrow icon */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke svg { display: none; } [data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } [data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } #17. Add all projects under Pagination Add to Project Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<section class="item-pagination item-pagination--prev-next under-pagination"><div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"><p><a href="/work" target="_blank">All</a> / <a href="/work/meccaandmedina">Mecca &amp; Medina</a> / <a href="/work/street">Street</a> / <a href="/work/humansofstlouis">Humans of St. Louis</a> / <a href="/work/charis">CHARIS</a></p></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> <style> section.under-pagination { justify-content: center; padding-top: 10px; padding-bottom: 10px; } </style> #18. Add Last Project/First Project on First Page/Last Page Pagination Add to Page Header or Code Injection Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio/12" class="item-pagination-link item-pagination-link--prev"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Previous</div><div class="item-pagination-prev-next">- PREV</div><h2 class="item-pagination-title">12 | PRIVATE EVENTS</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> #19. Add Button to Pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> <style> /* Portfolio back to button */ a.portfolio-backto .item-pagination-title { background-color: black; color: white !important; padding: 10px; } </style> #20. Add “Back to all projects” under pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> #21. Move Pagination from bottom to top Add to Page Header <style> main#page { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-top: 100px; } section.item-pagination.item-pagination--prev-next { padding-top: 0; padding-bottom: 5px; } .view-item .item-pagination[data-collection-type^="portfolio"] section:first-child { padding-top: 10px !important; } </style> #22.Change Pagination Title size (mobile) /* pagination title mobile */ @media screen and (max-width:767px) { .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { font-size: 14px; } } #23. Change Pagination Color on hover /* pagination hover */ .item-pagination[data-collection-type^="portfolio"] h2:hover { color: #f1f; } .item-pagination[data-collection-type^="portfolio"] .icon:hover svg { stroke: #f1f; } -- Checked by @tuanphan
  11. Hi all, I would like a second line of text under my portfolio items: https://crocodile-hawk-n6cy.squarespace.com/portfolio-1 Password: 020verkopen Something like Headline subheadline I have tried this, but somehow it is not working in my case. thanks for helping! Arie
  12. Hi All, @Ziggy Thank you again for your help on my last issue I initially set up my site to have a grid of six boxes that were linked to separate gallery pages when clicked. This is currently set as my homepage, and I want to 1) make each page its own page, not part of this portfolio/gallery, and 2) make sections I've created on the vertical scroll homepage (that is actually set to the portfolio I want to delete once I extract (hopefully simply) the separate pages) into their own pages. As you've already seen, my page is currently in disarray, and the portfolio I mention is now pushed to the bottom of the page to get out of the way.
  13. Hi, So I used the CSS given to me the first time I asked this Q and changed the mobile view option to 20px (10 was too tiny). But I'm still having the issue that when the size of the project thumbnails is reduced due to screen size or the platform it's viewed on, the text doesn't reduce with it to stay within the image. I get these scroll tabs when the title is longer. I've attached a screenshot.
  14. Hi. Hoping to add captions to my index page images (https://www.aidenlong.com/workthatmightpaymybills). Anyone have any advice on how to make this happen? Was hoping to have 1-2 lines below each square to detail the scope of work, (full brand launch, packaging redesign, Earth Day campaign, etc). Thanks in advance for any help! Aiden
  15. Hi team, I'm sure this is pretty straightforward so apologies! I would like my homepage to only link through the site title 'Jesse Williams' top left. Currently, I have 'home' visible in top right of header, which I can't disable as it is linked to homepage. Basically, I just want to have 'Jesse Williams' top left, and 'Information' top right which would link to an about page. You would click 'Jesse Williams' to return to homepage. Any ideas? Thanks a bunch!
  16. I am creating a Portfolio gallery and am wondering if I can add a body of text that appears over the thumbnail when you over? I'd like to keep the Page Titles exactly as they are, but when you hover and the image is revealed, I'd like a a description of the portfolio to appear. Thank you.
  17. Hi all, I've just tested my website on mobile view, and have noticed that when viewing pages of my portfolio, the text at the bottom navigation overlaps. Some pages are kind of acceptable, but others makes it look pretty cluttered. I can't see an option to actually edit it on the page, so how do I avoid this? I've tried creating shorter titles, but in some cases I need them longer. Would be happy to change them to just "previous" and "next" too if this resolves it. Any help would be appreciated! Website: www.sabercosmos.co.uk
  18. I have noticed that my overlay text on my portfolio project images does not scale to fit the image when viewed on smaller screens / platforms. Is there a way to ensure the text is always contained within the constraints of the image it overlays? Thank you
  19. Site URL: ruiyuanzhang.com Hello, I'm using the portfolio template to arrange my project and I'd like to put a subtitle (with the same font and lighter weight) underneath each project. (centered) Does anyone know how I can do that? Thank you so much!
  20. Hi, thks in advance for you reply. When creating a portfolio I insert on the pages images from the library. How can I insert the same image into my portfolio settings page? I do not see how to get access to my library at these settings pages. Kind Regards, Hugo
  21. I've run into a bit of an issue with hiding individual collection pages in Squarespace 7.1. Normally, by clicking on the settings for a page, you are able to enable or disable that page. However with the new system of "Portfolio Collections" that page disable option does not exist for individual portfolio project pages. I may be mistaken, but as far as I can tell, there is no way to hide these pages (screenshots attached for reference). This is incredibly troubling as you cannot create drafts of projects, nor if you are duplicating other projects, they will be live with duplicate content until you fix it. I was thinking possibly that you could move collection pages to other collection pages(in the way you can move products from shop to shop), so in essence you could pre-build the portfolio page on a hidden portfolio collection and move it to the live portfolio collection, but there doesn't seem to be a way to do this either. Any advice on how I could make hidden pages in the existing Portfolio Collection system or is this just a fault in the new version?
  22. Hey Team, I'm looking to change the aspect ratio of all the videos (to square / 1:1) on one specific portfolio page - frustratingly it appears to be one that doesn't allow me to inject specific code into it. https://benjackthomas.com/portfolio/samsung-that-sucks I've read that this can be done with injected code and changing the padding but I can't work out how to specify only that page and also where to inject the code. Any help would be ace. Cheers, Ben
  23. Hi! I am looking to change my portfolio image to a video instead. Below I have attached an example of the image. Does anyone how to customize the code so that a video appears instead of image on the portfolio landing page?
  24. I have three portfolio pages on my site including the home page. I want to be able to display 2 columns in one (ie: 2 featured images to represent the two portfolio in that particular group and on the home page and 3 columns in another (ie: 3 featured images). However, it seems that if I set the section to have 3 columns on one portfolio page it defaults to 3 in the others. Is there a way to stop this? I'm not familiar with a lot of custom coding but if there is code I can use to override the SS default I'd appreciate some help with what custom code to use and advice as to where I should add it. Thank you.
  25. Hi, I was wondering if anyone knows how to make the portfolio page projects into a single item banner to showcase individual projects to click into. See example attached.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.