Portfolio Cover, Grid, List View

Description

• adding cover, grid, list view on portfolio page
• list view will have title, description, video follow on cursor
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Click Gear icon on Portfolio Page

#1.2. Click Advanced > Paste this code

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

<!-- 07.26c14v5 Portfolio Cover, Grid, List View -->
<script>
window.PortfolioViewsConfig = {
  gridSelector: "#gridThumbs",
  gridPaddingTop: "0vw",
  gridPaddingBottom: "0vw",
  defaultView: "grid",
  rememberView: true,
  storageKey: "pcgl:view",
  switchOrder: ["cover", "grid", "list"],
  switchLabels: { cover: "Cover", grid: "Grid", list: "List" },
  switchSeparator: ",",
  switchFontSize: "17px",
  switchFontSizeMobile: "13px",
  switchActiveColor: "#111111",
  switchInactiveColor: "#8e948c",
  switchGapAbove: "40px",
  switchGapBelow: "40px",
  enableDescriptionOnCover: true,
  enableDescriptionOnGrid: true,
  descriptionClass: "sqsrte-small",
  descriptionColor: "#8e948c",
  descriptionMarginTop: "4px",
  descriptionMaxLines: 0,
  descriptionFallbackToExcerpt: true,
  coverColumns: 2,
  coverColumnGap: "8%",
  coverRowGap: "8vw",
  coverItemWidths: ["100%", "66%"],
  coverItemAligns: ["start", "end"],
  coverItemOffsets: ["14vw", "0px"],
  coverMobileColumns: 1,
  coverMobileItemWidths: ["100%"],
  coverMobileItemAligns: ["start"],
  coverMobileItemOffsets: ["0px"],
  listTitleWidth: "26%",
  listDescWidth: "1fr",
  listRowPaddingY: "22px",
  listBorderWidth: "1px",
  listBorderColor: "rgba(0,0,0,0.28)",
  listTitleFontSize: "22px",
  listTitleColor: "#111111",
  listDescColor: "#8e948c",
  listArrowSize: "24px",
  listArrowColor: "#111111",
  listHoverOpacity: 0.55,
  enableListVideo: true,
  preloadVideos: true,
  preloadCount: 0,
  preloadOnMobile: false,
  preloadStaggerMs: 120,
  preloadPrimeMs: 700,
  previewWidth: "340px",
  previewAspectRatio: "16 / 9",
  previewOffsetX: 24,
  previewOffsetY: 24,
  mobileVideoAutoOpenDelay: 5000,
  mobileVideoOpenInNewTab: false,
  mobileMaxWidth: 767,
  forceItemFetch: false,
  fetchConcurrency: 5,
  fetchDelayMs: 80,
  cachePrefix: "pcgl:v1:",
  cacheTTLMinutes: 10,
  debug: false
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c14v5portfoliocoverlistgridview.js"></script>

#1.3. To add Description, like this

(List view)

(or Grid view or Cover view)

You can click on each Portfolio item > Click Settings

Click SEO > at SEO Description, enter your desired description text.

#1.4. To add Autoplay Video to List view, you can enter Video URL (it supports Vimeo + Youtube) after Description in SEO Description

#2. Customize

#2.1. To make description or title appears under Images on Grid or Cover view

You can change Portfolio Page to Grid: Simple layout

#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.PortfolioViewsConfig = {
  gridSelector: "#gridThumbs",
  gridPaddingTop: "0vw",
  gridPaddingBottom: "0vw",
  defaultView: "grid",
  rememberView: true,
  storageKey: "pcgl:view",
  switchOrder: ["cover", "grid", "list"],
  switchLabels: { cover: "Cover", grid: "Grid", list: "List" },
  switchSeparator: ",",
  switchFontSize: "17px",
  switchFontSizeMobile: "13px",
  switchActiveColor: "#111111",
  switchInactiveColor: "#8e948c",
  switchGapAbove: "40px",
  switchGapBelow: "40px",
  enableDescriptionOnCover: true,
  enableDescriptionOnGrid: true,
  descriptionClass: "sqsrte-small",
  descriptionColor: "#8e948c",
  descriptionMarginTop: "4px",
  descriptionMaxLines: 0,
  descriptionFallbackToExcerpt: true,
  coverColumns: 2,
  coverColumnGap: "8%",
  coverRowGap: "8vw",
  coverItemWidths: ["100%", "66%"],
  coverItemAligns: ["start", "end"],
  coverItemOffsets: ["14vw", "0px"],
  coverMobileColumns: 1,
  coverMobileItemWidths: ["100%"],
  coverMobileItemAligns: ["start"],
  coverMobileItemOffsets: ["0px"],
  listTitleWidth: "26%",
  listDescWidth: "1fr",
  listRowPaddingY: "22px",
  listBorderWidth: "1px",
  listBorderColor: "rgba(0,0,0,0.28)",
  listTitleFontSize: "22px",
  listTitleColor: "#111111",
  listDescColor: "#8e948c",
  listArrowSize: "24px",
  listArrowColor: "#111111",
  listHoverOpacity: 0.55,
  enableListVideo: true,
  preloadVideos: true,
  preloadCount: 0,
  preloadOnMobile: false,
  preloadStaggerMs: 120,
  preloadPrimeMs: 700,
  previewWidth: "340px",
  previewAspectRatio: "16 / 9",
  previewOffsetX: 24,
  previewOffsetY: 24,
  mobileVideoAutoOpenDelay: 5000,
  mobileVideoOpenInNewTab: false,
  mobileMaxWidth: 767,
  forceItemFetch: false,
  fetchConcurrency: 5,
  fetchDelayMs: 80,
  cachePrefix: "pcgl:v1:",
  cacheTTLMinutes: 10,
  debug: false
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c14v5portfoliocoverlistgridview.js"></script>