Highlighted

Grey Area added to images in Preview mode but not Design mode

New Here ,
Dec 19, 2017

Copy link to clipboard

Copied

I'm working on a portfolio website. Thumbnails of projects are placed with in a composition widget. Each thumbnail activates a Lightbox slideshow with additional information. Also, when you roll over or activate the thumbnail, the title of each project appears.

This looks all great in the design mode, but when you go to preview mode (either in Muse or in a Browser), Grey rectangles appear below each thumbnail. I can't figure out where these are coming from. Any ideas. Below are some screenshots of what is going on.

Screen shot from Design mode. No grey area under the thumbnails.

Screen shot from Preview mode. Notice the grey space under the thumbnails.

Any idea, why this is happening and how to remove them? Thanks.

Forget all these import (??) versus place, export, upsize proposals.

It is, as I said a simple scaling issue with very deep implications.

But one step after the next:

  1. In the composition trigger you use a fill image. You have to set it „Scale to Fill“ if you want to scale it according to the browser window’s width. (Your setting is „Original Size“, what won’t work in this situation. The scaling trigger clips the image.)
  2. Composition triggers „out or the box“ always scale horizontally, not proportionally. The image fill in contrary scales proportionally. This necessarily causes the grey area at the bottom of the trigger: Container and image content are scaling not synchronously.
  3. Solution: Place an empty image placeholder (the crossed out rectangle tool) into the trigger, using the exact size of the trigger. Since an image placeholder scales proportionally, it forces – thanks to the Muse engineers! – the trigger to scale proportionally as well.
  4. The font in your text box is a system font, what causes the font necessarily being converted to an image during output (Would be better, to use a SVG graphic instead). When a text box is converted to an image, it behaves not like a text box (scaling horizontally, growing vertically) any more, but like an image (= scales proportionally). But: The textbox has no reference element and therefore doesn’t know, in which vertical position it should be placed during scaling. Consequence: The „text“ shifts vertically within the trigger and starts „bleeding“ out at some point.
  5. To solve this, you have to use a transparent „guiding frame" directly above the textbox and group it with the text box. This element „tells“ the text box, where it has to position vertically.

If you respect all these points, your trigger scales exactly, as you expect it to do.

Just have a thorough look at this sample file (a modified version of your file), a d you‘ll see, how it works: https://www.dropbox.com/s/hdwy3xc5uy7wsal/Grey%20Box_Mod.muse?dl=0

There are other viable ways to achieve, what you want – you can delete the image fills and place images into the trigger, for example, but I tried to stay as near as possible to your layout.

Questions? Fell free to ask!

Views

353

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Grey Area added to images in Preview mode but not Design mode

New Here ,
Dec 19, 2017

Copy link to clipboard

Copied

I'm working on a portfolio website. Thumbnails of projects are placed with in a composition widget. Each thumbnail activates a Lightbox slideshow with additional information. Also, when you roll over or activate the thumbnail, the title of each project appears.

This looks all great in the design mode, but when you go to preview mode (either in Muse or in a Browser), Grey rectangles appear below each thumbnail. I can't figure out where these are coming from. Any ideas. Below are some screenshots of what is going on.

Screen shot from Design mode. No grey area under the thumbnails.

Screen shot from Preview mode. Notice the grey space under the thumbnails.

Any idea, why this is happening and how to remove them? Thanks.

Forget all these import (??) versus place, export, upsize proposals.

It is, as I said a simple scaling issue with very deep implications.

But one step after the next:

  1. In the composition trigger you use a fill image. You have to set it „Scale to Fill“ if you want to scale it according to the browser window’s width. (Your setting is „Original Size“, what won’t work in this situation. The scaling trigger clips the image.)
  2. Composition triggers „out or the box“ always scale horizontally, not proportionally. The image fill in contrary scales proportionally. This necessarily causes the grey area at the bottom of the trigger: Container and image content are scaling not synchronously.
  3. Solution: Place an empty image placeholder (the crossed out rectangle tool) into the trigger, using the exact size of the trigger. Since an image placeholder scales proportionally, it forces – thanks to the Muse engineers! – the trigger to scale proportionally as well.
  4. The font in your text box is a system font, what causes the font necessarily being converted to an image during output (Would be better, to use a SVG graphic instead). When a text box is converted to an image, it behaves not like a text box (scaling horizontally, growing vertically) any more, but like an image (= scales proportionally). But: The textbox has no reference element and therefore doesn’t know, in which vertical position it should be placed during scaling. Consequence: The „text“ shifts vertically within the trigger and starts „bleeding“ out at some point.
  5. To solve this, you have to use a transparent „guiding frame" directly above the textbox and group it with the text box. This element „tells“ the text box, where it has to position vertically.

If you respect all these points, your trigger scales exactly, as you expect it to do.

Just have a thorough look at this sample file (a modified version of your file), a d you‘ll see, how it works: https://www.dropbox.com/s/hdwy3xc5uy7wsal/Grey%20Box_Mod.muse?dl=0

There are other viable ways to achieve, what you want – you can delete the image fills and place images into the trigger, for example, but I tried to stay as near as possible to your layout.

Questions? Fell free to ask!

Views

354

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 19, 2017 0
Guide ,
Dec 20, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
LEGEND ,
Dec 20, 2017

Copy link to clipboard

Copied

