Resizing Image and text wrapping in Frame within Muse

[nermie]

Does anyone know how to insert an image into a frame in Muse and then be able to apply resizing to that frame and the image within it. I also need to have text wrapping apply around that image as well.

My objective is to have the page looking ok when resized down  when viewed from a phone or iPad. At present I have some images on some pages that are not resizing and/or the text is not displaying correctly.

Thanks

[Günter Heißenbüttel]

I answered jn your other thread.

What you are looking for here, would be nothing but a poor workaround.

But if you want:

Images copied into the text flow don‘t respond responsively.

If you want this, don‘t place an image, but a one-image-slideshow into the text frame. This will work responsively.

Using the „Wrap“ panel, you can apply textwrapping to this inline image.

[nermie]

I think i have followed your advice in the other thread. I have grouped the caption text frame and the image and can now put them in the text flow and have text wrapping on the one object. However, I cannot seem to be able to access the resizing of any of the images inserted into the text flow, including the grouped objects. I get a lock icon next to the resize menu option. There must be a way to dynamically resize the images when the browser window changes or does the text boxes have to contain no inserted images and the images  are placed in their own seperate frames?

[nermie]

Further to my previous reply, I have noticed something else strange that I do not understand. On one of my pages, although the resize images is locked out on the menu, when I preview the page and change the browser view, all the images in the page adjust their size with the text to dispaly ok at various browser views. Yet when I look at the next page, which seems to be identical in every way when I look at in Muse, the images do not adjust their size when previewed in the browser, only the text changes. The images do not change their size at all.

[Günter Heißenbüttel]

It is quite heavy to answer in 2 threads, which belong together!

You didn’t read my reply exactly! I told you, that inline images don’t react responsively. but inline slide shows do. So use a inline slide show with only one image, if you want to.

But I also said: Normally, there normally is no need to put images inline into text only to get a consistent responsive behaviour.

Please read my answer to your question in this thread and give us the screenshot, I requested: https://forums.adobe.com/thread/2454894​

Here a small screencast showing an one image slideshow, placed inline and a „normal“ image with text below:

If your image/text combination works differently, we need more information!

[nermie]

With respect Gunter, perhaps you also may not have read my responses exactly.

I did try to follow the instructions inFix a button on photo. this link but they were not very clear. For example the text says that the "guiding frame" sitting behind the image SHOULD NOT overlap and cover the accompanying text box. Yet the screenshot appears to show exactly the opposite. where the "frame" extends beyond the lower boundary of the image and covers the text box as well. However I achieved the result I was seeking by not using a "guiding frame" but grouping the Image and the caption text box into a grouped item which was then pasted into the Text box and formatted with Wrap.

On this page: www.gregoryhansenwriter.com/novel.html   The text and images (including those with captions) all scale size with adjustments to browser size. These images are all marked as inline:normal or image frame:normal.

On this page www.gregoryhansenwriter.com/backstory.html all the images are similar, i.e they are maked as inline:normal but they DO Not rescale their size when the browser view is adjusted. They behave differently and I would like to know why.

In your response above, you have mentioned an issue with Inline images but not really explained what that issue is. I also note that you said not to place an image into text. I did not use place as I  had read elsewhere that place has problems within Muse and that to use cut and paste instead. This is what I have done, pasted images into the text flow.  Whilst I read your suggestion of using a 1 image inline slide show in every instance where I have an image, this is not appealing and frankly seems to be a complicated method for what should be basic formatting. I know this method is not necessary as I have the result I wanted on one page, but not the other. (which is the mystery).

Lastly I am still looking for an answer as to why the resizing option dropdown on the menu shows a lock and cannot be used on images and grouped items.

Others are welcome to contribute with answers or opinions as well.

[fotoroeder]

The text on your first example simply is no text. Try to mark it like text. All this in one image.

Your second example leads to this:

For images with text I recommend to use fixed width breakpoints instead of fluid width breakpoints.

Uwe

[nermie]

Not sure why others are seeing no text on first  link page.

perhaps try www.gregoryhansenwriter.com

