PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

My Follow-Up FGM Question

(15 posts) (2 voices)

Started 1 week ago by wcamp
Latest reply from Gerry

wcamp

offline
Member

I'm concerned with a new challenge that I cannot resolve. Hope this is an easy fix.

On my Home page, which utilizes Flex Grid Magic nicely, I've formatted FGM to appear as four grids per row. The first <div id="p7FGM_1"> has eight thumbnails in it that fit nicely into two rows of four grids.

The second group (titled "Quizzes"), <div id="p7FGM_2">, currently has seven grids; four above three individual grids. I like how that looks; it allows me to add another grid when available. The remaining grid collections also don't fill the column but keep individual grids, flush left, the way I like it.

Here's the Home page that looks the way I want FGM to look.
https://www.warrencampdesign.com

Now, on my new FGM page, which has been formatted to have three thumbnails per row, whenever the number of thumbs is less than three, subsequent grids FILL THE ROW, which looks ugly.
https://www.warrencampdesign.com/peter/peterMasterpieces.php

I've compared the markup and styles of both pages and cannot locate what's different. Sorry.

What must I change to make the FGMs on my new "Peter Masterpieces" page follow the preferred format that appears on my Home page?

Many thanks for helping me resolve this issue.

Warren

Posted 1 week ago
Gerry

offline
PVII Team

In order to prevent the flex box from filling the container you need to set the section to no grow. On your home page you have this style rule added:

.p7FGM div.fgm-section {
-webkit-flex-grow: 0;
flex-grow: 0;
}

Just add that style rule to your new FGM page.

Posted 1 week ago
wcamp

offline
Member

Dear Gerry:

I'm relieved and very pleased to find your simple correction. It instantly provided the preferred column formatting style for my page's thumbnails.

I now have two FGM follow-up questions to ask.

1. the first "p7FGM_1" div has four grids that come close to filling the page's width. I changed the "23,%" value to "22.6,%" to make them fit. (Using 23% caused the last thumb to drop a line; using 22% left too much space to the right.) Is my use of 22.6% appropriate, as shown here?
. . .
<div id="p7FGM_1" class="p7FGM fgm-borders fgm-rounded fgm-shadow fgm-noscript" data-fgm="p7FGM_1,22.6,%,0">
<div class="fgm-section fgm-vertical-center" data-fgm-basis="22.6,%">
<div class="fgm-content fgm-cnt-top fgm-center">"Peter's Denial"</div>
<div class="fgm-img"><img src="images/petersDenial1_sm.jpg"></div>
<div class="fgm-content fgm-cnt-bottom fgm-center">
<p>Click to enlarge.</p>
<br>
<p>Bloch — 1873 painting</p>
</div>
</div>
<div class="fgm-section fgm-vertical-center" data-fgm-basis="22.6,%">
<div class="fgm-content fgm-cnt-top fgm-center">"Transfiguration"</div>
<div class="fgm-img"><img src="images/transfiguration_sm.jpg"></div>
<div class="fgm-content fgm-cnt-bottom fgm-center">
<p>Click to enlarge.</p>
<br>
<p>Raphael — 1518–1520 painting</p>
</div>
</div> . . .
. . .

2. The second and third rows of FGM grids need special attention. Both are related to one another and ought to reside within the same FGM grid; the lower three grids are detailed thumbs of the upper grid, to which I assigned a 100-percent width. I've attempted to make all four thumbs become one FGM grid, but every effort failed miserably.

Is there an FGM markup and style(s) that I can apply to keep all four thumbs — one full width followed by three smaller grids — within one FGM div?

