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

PVII Forums » PVII Product Support

MBX "content slide" creation and styling

(24 posts) (2 voices)

Started 10 months ago by wcamp
Latest reply from wcamp

wcamp

offline
Member

Gerry: On my "Peter Masterpieces" TEST page, I've created one sample "content slide" for your review and feedback [please].

https://www.warrencampdesign.com/peter/peter-masterpieces.pg1.TEST-MBX.php

Most of the first nine thumbs are vertical/portrait formations; when triggered, the first eight enlarged images have MBX description containers beneath them that get cut off, which is expected. The ninth thumb (the painting by Fra Carnevale) opens my sample "content slide."

Viewing that enlarged "content slide" on my full-screen iMac, it fills the height of the screen and has a maximum width of 1280 pixels. I'm pleased with its rendering and look.

My concern with this full-size rendering is the need to provide a margin-bottom value to the "content slide" div. Without that margin, the description box at the bottom gets compromised; the lower portion of the second line of text, which has a hyperlink, gets cut off.

To which existing rule do I add a margin-bottom attribute to match the margin-top value of the top caption?

In addition, to which rule do I change the white background of the top caption and the bottom description container?

Many thanks, in advance, Gerry!

Posted 10 months ago
Gerry

offline
PVII Team

You can increase the amount of bottom space allocation by applying this code tweak:

1. Open the p7MBXscripts.js file and locate this at line 1165:

btm = (sC.mbxBottom) ? 20 : 0;

2. Change the 20 to 60

3. Save and close the file.

This will provide 60px of bottom space allocation. Adjust the amount to suit.

Posted 10 months ago
wcamp

offline
Member

Perfect! That's what I wanted to accomplish. My newly added "contact slide" images — numbers 9 through 14 — are now equally margined at their tops and bottoms; there are no longer any compromised "description" text instances. Many thanks, Gerry!

Next, I'll convert the first eight "large image slides" to appropriate "content slides." Before I do that, would it be important to first delete those first eight "large image slides"? Assuming I should, what should my workflow include after deleting all of them?

Do I: (1) select a thumb; (2) create a trigger for it; (3) insert the MBX modification UI and with it (4) select Add Content Slide, then (5) browse to the new "contact slide" image file for that thumb and select it, and then (6) add a description and (7) click OK? If the workflow should be done in a different order, please advise so I won't duplicate or waste time.

https://www.warrencampdesign.com/peter/peter-masterpieces.pg1.TEST-MBX.php

Many thanks, my friend.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

I'm a bit confused. You're referring to 'content slides' but your 9 though 14 slides, the one you like, is an image slide. The text is in the image.

So if you want the first 8 slide the same way you don't need to delete them in the MBX interface since they will still be 'image slide' as far as MBX is concerned. Just change the full-size image and edit the description... same technique you used for slides 9 through 14.

Posted 10 months ago
wcamp

offline
Member

Yes, I am confused.

Please tell me exactly what a "content slide" is and how to create it. The user guide examples and related comments don't appear to provide specifics. For the directions on how to create a content slide, it says only: "Add 3 content slides."

The text on two of the three examples appears to the side of the images, which is what I prefer. Your user guide image of the UI has a blank Description box, yet the "content slide" has text to its right. How do I accomplish that effect using MBX?

Further, I don't know if what I created in slides 9 through 14 is what would be best, regarding what you described as the major benefit of MBX: "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."

I'm eager to learn from you how to efficiently use MBX on this already created album page that has numerous thumbnails and related enlargements. I don't know what to do next, Gerry. Sorry. Please list the workflow steps, from beginning to end, so I can understand the MBX "content slide" feature and create them so they have text on their sides. Thanks very much.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

A 'Content Slide' in MBX is a slide that contains you own HTML markup:

The system will create a new content DIV, which will appear in Dreamweaver Design View. This DIV will contain placeholder content ready for you to replace with your own. You can edit the content directly in Design View, using Dreamweaver's normal editing features.