… if you provide the file: A blank .muse file with only one of these thumbnails is enough! This significantly saves download and analysing time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
Advocate ,
Dec 20, 2017

Copy link to clipboard

Copied

Did you import the images into Muse of did you use the Place method (CTRL+D)?

The latter is preferred.

Are the images being up sized (even my 1px in either direction)?

Make note of one of the images size, Preview Page in Browser, Rt Click on image in browser and choose View Image Info to see if the size is correct. If the image is being resized that info will be shown there.

Another test: Export as HTML (CTRL+E) to a location on your PC file system (drive) then navigate to that location and click on the html file to view in Browser.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
LEGEND ,
Dec 20, 2017

Copy link to clipboard

Copied

Neox99, I fear, that none of your questions leads to a fix of this issue.

I assume, we are dealing with a  scaling issue. But why guessing? There may be many reasons. Lets wait, until we can have a look at the .muse file.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
New Here ,
Dec 20, 2017

Copy link to clipboard

Copied

I got the images into the document through the options on the Fill panel > Image. The images were sized to 400px x 400px.

I'm on a Mac and don't get those options when right clicking.

I also tried the Export to HTML and that cause a totally different issue. The images in the slideshow are now not connected to the thumbnails. Images appear when you click the thumbnail, but they are not the correct images.

Thank you for the responses.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
LEGEND ,
Dec 20, 2017

Copy link to clipboard

Copied

Forget all these import (??) versus place, export, upsize proposals.

It is, as I said a simple scaling issue with very deep implications.

But one step after the next:

  1. In the composition trigger you use a fill image. You have to set it „Scale to Fill“ if you want to scale it according to the browser window’s width. (Your setting is „Original Size“, what won’t work in this situation. The scaling trigger clips the image.)
  2. Composition triggers „out or the box“ always scale horizontally, not proportionally. The image fill in contrary scales proportionally. This necessarily causes the grey area at the bottom of the trigger: Container and image content are scaling not synchronously.
  3. Solution: Place an empty image placeholder (the crossed out rectangle tool) into the trigger, using the exact size of the trigger. Since an image placeholder scales proportionally, it forces – thanks to the Muse engineers! – the trigger to scale proportionally as well.
  4. The font in your text box is a system font, what causes the font necessarily being converted to an image during output (Would be better, to use a SVG graphic instead). When a text box is converted to an image, it behaves not like a text box (scaling horizontally, growing vertically) any more, but like an image (= scales proportionally). But: The textbox has no reference element and therefore doesn’t know, in which vertical position it should be placed during scaling. Consequence: The „text“ shifts vertically within the trigger and starts „bleeding“ out at some point.
  5. To solve this, you have to use a transparent „guiding frame" directly above the textbox and group it with the text box. This element „tells“ the text box, where it has to position vertically.

If you respect all these points, your trigger scales exactly, as you expect it to do.

Just have a thorough look at this sample file (a modified version of your file), a d you‘ll see, how it works: https://www.dropbox.com/s/hdwy3xc5uy7wsal/Grey%20Box_Mod.muse?dl=0

There are other viable ways to achieve, what you want – you can delete the image fills and place images into the trigger, for example, but I tried to stay as near as possible to your layout.

Questions? Fell free to ask!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
Advocate ,
Dec 20, 2017

Copy link to clipboard

Copied

That's twice in one thread you have dissed other's replies.

Maybe we should just stop reading and attempting help here and leave YOU as the only option.
EOC = E nd O f C onversation in case you don't know.

What that means is feel free to come back with any retorts but they will fall on deaf ears.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 1
LEGEND ,
Dec 20, 2017

Copy link to clipboard

Copied

Where in heaven did I diss you? Yes, I had adifferent opinion, but is this an offence? Never. I only tried to  be very clear and unmistakable – hoping, that the initial poster will not be lead in wrong directions, what normally end up in frustration and statements like „Muse is awful, bugs over bugs!“ If you feel, this is „dissing“ please excuse me. It definitely isn’t meant as that.

But coming down to the facts:

  • I have no idea, what you think is the difference between „import“ and „place“. Especially, because Muse doesn’t even have an „Import“ command. Did you mean „pasting“ or „filling“?
  • How should this grey area – present in Preview but not in Muse, have something to do with image pixel sizes? This is clearly an issue, caused by different sizes of the Muse canvas and the browser window, thus causing scaling issues.
  • Do you think, previewing the HTML files in browser has in this very case different results than previewing?

But I think, such a discussion leads to nothing. The issue is nailed and – hopefully – solved.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 1
Adobe Community Professional ,
Dec 20, 2017

Copy link to clipboard

Copied

Maybe Neox "talks" about another thread, but I cannot "see" any dissing either?

Like this Neox, the EOC in this thread for you ?

I recommend to leave this to the thread opener, though.

The example file should be checked clearly and if some questions left ask back again geofa77314729.

Be sure that Günter Heißenbüttel​ answers very patient and knows muse quite good .

Feast of love is quite near, so best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
New Here ,
Dec 20, 2017

Copy link to clipboard

Copied

https://shared-assets.adobe.com/link/46666c77-042e-48e3-44cd-5687020e53f7

Here is the link to "A blank .muse file with only one of these thumbnails".

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2017 0
New Here ,
Dec 23, 2017

Copy link to clipboard

Copied

Thank you for all the help. It was greatly appreciated.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2017 0