and then try following the navigation bar from the novel page (1st link) and the backstory page (2nd link).

when I try the links, they work fine, seeing the pages as normal, with text and images.

[fotoroeder]

Try to do this on the first NOVEL link:

You won`t be able to mark the text. That`s the trueth.

I keep with my recommendation to use fixed width breakpoints with images and text as I don`t see the necessity of fluid responsiveness:

You have much better control about the appearance, trust me.

Best Regards,

Uwe

[nermie]

Thanks

[ankushr40215001]

Hey nermi

to summarize the whole conversation above, in short, Inline items do not support responsive width/height, but you can give them different sizes at different breakpoints.

So, as you resize the browser and the responsive width text frame grows narrower, you can create a new breakpoint wherever the inline image appears too large and resize it manually.

Not as convenient as having the image resize responsively, but may be a workaround for now.

Please note that the link you shared stating as working - www.gregoryhansenwriter.com/novel.html is actually exported whole as an image.

Therefore you are seeing a responsive capability on it!

Hope I am able to make it clear.

Regards,

Ankush

[Günter Heißenbüttel]

You are right, ankushr40215001 — with one exception: Slideshows, placed as an inline element, support responsive width and height. If you use only one image in a slideshow and check off the control elements and the caption, you have a responsive image within a text frame

[ankushr40215001]

Correct we do have some plans to make all the inline items responsive and hence started with slideshow widgets.

However as said they are on plan, not sure when would it get implemented.

Regards,

Ankush

[nermie]

Ankush,

Thank you for your insight, especially the part about the page being exported as a whole image and therefore why it is behaving differently from the other page. This was a mystery and your explanation makes sense.

To help finish resolving this can you tell me how, in Muse, the setting/s that would make one page export as a single image and a similar page export differently. What should I be looking for as, superficially, they seem to be identical (apart from content),

[Günter Heißenbüttel · Accepted solution]

This is a complete misunderstanding. You can force Muse to export text frames as an image by using system fonts (not standard fonts or web fonts). Read my answer 4 here to see, why and how this may be done by (ab)using a Muse feature: https://forums.adobe.com/thread/2357163

Be aware, that the use of system fonts is a real layout fault, because the text won’t be crisp and sharp any more, can‘t be searched by the user, has bad effects in respect to being listed in search engines (SEO), and increases the site‘s loading time considerably. One more unwanted side effect: The „text“ will be scaled down and won’t be readable and more on mobile devices, when  the page layout is responsive.

Exporting a complete page (not a single text frame) as an image from Muse isn‘t possible at all, and is a complete „NoGo“ in web design.

The example page, you have linked, is done in a different way: Just as I already told you: If you want something like that, create such a page in Microsoft Word, in InDesign or a text application of your choice and export this page as an image (or a PDF, wich you can convert to an image in Photoshop). This image can be placed in Muse, and it will behave the way, your linked example does.

But, as I already said: This is baddest possible practice in web design.

[Günter Heißenbüttel]

I don’t understand, what you are saying in your first annotation. Of course all is completely clear!

• In the back: the image
• In front of the image: the button
• Over the button a a empty image frame (for visibility reasons colorized) spreading from the top of the background image to the upper edge of the button
• button and transparent image frame: grouped.

Really don’t know, what could be clearer! The thread opener at least understood it quite correctly!

Your second annotation:

The page, you linked, is nothing but a complete, pagewide image . Try to select the text and you will see! Not a that good example, don’t you think? If you want this, create your page in Word, InDesign or something like this, export it as an image,place it in Muse and you are done! But, believe me, there is no problem to build this sort of layout correctly with Muse! See my link below.

Your third annotation:

What you read somewhere about placing and/or pasting is complete rubbish! The opposite is true: A designer tries to avoid pasting images into a layout wherever possible. Muse can work with placed, pasted and filled images quite well, believe me. But that is a different subject.

Perhaps this file helps to understand the approach: https://www.dropbox.com/s/ny199s4rp2xa2z4/text-flow.muse?dl=0