In other words, it is a slide that contains your html markup and will display whatever you place into the markup. The MBX 'Content Slide' mode should not be used for displaying images because all of the content in these slide will be downloaded at page load.

You should not use the 'Contact Slide' mode.

When you referred to 'content slide' I assumed that you were referring the 'Content Slide' mode in MBX. Of course, that is not what you meant. You were referring to an image that also includes the text content within the image... like your 9-14 slides.

If you want to assure that all of the text and image appears on the screen without the need for scrolling then the approach you are using (image contains the text, like your slides 9-14) is the only way to do it.

Posted 10 months ago
wcamp

offline
Member

Thanks, Gerry.

Please forgive me for still being confused. Your first two paragraphs encourage me to use MBX's "content slides" that I can format to my liking, using DW in Design View. I assume that I'll have no difficulty creating "content slides" similar to the two on your MBX "Examples" page that have text to the right of a small image.

But your second and third paragraphs say that I should NOT use "Content Slide" mode.

Please clarify this for me. I don't know which approach to take.

Thank you.

Posted 10 months ago
Gerry

offline
PVII Team

Using the MBX Content Slide mode is essentially designed for normal page content, it is not really meant to be used to display larger size images.

1. In MBX content slide mode there is not 'Fit' option, the slide will be displayed starting at the top of the screen and will be as tall as it needs to be to display the content within the slide. From your earlier request I'm assuming that you want the slide to be shown in it's entirety within the screen. There is now zooming or resizing when in Content Slide mode, so you'll have no control over that.

2. In Content Slide mode ALL of the images in content slides will be downloaded when the page first loads. In your earlier comments you were very concerned about page load speed. In MBX content slide mode there is no special image preloading and on-demand downloading of the images. This will result in longer page speeds.

It's your choice, use either mode, just know what the benefits and drawbacks are in each mode. Experiment with one new Content Slide to get a feel for how it works and whether or not it will fill your needs.

Posted 10 months ago
wcamp

offline
Member

Dear Gerry:

I'm sorry to burden you with my request. But I've spent more than two hours attempting to create one new "content slide" on a new TEST page. I cannot figure out what's wrong or what's needed. The user guide doesn't tell me enough.

Would you please get me started by telling me what steps to take, from beginning to end, to create an MBX "content slide" on an existing page that already has thumbnails? I'll appreciate your step-by-step guidance very much.

Here's the new TEST page. On lines 56 through 70 are my MBX entries.

https://www.warrencampdesign.com/peter/peter-masterpieces.pg4TEST-MBX.php

Warren

Posted 10 months ago
Gerry

offline
PVII Team

-First, remove the existing MBX that from your page, we're going to start fresh.

-Now we'll create the first MBX content slide:

1. The MBX content slide div will be placed into your page at your current cursor position (insertion point). You do not want this to be near the top of the page. Scroll down to an are of your page AFTER all of the FGMs, right before the horizontal rule at the end of the FGM section. Your MBX content divs will be placed here.

2. Open the MBX interface

3. Un-check the Thumbnails option, we'll be using your existing thumbs in the FGM for this.

4. Click the 'Add Content Slide' button.

5. Now Click the OK button. The interface will close and the MBX content div will be create at your cursor position. In Design View you will see this as the boiler-plate content:

<< MBX Content Slide 1 - Add Your Content Here >>

6. Now we'll assign the trigger to the first thumbnail in your FGM:

- Click (select) on the first thumbnial in your FGM

- Open the MBX Trigger interface

- Enter the slide number to be triggered, it should be 1

- Click OK to close the interface

We now have a fully functional content slide with trigger. Preview the page, click on the first thumb, and you see the MBX content slide open up. It will contain the caption that was entered in the interface and the 'boiler-plate' text.

Back to the page in Design View, you can now replace the boiler-plate text with the html markup you wish to display. You do this directly in DW Design View just as you would edit any other page content in DW.

