Post

6 followers Follow
0
Avatar

Different layout vertical and horizontal

Okey here's the problem: I want static text in my magazine so I have put the text in the B-layer and ticked of the button "no A layer" to get rid of the scrollbars. I have stretched the text box to the entire height of the iPads vertical layout. This looks very nice, but then when I hold the iPad horizontally, obviously, some of the text disappears at the bottom.

Is there a way design a different layout for the horizontal view than the vertical? For instance I want the text to be 2 coloumns when horizontal and just 1 vertical.

Help is much appreciated!

Aleksander Erichsen Answered

Please sign in to leave a comment.

22 comments

0
Avatar

Hi  Aleksander - 

There are a few ways to achieve what you're trying to do:

  1. You could just put the text on the A layer only, so it will scroll up if it stretches off the screen. And if you set pinning on the box, it will adjust when the user turns the device so the top of the text is always where you want it to be.

  2. If you left it B-layer only, you could format the text so it only fills the visible space (the square in the middle) and put some other page elements in the margin space on the sides and top/bottom. If you look at Outside Magazine, this is what they do for all their long feature stories. See images attached.

  3. You could turn the text into a scrolling HTML box, in which you either turn the text into an image or treat it as pure text. The latter gives you less control over fonts and styling as it's just like building a web page. But if you do that, you can also have the window resize when you turn the device so it's always full width. (If you know javascript, you can even put the text into columns - see js script attached). Here's our page on how to do that: http://support.magplus.com/entries/20867562-tips-tricks-scrolling-text-in-box, and I've attached a couple of example files here. You can just modify the .html files in this. 

  4. Finally it is possible to load entirely different layouts on rotation if you treat the whole page as an HTML doc. Here's our page on doing that: http://support.magplus.com/entries/21083136-new-image-on-rotate-resize-on-rotate 

Mike Haney 0 votes
0
Avatar

Hi! Thanks for a good answers!

I tried out your tip number 4. Unfortunatly I'm not good at html or javascript. But I found out I could just use the file you provided me, put my own images in the image folder and change the name of the images in the html file.

It is working, but what happens is that the iPad uses 5 seconds before it switches image when I turn the device. Why is this and what can I do to make it switch imidietly after I turn the device?

Aleksander Erichsen 0 votes
0
Avatar

Also I would like to add here another problem.

While using the script of tip 4, when I rotate the iPad on portrait, i get some "dummy" horizontal and vertical blank scrolling...

I have placed the html block on the B-layer...

Any help here?

Thank you!

Antigone Grammeni 0 votes
0
Avatar

Hi - 

What do you mean by "dummy" scrolling? Did you modify the html doc with your own images for vertical and hortizontal? If you like, post screenshots of what you're seeing.

Mike 0 votes
0
Avatar

Mike, I'm having the same problem as Antigone. When I am viewing in portrait, my vertical image fits on the screen, but there is white space to the right and below my image that you can scroll to. I want the image to  be fixed. This doesn't seem to be a problem in landscape view.

Kevin DiCesare 0 votes
0
Avatar

Hi Kevin - 

If you're using the HTML solution proposed above, the key is to make sure the image you're referencing for the vertical view is the same size as the screen - if it's larger, you will be able to scroll to it. Is that the issue? If not, please post screenshots of what you're seeing or send on the file and we can take a look.

Mike 0 votes
0
Avatar

I'm attaching a few screenshots and my HTML files. The vertical image is the same size as the screen, but as you can see, when I scroll to the right or down, there is white space that appears around the image instead of just going to the next page. The image I am referencing does not have white space built in to it.

I was also having the same problem when viewing the Resize on Rotate demo with the brown and red screens. Again, this is only a problem in the vertical view. Landscape seems ok.

Kevin DiCesare 0 votes
0
Avatar

Ah, I think I know what you're seeing. That's because the "page" size in Mag+ is the full width of the iPad, so on a standard 1024 by 1024 - that's what you're seeing on page turn - the extra area that's only visible in the horizontal orientation. The way to get around that is to make sure your image fills the full 1024 square space (or on retina, 2048).

Mike 0 votes
0
Avatar

Well, yes, but ideally I don't want it to scroll at all. Is there any way around this?

Kevin DiCesare 0 votes
0
Avatar

Oh, sorry, I might have misunderstood. If the image is the right size inside the HTML box, it shouldn't scroll. Can you send me the ID file so I can see how it's set up?

Mike 0 votes
0
Avatar

Ah - I see now. I'm totally perplexed - it shouldn't be doing that. Let me run this by some other folks here and I'll get back to you tomorrow.

Mike 0 votes
0
Avatar

Hi Kevin,

It seems as though this problem was solved by removing the "width" tab in the script. Just replace the .html file with this one and it should work. Let me know if it doesn't!

I used the one in "new image on rotate copy" folder

 

Anders Odevik 0 votes
0
Avatar

This seems to be a major problem with Mag+ if you have to write html to create alternate vertical and horizontal layouts where elements are resized or repositioned without using pinning. Adobe DPS allows you to create completely different vertical and horizontal layouts that you see when you flip your iPad. This is such a basic requirement for designers that it makes creating good looking vertical and horizontal layouts very difficult.

Am I missing something? Is it possible in mag+ to easily create 2 different vertical and horizontal layouts without using pinning or html?

