Portfolio Archive Projects

Description

• adding archive section (hidden by default)/button, move archive items to this section, if users click button will open archive section
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, hover on each Portfolio item > Click Settings

#1.2. click SEO > SEO Description > enter word: archive

#1.3. Click Gear icon on Portfolio Page

#1.4. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c07v1 Portfolio Archive Projects -->
<script>
  window.portfolioArchiveConfig = {
    gridSelector: '#gridThumbs',
    itemSelector: '.grid-item',
    sourceUrl: '',
    matchText: 'archive',
    caseSensitive: false,
    buttonText: 'Archives',
    buttonTextOpen: '',
    buttonHref: '#',
    buttonClass: 'btn btn--border theme-btn--primary-inverse sqs-button-element--primary archive-button',
    hideButtonIfEmpty: true,
    startOpen: false,
    showLoader: true,
    gridTopPadding: '10px',
    gridBottomPadding: '10px'
  };
</script>
<script src="https://code.beaverhero.com/portfolio/0726c07v1portfolioarchiveprojects.js"></script>

#2. Customize

#2.1. To change button text, change Line 09

buttonText: 'Archives',

#2.2. To change spacing on top/bottom of Portfolio Grid, change Line 16, Line 17

gridTopPadding: '10px',
    gridBottomPadding: '10px'

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown

<script>
  window.portfolioArchiveConfig = {
    gridSelector: '#gridThumbs',
    itemSelector: '.grid-item',
    sourceUrl: '',
    matchText: 'archive',
    caseSensitive: false,
    buttonText: 'Archives',
    buttonTextOpen: '',
    buttonHref: '#',
    buttonClass: 'btn btn--border theme-btn--primary-inverse sqs-button-element--primary archive-button',
    hideButtonIfEmpty: true,
    startOpen: false,
    showLoader: true,
    gridTopPadding: '10px',
    gridBottomPadding: '10px'
  };
</script>
<script src="https://code.beaverhero.com/portfolio/0726c07v1portfolioarchiveprojects.js"></script>