You can create a two column structure using Harmony, or Quick Grid Magic, or any other technique you like. Insert you full size image into one column and add the description text in the other column.

Once you are satisfied with the content you can create the remaining content divs by opine the MBX Modify interface and adding more content slides, and then assign the trigger for each just like we did for the first slide.

Posted 10 months ago
wcamp

offline
Member

Thank you very much for detailing the step-by-step process to create MBX "content slides" on an existing photo album that already includes thumbnails.

I don't have Harmony or QGM. I'll try using CSS rules that float text to the right or left of the thumb.

I'll begin now and update you when I've made substantial progress on this TEST page.

Thanks again.

Warren

Posted 10 months ago
wcamp

offline
Member

Hello, again:

I had no difficulty creating and styling the first MBX "content slide" — slide #1 — on my TEST page. Thank you for detailing the steps, from start to finish.

The image in this first "content slide" is intentionally smaller than the full-size image. Beneath it, I provide a "click to enlarge" text hyperlink that opens the full-size image file. Doing it this way, will my MBX approach still be able to effectively prevent the pre-loading of both large files? If not, what do you suggest I do?

This first "content slide" is a horizontal/landscape image so I put the description beneath it. I think it looks fine. Yes?

Because the challenge for me has been to put text on either side of a small, vertical/portrait image, I then attempted to create the next "content slide." It was for the fifth thumbnail: Dürer's engraving that starts the second row. I know to assign slide "5" to that trigger. However, I cannot figure out where to place my cursor to activate the "modify" interface; every attempt of mine breaks the MBX divs into separate pieces that don't render in a browser.

So, where do I position my cursor so I can create the fifth MBX "content slide" so I can see how the vertical/portrait format works with MBX instances.

Warren

Posted 10 months ago
Gerry

offline
PVII Team

The image in this first "content slide" is intentionally smaller than the full-size image. Beneath it, I provide a "click to enlarge" text hyperlink that opens the full-size image file. Doing it this way, will my MBX approach still be able to effectively prevent the pre-loading of both large files? If not, what do you suggest I do?

The semi-full size image in the MBX content slide is still a very large image (1000x756, 283K). You have 29 images to show, using this approach the browser will download all 28 images at page load, 29 x 283K = 11, 078 K, or 11 MB. This will seriously slow down page load. Once again I strongly caution you NOT to use this approach. Use the MBX Image Slide mode to take advantage of the MBX image load handling.

The first content slide that you created can be perfectly duplicated using the MBX Slide Mode, just uncheck the 'Fit' option. The slide will display the same as this content slide, except the full size image will only be downloaded when needed. I cannot stress this enough, work with MBX in Image Slide mode, un-check the Fit option and you will get this same result except it is much more efficient on page load.

This first "content slide" is a horizontal/landscape image so I put the description beneath it. I think it looks fine. Yes?

Yes, it looks fine, however you can get the identical result using the Image Slide mode.

Because the challenge for me has been to put text on either side of a small, vertical/portrait image, I then attempted to create the next "content slide." It was for the fifth thumbnail: Dürer's engraving that starts the second row. I know to assign slide "5" to that trigger. However, I cannot figure out where to place my cursor to activate the "modify" interface; every attempt of mine breaks the MBX divs into separate pieces that don't render in a browser.
So, where do I position my cursor so I can create the fifth MBX "content slide" so I can see how the vertical/portrait format works with MBX instances.

The MBX content slide are created and numbered sequentially. If you want to create slide 5, you will first need to create slides 2 thru 4, and then slide 5. You simply click inside your existing slide 1 content div and open the Modify interface. Next, click the add Content Slide button 4 times to create 4 new slide, the last one will be the 5th slide. Click OK to close the interface. In Design View, you'll now see 4 slides with boilerplate text, the last one will be slide 5. Edit this to suit your needs.

Posted 10 months ago
wcamp

offline
Member

