Highlighted

How to insert photos into a text box ?

New Here ,
May 02, 2020

Copy link to clipboard

Copied

I have a long text object. Maybe 4-5 paragraphs with about 10 lines each para. Some images are supposed to come interspersed between the paras. So i created some image frames, loaded them with images and pasted them INTO the text box. It works well and as expected.

 

However when the text box is set to reponsive sizing, the images dont respond along with the text box as one would expect. So only the text starts autowrapping as the text box width narrows, but the images stay the same.

 

Any pointers how this should be handled ?

 

Regards

Robin

Views

1.6K

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

How to insert photos into a text box ?

New Here ,
May 02, 2020

Copy link to clipboard

Copied

I have a long text object. Maybe 4-5 paragraphs with about 10 lines each para. Some images are supposed to come interspersed between the paras. So i created some image frames, loaded them with images and pasted them INTO the text box. It works well and as expected.

 

However when the text box is set to reponsive sizing, the images dont respond along with the text box as one would expect. So only the text starts autowrapping as the text box width narrows, but the images stay the same.

 

Any pointers how this should be handled ?

 

Regards

Robin

Views

1.6K

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
May 02, 2020 0
Adobe Community Professional ,
May 03, 2020

Copy link to clipboard

Copied

Place an image of your choice (CMD+D or STRG-D) onto the canvas (anywhere), copy it (or cut it out - faster - you spare the delete command), delete it, paste it in the spot, you want to have the image appear in your text(box). You do this by doubleclicking in your textbox and search for the cursor - place that cursor in the right spot/place, where you want the image to appear - paste - resize the image - done. Unfortunately, the image itself does not react responsive if you use fluid responsiveness but if you use fixed size of the textbox and use breakpoints and change the size of the textbox, the image stays in place and can be setup with a new size for each breakpoint. 

Guenter from our forum is much more specialized in image and text stuff - if we are lucky he chimes in here and may have some better hints for you. Let´s see.

Using text I always recommend(ed) to use fixed width breakpoints, like this I always did not need to put images inside a textbox. For me it was too unpredictable but I almost never used long-large textboxes anyway, so, …

It is also easier for IBE to have seperated text boxes (in all of my cases) as clients always find ways to make changes in textboxes, images (sizes), that IBE cannot handle for some reason, and finally I have to do it - you´ll have a very unlucky client and an unlucky designer. Nobody wants that.

 

Kind 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...
May 03, 2020 1
New Here ,
May 11, 2020

Copy link to clipboard

Copied

Hi Uwe !

Thanks for your idea. I shall also try the method given below and see.

 

Regards

Robin

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...
May 11, 2020 0
LEGEND ,
May 06, 2020

Copy link to clipboard

Copied

As Uwe said, you can paste images into a text box and the image will flow together with the text.

 

It is true, that these "inline images" unfortunately don’t scale, when the browser window is scaled. The developers worked on this feature, but it couldn’t be finished, because Muse’s "End of Life" was faster. 😞

Nevertheless, there is an elegant workaroud:

Instead of an image, use a slideshow widget with just one image. Configure it without any text components. This construction will work as expected. The image scales together with the text box:

 

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...
May 06, 2020 1
New Here ,
May 11, 2020

Copy link to clipboard

Copied

Hello Gunter !

 

Thanks for this method i will try it immediately. By adding the widget will it make the file size heavier or slower page due to this combination because i need to put 5 images one below the other in the para.

 

Regards

Robin

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...
May 11, 2020 0
LEGEND ,
May 11, 2020

Copy link to clipboard

Copied

Just try! The code certainly is a little "heavier" than using simply images, but I don’t think, there will be a noticeable load time issue for your site’s visitors.

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...
May 11, 2020 0
New Here ,
May 14, 2020

Copy link to clipboard

Copied

I just tried the method, but it didnt work. I tried with basic slideshow, then blank slideshow also. The text para is set to scale width and the breakpoint is also fluid. But the image doesnt scale and it moves out of the para box and off screen while the para text is correctly scaling.

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...
May 14, 2020 0
LEGEND ,
May 14, 2020

Copy link to clipboard

Copied

Unfortunately you are right!.

Evidently this behaviour war changed during the last development periods: I am working with Muse 2018.0. and my workaround works without issues.

In Muse 2018.1.x the behaviour is just as you described it.

So you have to  follow the "old school" workflow:

Place text frames and image frame one beneath the other and make sure, that they don’t overlap.

This definitely works.

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...
May 14, 2020 0
New Here ,
May 14, 2020

Copy link to clipboard

Copied

Ok so just place individual text boxes and images below them in a column but as individual objects.. So as the text boxes expand towards the bottom they PUSH the images also down in a flow ?

 

Regards

Robin

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...
May 14, 2020 0
LEGEND ,
May 14, 2020

Copy link to clipboard

Copied