Joe Bartos 0 votes
0
Avatar

Hi Joe - 

We've got a solution in development right now that will allow you to create two completely different layouts for horizontal and vertical in InDesign—we are aiming to have it in the next release.

Right now, the solutions are to use pinning or HTML. You don't have to write the HTML cold - there are sample documents here on support and you just fill in the image names. But it's a workaround, to be sure. The difference between us and Adobe is that, unless you're using CS6 and wrestling with Liquid Layout (which is just a complicated version of pinning), DPS requires you to do two layouts for different orientations. We chose early on to instead focus on allowing people to do one layout that works in each as a starting place, since it is a faster, easier way for staffs with limited time and resources to create the digital publication. But as people are getting more creative with the tools, we definitely recognize there are cases where you want two different layouts, so we're excited to introduce it in the next couple of months.

For what it's worth, we've done user testing on this feature over the past couple of years and found when users encountered a layout that presented something completely different when they turned the device (common in digital ads early on), they would then think they had to do it on every page to see what they were missing and quickly grew frustrated. Of course every case is different, but something to keep in mind.

Mike 0 votes
0
Avatar

Good to hear that you are adding those features. A few more questions:

I'm looking to add scrollable text to a page, but can't find a link to

dl.dropbox.com/u/2175573/Cars.html.zip

Your web page says there's a link but there's not.

Can you help? Also, can I link to an Illustrator file for scrolling or only a photoshop file?

Also, I'm trying to add a slide show I created in the feature builder, but there's no instructions about what to do with the slide file that downloads from the feature builder. Where does the html file go? Where do the images go? Do I just draw a box on my page that links to the html file?

Joe Bartos 0 votes
0
Avatar

Hey Joe - 

That URL is the link - if you just click that URL there dl.dropbox.com/u/2175573/Cars.html.zip, it will download that .zip file to your downloads folder. 

When you do the scrolling text in a box, you're placing an image file in a browser window (that's what an HTML box in Mag+ is), so you can just any image file that a browser can read, but for file size we recommend .jpg or .png.

To add the HTML file in your layout, you just draw a box, and set the Object type as HTML, then point to the .html file that was downloaded from the Feature Builder. Here's a video: http://www.magplus.com/video/tutorial-adding-html-elements-to-mag/

And here's a text tutorial: http://support.magplus.com/entries/20817091-adding-html-objects-into-your-layout

Mike 0 votes
0
Avatar

Dear Sir,

I want to have two different layouts: portret and landscape.

I tried "pinninig", but it is not quite that.

I tried with HTML: portret - it works, but the landscape - no.

I searched on the internet, I found other scripts that works in browser

http://www.thecssninja.com/demo/css_chameleon/

but it's always the same problem with Mag +: the portret can't be replaced by the landscape.

I'm working on Acer Tab A500 Icnonia 1280x800 android.

Please help me solve this problem.

Serguei 0 votes
0
Avatar

Thanks for your prompt reply,

I was having problems opening the file in text edit, but I downloaded Textwrangler and was able to edit the files.

Another problem is preventing me from reviewing the results. All of a sudden none of my articles which I could previously review will push through. I keep getting error #2038 message. Perhaps one of the files is bad, so I'd like to remove them one by one from the Mag+ production window list to eliminate the problem, but I can't figure out how to delete articles. Perhaps I should create a fresh publication?

Please advise--I am trying to show my pages to a client today to get a job designing a digi-mag in Mag+ but now none of my articles can be shared, even though I was able to review them yesterday. I've attached the error message I keep getting when I try to push an article to review on my iPad.

Joe Bartos 0 votes
0
Avatar

I fixed the error #2038--it crops up occasionally, but tweaking the files or reimporting elements seems to fix it.

I reviewed your video and text tutorials to make sure that I followed all the steps. I created a slide show in feature builder, put the downloaded folder into my magazine folder, created a picture box as an html object and linked it to the slideshow html. When reviewing the article on my iPad, the slide show displays, but does not play beyond the first frame--in other words, no functionality. Also, the slide show isn't scaling to the size of the box I put it in.

Similarly with the scrollable tex, I downloaded the html file you provided (cars.html) and changed the code to my new ,png name and dimensions. I placed the new html file in a folder in the verticals folder in my magazine folder, with the .png file and the .html file in their own separate folder. I then created a picture box as an html object linked to that scrolling text .html file. Again, when reviewing the article on my iPad, the scrollable text displays, but does not scroll left or right--in other words, no functionality. Also the scrollable text is extremely faint--I flattened the .png file. Should I have left the .png file with a vector layer for crispness?

I have attached screen shots of the file structure of the folders and the settings and importing of files in InDesign for you to review if necessary. Please let me know if I have set something up wrong. Putting the files outside the vertical folder and relinking made no difference.

Thanks,

Joe

Joe Bartos 0 votes
0
Avatar

Solved this problem, but I'm having problems with slideshows and scrollable text--I posted another set of comments regarding that.

Joe Bartos 0 votes
0
Avatar

OK, i figured out my html issue--I had to check the no A layer box to get the slide show and scrollable text to work. I didn't see that mentioned on the video or text tutorial, but it's that little extra step that made the html fundctional.

Joe Bartos 0 votes