For anyone having trouble getting the content in the portfolio section of the homepage to display as it does in the architectural homepage demo (masonry layout), I wrote these steps out after following the very unhelpful directions of the support person, which sent me on a wild-goose chase...after looking at the back-end code and comparing portfolio pages I'd created with those in the demo, I figured out what was causing the issue, and if you've run into this, you can solve it by following a few simple steps. They are as follows:
*** The order # is only necessary for making sure the vertical image is either displayed
-- before a horizontal image and two square images or -- after a horizontal image and two square images (whichever the case may be for your needs)
STEP 1: Vertical Images on Far Left (2 rows tall, 1 column wide) 1a. Vertical Image Size: 1280x1992 (or a ratio of this) 1b. Settings: --- In Page Settings --> Portfolio Item Settings: -------- Check: Show as Highlight -------- Highlight Type: Change to Vertical (Default is Square)
STEP 2: Horizontal Images (1 row tall, 2 columns wide) 2a. Horizontal Image Size: 1280x498 (or a ratio of this) 2b. Settings: --- In Page Settings --> Portfolio Item Settings: -------- Check: Show as Highlight -------- Highlight Type: Change to Horizontal (Default is Square)
STEP 3: Square Images 1280x966 (1 row tall, 1 column wide) 3a. Square Image Size: 1280x966 (or a ratio of this) 3b. Settings: --- In Page Settings --> Portfolio Item Settings: **If showing as highlight (if not, default is square) -------- Check: Show as Highlight -------- Highlight Type: Square (Default is Square)
As it turns out, the primary issues are with image sizes / and vertical & horizontal image displays.
For anyone having trouble getting the content in the portfolio section of the homepage to display as it does in the architectural homepage demo (masonry layout), I wrote these steps out after following the very unhelpful directions of the support person, which sent me on a wild-goose chase...after looking at the back-end code and comparing portfolio pages I'd created with those in the demo, I figured out what was causing the issue, and if you've run into this, you can solve it by following a few simple steps. They are as follows:
*** The order # is only necessary for making sure the vertical image is either displayed
-- before a horizontal image and two square images or -- after a horizontal image and two square images (whichever the case may be for your needs)
STEP 1: Vertical Images on Far Left (2 rows tall, 1 column wide) 1a. Vertical Image Size: 1280x1992 (or a ratio of this) 1b. Settings: --- In Page Settings --> Portfolio Item Settings: -------- Check: Show as Highlight -------- Highlight Type: Change to Vertical (Default is Square)
STEP 2: Horizontal Images (1 row tall, 2 columns wide) 2a. Horizontal Image Size: 1280x498 (or a ratio of this) 2b. Settings: --- In Page Settings --> Portfolio Item Settings: -------- Check: Show as Highlight -------- Highlight Type: Change to Horizontal (Default is Square)
STEP 3: Square Images 1280x966 (1 row tall, 1 column wide) 3a. Square Image Size: 1280x966 (or a ratio of this) 3b. Settings: --- In Page Settings --> Portfolio Item Settings: **If showing as highlight (if not, default is square) -------- Check: Show as Highlight -------- Highlight Type: Square (Default is Square)
As it turns out, the primary issues are with image sizes / and vertical & horizontal image displays.