If not, what new rule must I use to create a grid that contains the four thumbs inside one container that has the same background color (#e2dbcf), as well as FGM's matching borders, rounded corners, and shadows?

Much appreciated, Gerry.

Warren

Posted 1 week ago
Gerry

offline
PVII Team

1. Yes, since you now have the grow set to zero the flex sections will not stretch to fill the space. This forces you to assign a flex basis that will make them as wide as possible without breaking to a new line. Of course, the left and right margins and padding in between images is going to affect this calculation so trial and error testing is needed. Looks like you've found the correct width basis to achieve the look you want.

2. You can easily add the 100% width basis to the FGM that contains the three i mages, it will work perfectly fine. The problem, however is the text and headings between the rows, you will not be able to uses these. I would keep it the way way you have it now, in a separate FGM. It makes adding the text and/or headings and it makes management a bit easier. There is no efficiency difference between one FGM or two separate FGMs.

Posted 1 week ago
wcamp

offline
Member

Okay. I thank you very much for sending me your prompt and helpful e-reply.

Perhaps I'll now try adding the "max-width: 100%" declaration, then see where else I can add or rewrite the related text.

If that effort doesn't produce fruit, I'll follow your closing suggestion, Gerry, and keep the two FGMs separate. Maybe I can put both grids even closer to one another so as to make them seem as though they were connected. ( ; - )

Stay tuned, and thanks, again!

Warren

Posted 1 week ago
wcamp

offline
Member

I'm baaaaaack. I attempted to add a "max-width:100%" declaration to the head section and the three-image grid, as follows:

<style>
.p7FGM .fgm-section {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.fullWidth {
max-width: 100%;
}
</style>

<div id="p7FGM_3" class="p7FGM fgm-section fgm-borders fgm-rounded fgm-shadow fgm-noscript fullWidth" data-fgm="p7FGM_3,100,%,0">

So far, the changes have not done the trick; the three smaller grids have not become one full-width grid. Have I misunderstood what you suggested I do? Or have I erroneously entered one or more entries to my markup?

https://www.warrencampdesign.com/peter/peterMasterpieces.php

Wondering Warren

Posted 1 week ago
Gerry

offline
PVII Team

I Think you misunderstood. The max-width: 100% does nothing to change the way the boxes (sections) are rendered. If you want a box to be full width then you need to set the 'Box Width Basis' to 100% for that box in the FGM interface.

-Open the Modify interface for p7FGM_3 and select the first box.

-Click the 'Add Box' button.

-Now click the 'Move up' button to move this new box to the top.

-Set the Box Width Basis to in the Box List section to 100%.

-In the Image section Browse to your large image, the 'theTributeMoney_lg.jpg' image.

-Add any top or Bottom Content

-Click OK to close the interface.

The first box in p7FGM_3 will render full width, it contains the large image we added. The remaining boxes will render at the 31% that you had previously set for them

Posted 1 week ago
wcamp

offline
Member

I believe that I followed your directions correctly, Gerry. I thank you for providing this helpful support.

https://www.warrencampdesign.com/peter/peterMasterpieces.php

To be sure that I haven't misunderstood what you wrote in response to my previous FGM inquiry, I'll assume that I can NOT assign the background color of all the FGM grids to this newly created combined grid with two grid rows, to make all four images appear to be within one container. Yes? No?

- - -

One important question I now need to ask you about FGM combined with PBX: Before I create PBX instances that reveal large image files and related text when the "Click to enlarge." link is clicked, I need to know about the optimal page size for such a production. Before I add any PBX instance images, the page size is now only 34 kb. To what extent will the addition of ±90 large image files (each ranging from 600 kb to 900 kb), which won't load until the PBX instances are activated, slow down the opening time for this page?

Currently, the page speed measures as follows: Grade "B" with a 93% Performance rating (using GTmettrix).

If, after assigning the ±90 large PBX image files to this page, the speed level drops significantly, would you recommend that I create two, three, or four smaller pages with one Landing page from which to select individual pages?

Wondering Warren

Posted 6 days ago
Gerry

offline
PVII Team

1. The 'box' styling in FGM is all deciated to the box, not the outer container. You could add a style rule that will assign the same styling to the outer FGM container to give the grouped appearance.

Add this style rule:

#p7FGM_3 {
border: 1px solid #000;
background-color: #e2dbcf;
border-radius: 6px;
padding: 6px;
box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 60%);
margin-left: 10px;
margin-right: 10px;
}

and see if your like the effect.

2. The Pop Box system contains no image pre-loading or on-demand loading system. With PBX all content, including images, will be part of the initial page load. Wjat you are really looking for is the functionality of an image gallery tool like our magic Box system. MBX will only load the first image and the rest on demand, keeping the initial page load impact low. The only page load impact would be from the number of thumbnails and the first image. The MBX system includes a handy trigger command that allows you to easily assign any thumb images on your page to the MBX.

https://www.projectseven.com/products/galleries/mbx/index.htm

Posted 6 days ago
wcamp

offline
Member

Thanks very much for providing the style rule, Gerry. I'll modify the background color slightly — a bit lighter — to make all four grids within this FGM stand out yet appear part of the collection. I bet it will look great and serve the desired function.

Regarding your introducing me to MBX, I've spent time looking at all the MBX-related pages. Very impressive. My concern lies with the ease or difficulty I'll likely have using FGM, and PBX, and MBX on this already complex page. I'd already created numerous PBX instances with enlarged photo images and related text, hyperlinks, and videos.

