Portfolio 3 Horizontal Images

Description

• turn Portfolio image to horizontal format with 3 images
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, edit each Portfolio item

#1.2. Click Add Section

#1.3. Choose Images > Choose section with (i) icon

#1.4. Hover on top right of Images section > Click EDIT SECTION

#1.5. Make sure you use Grid: Simple

#1.6. at Anchor Link > enter word: horizontal-images

#1.7. Hover on top right of Images section > Click EDIT Gallery to upload your desired images

#1.8. Click Gear icon on Portfolio Page

#1.9. Click Advanced > Paste this code

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

<!-- 08.26c01v1 Portfolio 3 Horizontal Images -->
<script>
window.Portfolio3HImagesConfig = {
    gridSelector: "#gridThumbs",
    gridItemSelector: ".grid-item",
    mainImageSelector: ".grid-image-inner-wrapper img",
    projectImageSelector: ".gallery-grid-item img",
    thumbCount: 2,
    thumbImageWidth: 750,
    imageRatioPadding: "13%",
    gridColumns: 1,
    gridMaxWidth: "100%",
    injectCss: true
};
</script>
<script src="https://code.beaverhero.com/portfolio/0826c01v1portfoliohorizontalimages.js"></script>

#2. Customize

#2.1. To change ratio of Image change line 10

imageRatioPadding: "13%",

#2.2. To change Portfolio to 1 column, change line 11

gridColumns: 1,

#2.4. To change width of Portfolio section, change line 12

gridMaxWidth: "100%",

#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.Portfolio3HImagesConfig = {
    gridSelector: "#gridThumbs",
    gridItemSelector: ".grid-item",
    mainImageSelector: ".grid-image-inner-wrapper img",
    projectImageSelector: ".gallery-grid-item img",
    thumbCount: 2,
    thumbImageWidth: 750,
    imageRatioPadding: "13%",
    gridColumns: 1,
    gridMaxWidth: "100%",
    injectCss: true
};
</script>
<script src="https://code.beaverhero.com/portfolio/0826c01v1portfoliohorizontalimages.js"></script>