Yes, they do. Just make sure, that your text boxes and images don't overlap. If they do, Muse can't know, that you want the element to push down/lift up each other.

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...
May 14, 2020 0
New Here ,
May 15, 2020

Copy link to clipboard

Copied

Tried the old school method. Works well. Except its creating a huge empty space at the bottom of the page when we contract the browser width in a test preview. So i hit preview. Everything is ok. The moment you contract the width of the browser, the text starts squeezing and the images also start shrinking (which is correct), but as a side effect there is now a huge blank space in the bottom, so the bottom of the para scrolls off into the top and then huge blank space (basically the void created by the shrinking of the images on the Y axis i think). Hence blank space void is created between the para bottom and actual page bottom.

 

Regards

Robin

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...
May 15, 2020 0
LEGEND ,
May 15, 2020

Copy link to clipboard

Copied

To avoid hours of a frustrating questions and answers game, and because this "problem" may have thousands of reasons, could you please do the following:

Upload your .muse document to Dropbox or a similar file sharing service and post the download link here. Then I will have a closer look.

If you don't want to share your original .muse file, delete all unnecessary elements, use placeholders or create a new Muse document with some text and sample images, which shows, what you are trying to achieve.

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...
May 15, 2020 0
New Here ,
May 20, 2020

Copy link to clipboard

Copied

Hi, i dont have a dropbox account. I shall try creating one. Meanwhile im attaching some pictures here to help explain it better. Plz see the following...During Design Preview 1During Design Preview 1During Design Preview 2During Design Preview 2In Browser 1In Browser 1In Browser 2In Browser 2

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...
May 20, 2020 0
LEGEND ,
May 20, 2020

Copy link to clipboard

Copied

Yes, that is "normal behaviour". Your layout had 2 columns (small image to the left, images and text to the right), and in this case it is quite tricky to keep things in order, because Muse can't know, which of the elements should  push down/lift up which other elements. To solve this issue, it is necessary to have a look at the .muse file.

If you are not experienced in web design it would be much, much easier, if you create a one-columne-design.

By the way: You don't need a Dropbox accout. Your CC subscription contains a file sharing component. Just have a closer look into your CC Desptop app!

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...
May 20, 2020 0
New Here ,
May 20, 2020

Copy link to clipboard

Copied

Hi,

Its all on one column only. Just that grass image is pinned to the left upper corner of browser and the top menu bar pinned to right upper corner of browser. The para is right edge page pinned to enable it to scroll. Few minutes please, ill share the .muse file.

 

Regards

Robin

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...
May 20, 2020 0
New Here ,
May 20, 2020

Copy link to clipboard

Copied

Hi,

Kindly check this link for the muse file.

http://www.filedropper.com/dylocksite_1

 

Regards

Robin

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...
May 20, 2020 0
LEGEND ,
May 20, 2020

Copy link to clipboard

Copied

Nice. But there is no obvious possibility to download your file. You don’t expect us to create an account for this service, do you? 🙂

I’d suggest:

Upload your file, and after that sign out of this service and test the download before posting: try to download the file by yourself …

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...
May 20, 2020 0
New Here ,
May 20, 2020

Copy link to clipboard

Copied

Im able to download from that very same link. Theres no sign in even required. Nothing. I just refreshed. Closed all my pages and downloaded from a different pc and its working. WHy would you have to create an account ???

 

See it first well....It has a big GREY download this file BUTTON. Below that it says sign up etc in PINK thats all optional.

 

I alwys test a download if its working. Twice. Before i share.

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...
May 20, 2020 0
New Here ,
May 20, 2020

Copy link to clipboard

Copied

Heres another link....

https://we.tl/t-nVlnheOBG3

Just click and hit the download button only for all these. Theres no complication.

As you said in a post above...." Unfortunately you are right!. Evidently this behaviour war changed" .... Similar to that you missed something here also and will change your opinion, give it a try. It needs no regn or anything but a click. You dont expect a link which needs no click i hope :)).

 

NOTE : If you remove the images, the para works correctly without this excess space being created. This indicates something to do with the images expansion.

 

Regards

Robin

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...
May 20, 2020 0
LEGEND ,
May 20, 2020

Copy link to clipboard

Copied

All works as expected, and the issues are pure layout issues, no Muse problems.

 

  • First, create a "footer" area, place the footer elements into the footer area and activate the  "Footer" check box in Muse’s upper control strip.
  • Second: Don’t use single text elements as a menu button, use the menu widget instead.
  • Third: Muse’s page height is dynamic. That means choose a small page height. It will resize automatically, if needed. If you use a large page height, the height will not adapt under this limit.
  • Use third party widgets not until your site it nealrly accomished. Third party widget may have unwanted side effects.

Her you find a modified and corrected .muse file:

https://www.dropbox.com/s/i43tivu0awn585j/DyLock%20Site%20Mod.muse?dl=1 

 

Furthermore, I can’t understand, why CC users fiddle around with those third party file services. Why not use CC Files:

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...
May 20, 2020 0