Are you suggesting that I use MBX, with or instead of PBX (with which I've worked comfortably for the past six months)? I'm confused now with what I ought to do next for this "Peter's Masterpieces" page. Please guide me on the options going forward.

Thanks.

Warren

Posted 6 days ago
Gerry

offline
PVII Team

I'm suggesting that you use MBX instead of PBX to display the +-90 images. If you use PBX all 90 images will be downloaded at initial page load and cause a huge delay. The PBX system is a 'tooltip' type system and will only display existing page content. The MBX system is an image presentation system and will only load the image(s) on demand, no effect on page load times so it doesn't matter how many images you have.

Posted 6 days ago
wcamp

offline
Member

Thanks for clarifying this for me.

Before I switch from PBX to MBX, I have these concerns that I ask you to address.

Because I've already created ±25 PBX instances on my page, is it feasible to switch from PBX to MBX without difficulty and loss of a significant amount of already invested time? Should my already performed PBX work prevent me from starting afresh with the MBX program, which will be new to me?

Assuming that I switch from PBX to MBX, would you please provide me with detailed steps to take to convert PBX text, photo data, and styles into MBX text, photos, and styles? I hope you will so that I won't need to pester you with a number of forum posts daily.

I await receipt of your recommended advisory, Gerry.

Sincerely,

Warren

Posted 5 days ago
Gerry

offline
PVII Team

I don't see the 25 instances of PBX on the page, in fact I don't see any so there is no switching involved. Being new to Magic Box I would strongly urge to work with a simple test page first, just to get used to the way MBX work and what it has to offer. Once you're comfortable with it, especially how work with the Trigger command, then add to your page.

MBX includes two separate user interfaces, the main interface that contains all of the full size images and/or thumbnails. The separate Trigger interface that allows you to assign an MBX trigger to any test, image or link on your page.

Essentially you would use just one instance of MBX on the page, add all of your full size images to this single instance. If you have all of your full size images in the same folder then use the handy 'Import' utility to import those images. Since you already have the 'thumbnail' (trigger) images on the page be sure to un-select the 'Thumbnails' option at the top of the mBX interface since you do not want the MBX system to create the thumbnail markup.

Once you have the single MBX added to you page you'll use the 'Trigger' command to assign MBX to each thumbnail, (trigger) image. Just click on the image and open the MBX Trigger command. Select the image number that MBX should display and the click OK. Repeat this for each thumbnail (trigger) image.

Now you'll have a fully operational MBX on the page, click on any trigger image and the MBX will open to that full size image.

Now it's time to open the main MBX interface and review the options, toolbar, auto play, animation, styling, etc. and adjust to your liking.

It should be pretty straightforward and you should be able to operation pretty quickly, but again, experiment on a test page first, just to ge tthe hang of it.

Also note that the MBX system is not replacement for PBX, it is an image display system. Continue to use PBX for the test/content popups on your pages.

User Guide for MBX:
https://www.projectseven.com/products/galleries/mbx/guide/index.htm

Example - Tutorial for Triggers
https://www.projectseven.com/products/galleries/mbx/demos/demo-02.htm

Posted 3 days ago
wcamp

offline
Member

Hi, Gerry:

I've done a lot of work on this page without uploading it. Regarding the PBX instances, I've copy/pasted the text and hyperlinks in several of them to my Pages word processor, storing that data for a while until I begin to work with Magic Box User (MBX). There are approximately thirteen PBX instances that I've yet to transfer to Pages, then remove from this photo album. Because there's an extensive amount of organizing and sorting of image grids on this album page, I suspect that I'll be working on its formatting for a couple more weeks.

https://www.warrencampdesign.com/peter/peterMasterpieces.php

I appreciate your breaking down the two basic elements of MBX for me. I'll keep your commentary handy for when I'll create that "simple test page."

I do want to verify your use of the word "test" in ¶2 and ¶8. I suspect that you meant to type "text", yes?

And, thanks for reminding me that MBX isn't a replacement for PBX. I understand [now] that on this album page, PBX is designed for tooltips, text, and video popups while MBX will take care of my image files. All in all, my album will incorporate the harmonious use of FGM, PBX, and MBX.

Thanks for enlightening me, Gerry.

Posted 1 day ago
Gerry

offline
PVII Team

Thanks Warren!

and yep, the 'test' in those two paragraphs should be 'text'.

Posted 1 day ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.