-. . .
4. Click the 'Add Content Slide' button.
. . .

Gerry: I definitely want to follow your cautionary guidance! I'm afraid that I'm still confused.

Previously you instructed me to use the "Add Content Slide" option in the MBX interface. I'd done that when creating the first "content slide" that you saw yesterday and felt that it looked fine. But in your latest e-reply, you wrote, "Use the MBX Image Slide mode to take advantage of the MBX image load handling." Am I to select "Add Image Slide" or "Add Content Slide"? Please clarify.

Regarding your opening sentence that stated that "The semi-full size image in the MBX content slide is still very large," I can easily make that smaller. But before I make it smaller, let me ask how you would accomplish an efficient page-load effect on this photo album page. Here's what I'd attempted to create from the beginning:

Clicking each thumbnail opens a new window/page that shows that image (perhaps slightly larger than the thumbnail) with related text placed beneath or next to that image. The critical element for this artwork album is to enable viewers to click a hyperlink on the MBX "content slide" that enlarges and presents the full-size image showing its artistic details.

What specifically should I do, Gerry, to accomplish the above-stated plan for this album?

Posted 10 months ago
Gerry

offline
PVII Team

Warren, I've been trying to talk/quide/strongly suggest that you do NOT use the MBX Content Slide mode:

A 'Content Slide' in MBX is a slide that contains you own HTML markup:

The system will create a new content DIV, which will appear in Dreamweaver Design View. This DIV will contain placeholder content ready for you to replace with your own. You can edit the content directly in Design View, using Dreamweaver's normal editing features.

In other words, it is a slide that contains your html markup and will display whatever you place into the markup. The MBX 'Content Slide' mode should not be used for displaying images because all of the content in these slide will be downloaded at page load.

You should not use the 'Contact Slide' mode.

After the above you asked me to give you directions on how to setup a Content Slide. I gave you the step by step directions. Again, at your request, definitely not my advice. I have been urging your to not pursue the content slide and/or text to the side of the image, repeatedly (see your other thread).

In the MBX content Slide mode ALL of the images will be downloaded and will adversely affect page load speed. Use the Image Slide mode in MBX and there will be no page load speed issue... page-load efficient.

You are looking at presenting at least 29 images, you already have the 29 thumbnail images on the page, you are considering adding 29 semi-large images in MBX Content Slides onto the page... this will adversely affect your page load speed, with 29 images the page weight is going to add up.

Please follow my advice and use the MBX system for what it was designed to do, present the images in a popup box, with captions and/or descriptions, while no affecting page load speeds. Sometimes what we want visually just will not translate well to the web, this is one of those cases. Use MBX Image Slide mode, do not use the 'Fit' option so that the image and lengthy description can display fully, working well in all browser sizes and all devices.

Once again, do not use the MBX Content Slide mode, instead use the MBX Image Slide mode, with 'Fit' option turned off. You'll get an adequate presentation for all of your images.

Posted 10 months ago
wcamp

offline
Member

Glad that you clarified the appropriate MBX mode to use for my album. I'll delete the 6-step list for "content slide" mode that I had followed. Tomorrow, I'll create a fresh TEST page and work only with MBX's "Image Slide" mode and deselect the "Fit" option.

I'll let you know how well it works, hopefully before the day ends.

Thanks again, Gerry.

Posted 10 months ago
wcamp

offline
Member

I've created a new TEST2 page and entered the first five MBX "image slides" with the "Fit" option deselected.

For no apparent reason, the five slides are extremely narrow. The user guide doesn't suggest how to remedy this. Please tell me what I need to add, remove, or modify.

In addition, please tell me which rule to modify so I can change the slide's background and text colors, as well as font family and sizes. Thank you.

https://www.warrencampdesign.com/peter/peter-masterpieces.pg4TEST2-MBX.php

Warren

Posted 10 months ago
Gerry

offline
PVII Team

There is a reason for the narrow slide, that is the widest your small 'fullsize' image can go, it's only 210px wide. You should be using the full size image:

healingOfTheLameMan_lg.jpg

and then you'll see that you won't need to have the additional link to a separate page for full size image.

To change the background color, this rule at line 244:

.p7MBX-01.light .mbx-slide {
background-color: #FFF;
}

The Caption and Description text color at line 245:

.p7MBX-01.light .mbx-caption,
.p7MBX-01.light .mbx-description { color: #000; }

The font-family and font size is inherited from the page container (the <body>). To set specific font-family and size for the MBX then add this style rule:

.mbx-slide {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 120%;
}

Posted 10 months ago
wcamp

offline
Member

Yep. I've been operating with the "start with the small and click to enlarge" approach. I now know to insert the large image files when creating "image slides." I appreciate the learning experiences you provide.

Thanks for providing the rules that affect the slides' styling. I've created and called a "p7MBX-01.exceptions.css" style sheet (thanks to Sinclair's helpful advisories) and made two rule modifications to it, in addition to creating the new rule that governs the font family.

Now that I believe that I've properly created MBX "image slides" for this TEST2 page, should I be concerned with the margins of the slides? There's a large top margin and no side margins. Do you think that reducing the top margin and adding side margins would be beneficial? Assuming you do, which rule do I adjust?

https://www.warrencampdesign.com/peter/peter-masterpieces.pg4TEST2-MBX.php

Thanks, Gerry.

Posted 10 months ago
Gerry

offline
PVII Team

That's looking pretty good now!

You can adjust the top and side space by adding these two rules to your exception style sheet:

.p7mbx-slide-wrapper {
max-width: 95%;
margin: 0 auto !important;
}

.mbx-slide-box {
margin-top: 30px !important;
}

Posted 10 months ago
wcamp

offline
Member

I thank you, my friend! The slides are now presented well, in my opinion, when viewed on various screen sizes. I don't see a need to tweak any media query settings unless you think I should.

I'll create more "image slides" today. Thanks, again.

Warren

Posted 10 months ago
wcamp

offline
Member

One follow-up question: How do I prevent the MBX interface from deleting spaces I make in DW to separate the numerous list tags?

On this TEST2 page, I'll create thirty-seven different "list" tags with lots of data in each. It makes it easier for me to identify lists when I separate them with a space, as shown in my markup here.

. . .
</div>
<div class="p7mbx_link"><a href="images/peterExorcisesWoman_lg.jpg" target="_blank">St. Peter Exorcises a Young Woman,” copy of original painting by Johann Baptist Zimmermann, c. 1754</a></div>
</li>

<li><a href="images/peterAndJohnHealingCripple3_lg.jpg" class="mbx-image" title="">“St. Peter and St. John Healing the Cripples,” etching and engraving by Parmigianino, c. 1525</a>
<div class="mbx_desc">
. . .

That helpful spacing disappears when I use the MBX interface. This happens even if I simply open, then close the interface.

Can MBX prevent this unwanted deletion of spaces in my markup? Or is this a DW anomaly that cannot be controlled?

https://www.warrencampdesign.com/peter/peter-masterpieces.pg4TEST2-MBX.php

Posted 10 months ago
Gerry

offline
PVII Team

When in Modify mode and you click the OK button the entire html markup for the MBX will be rewritten back to the page, passing through the Code Formatter in Dreamweaver. Unfortunately there is no way around this.

Posted 10 months ago
wcamp

offline
Member

That's disappointing to learn, Gerry. I was hoping that you'd suggest another helpful tweak of your JS file, like the margin modification that you put in your first e-reply on this thread.

Sadly, without being able to visibly separate numerous MBX <li> tags on the Code view of this TEST page, it's taking me a lot of time locating appropriate lists so I can add to or edit their contents.

I won't give up or stop using MBX for this multi-paged photo album. I'll remain patient. ( ; - )

Warren

Posted 9 months ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.