iBooksAuthor-fullscreen.jpg

iBooks Author – Fullscreen images

Davide Barranca — 

IBooksAuthor fullscreen One of the most interesting yet obvious features of iBooks is the possibility to make an image to pop up fullscreen, so that any small illustration may be appreciated as big as the iPad display allows – and even more, zooming in. Alas, there are at least three ways to do this in iBooks Author, each one with its own drawbacks: because fullscreen and borderless aren’t synonyms.

IBooksAuthor - Insert Image

Images

You’ve probably noticed that there’s no menu item for Insert – Image. You’re allowed to drag and drop a JPG or PNG (if the transparency matters to you) either from the Finder or the Media panel, or Choose… one (Command Shift V). Just like in Pages, you can resize it, move it, etc. Yet the picture won’t allow any kind of zoom/pinch: it will be a static image, merged within the background, when exported to the iPad. Users may tap or double tap on it without any effect. In order to add interactivity, the image has to be turned into a Widget.

Image Widget

Inspector - WidgetBack in iBooks Author, select your image and open the Widget tab in the Inspector (if the Inspector is not visible as a floating palette, click on the white “i” on the blue circle icon, which is in the Toolbar).

Check either the Title or the Caption checkbox (or both) to transform the Image into an Image Widget. If you are willing to, you may Label the Title via its own drop-down menu and choose from a long list the right definition (Diagram, Figure, Gallery, Illustration, Image, Interactive, Movie, Review), enabling the automatic numbering (Fig 1.1 for instance).

If you’re not interesting in having a Title or a Caption, just delete the text in the editor and leave them blank. Mind you, the Label isn’t related to the kind of widget (you may have an Image Widget labeled Movie and everything will be ok anyway)

InspectorFullscreen

The Interaction tab (just besides the Layout one) shows a promising Full-screen only checkbox. Each and every tutorial or post I’ve read suggest you to check it: do it, it makes no difference at all. Actually I’ve not understood what is it for, since it appears to have no effect in the exported iBook.

On the iPad the image will pop up fullscreen when double-tapped:

IBooksAuthor semiFullscreen

Yet, you see that while the image is fullscreen, it’s not borderless. Actually, if for some reason you don’t want your image to be rescaled in any way, the maximum dimension it will have when displayed fullscreen are 2008 x 1319 px. A border of 20 px each side is always kept, and the image is put on a white background. I haven’t found a way to change its color yet.

Gallery widget

An actual fullscreen image can be obtained via the Gallery widget. Click on the Widget button on the toolbar and select Gallery, or from the menu Insert – Widget – Gallery. It’s a collection of pictures with one placeholder within the text (thumbnails for the other images are optional), that you can swipe with one finger either normal size or fullscreen. Images share the same title, while customized captions are optional. Sounds great right? You may build a Gallery with one image only, this is how it looks like (a true borderless fullscreen!)

IBooksAuthor GalleryFullscreen

One tap on the image and both Title and Caption will disappear. So what’s wrong with the Gallery widget?

IBooksAuthor GalleryWidgetNot the fact that the title is Gallery even if it contains just one image (it can be changed via the Label drop-down menu). The screenshot at the left is from iBooks Author, and shows two grayed out arrows that are for navigating the pictures.

They don’t appear on the iPad if the Gallery contains a single image, yet the whole widget ends up having a wasted, empty, extra white space at the bottom that ruins the overall look of the page. At least to me, and I’ve got to live with me.

So far, this is the best solution to display a borderless fullscreen image with optional title and caption, but with one design drawback on the book page.

Interactive Image widget

This one is for zooming the image into predefined hot-spots, that usually contains textual captions: just like you can build an Gallery with a single image, you’re allowed to add an Interactive Image widget without any extra view or hot-spot. So add the widget and delete the views in the Widget tab of the Inspector panel. This is the fullscreen outcome:

IBooksAuthor InteractiveImage

It shows no title and no caption – that may be useful to have.

IBooksAuthor InteractiveImageProblem

Yet the biggest issue to me is that, in iBooks Author, it’s almost impossible to make the small image to fit the widget’s box (tweaking the zoom), avoiding the ugly white bar to appear above and below the image. With the same picture I’ve been able to do it successfully once, then in order to grab a screenshot for this blogpost, there’s no way I could do it again. As a suggestion, remember to click the blue Set View button, otherwise the widget will zoom the image back to its default value.

I’ve been playing with iBooks Author for few days, and I admit it’s a beautiful piece of software, being at the version 1.1. It has a lot of bugs: the most annoying one, in my opinion, is the broken media placeholder (UPDATE: in order to successfully transform a picture/movie within a master page into a placeholder you must select it, then 1) Format – Advanced – Define as Media Placeholder. 2) From the Inspector panel, select the Layout inspector and below Layout Object select the Editable on pages using this layout checkbox. If you forget this checkbox, the placeholder won’t work).

I hope future releases will fix the issues, and above all, I hope we’ll see point updates to appear frequently – for iBooks Author is truly an amazing software!

 

[The image is courtesy Roberto Bigano]

Print Friendly
Share

18 responses to iBooks Author – Fullscreen images

  1. Hello and thank you for sharing! I managed to pull the outer points of the gallery widget to display all of an image, without cutting.
    Do you have experience with the video widget? it would be better to turn the fullscreen mode of, sometimes. in case you place low res video, that simply should play in the current size…

  2. Hi,

    Thanks for the info. I am using the gallery widget and some of my images have black in them. When the image goes against the gallery widget’s black background, the black in my images does not appear. It blends into the black background. Do you know how I can fix this?
    Thank you,
    Shana

    • Hi ShanaS
      I have the same issue with black background in the gallery widget when I place tranparent png images. When we touch to see the image full screen the transparent part of the image let see a black background instead of the gallery background.
      Did you find any solution?
      Thanks

  3. When I try to insert an image and set it up to change to full screen per your instructions, the page seems to switch to full screen mode when I tap the picture, but the picture does not increase in size. I end up with the same size picture and large white borders around it. I don’t know if you’re willing to make suggestions, but I could sure use some. I had everything working in 4 volumes of a picture intensive lab manual with the previous version of IBA, but when I switched to IBA 2.0 everything went to crap. I’m not sure what the problem is.

  4. Hello – I found this info helpful – however I”m still having trouble trying to use the image widget like I’d like to. I simply want to put an image widget on one of my pages that is represented by an icon or graphic – when clicked it maximizes and displays the whole image. So – I want the reader to click on a graphic and then I want it to open an image. This seems super simple – but I”m unable to figure out how to do this! Any help is appreciated.

Trackbacks and Pingbacks:

  1. Alles wat je altijd al over iAuthor wilde weten…. » ICT & Onderwijs BLOG - April 18, 2012

    […] twee pagina’s gaan alleen over afbeeldingen: #1 en #2, vooral handig als je daarmee in de knoop […]

  2. ServicePro Cancun | iBooks Author: Métodos para colocar imágenes a pantalla completa, por Davide Barranca - April 20, 2012

    […] Traducido del blog de Davide Barranca […]

  3. iBooks Author – Fullscreen images | Davide Barranca | iBooks & iBooks Author | Scoop.it - April 26, 2012

    […] http://www.davidebarranca.com – Today, 8:16 PM […]

  4. iBooks Author – Fullscreen images | Davide Barranca | Flat Classroom® Coordinator | Scoop.it - May 4, 2012

    […] http://www.davidebarranca.com – Today, 1:24 PM […]

  5. IT-Блог || Сломаные заполнители в iBooks - May 6, 2012

    […] по тегу «iBooks» в pinboard, наткнулся на статью о том, как получить действительно полноэкранное изображение. Без лишних рамок, заголовков и описаний. Внезапно, в […]

  6. iBooks Author – Fullscreen images | Davide Barranca | Curtin iPad User Group | Scoop.it - May 24, 2012

    […] http://www.davidebarranca.com – Today, 5:33 PM […]

  7. iBooks Author Resources (You’ll Want to Bookmark These) « iBooks Author Templates | Blog - January 9, 2013

    […] a blog post detailing how you can add a full screen image to your […]

  8. Proper Image Sizes and Formats | UD iBooks Authors - January 11, 2013

    […] Info and hints about using full screen images: http://www.davidebarranca.com/2012/04/ibooks-author-fullscreen-images/  […]

  9. Formatting images for iBooks Author | - May 7, 2013

    […] can find more information on full screen images for iBooks Author in this blog post by Davide Barranca. For you book cover, the following post provides a few design tips based on my […]

  10. Matthew Hollett » blog » An Artist’s Book in iBooks Author - September 8, 2013

    […] it very useful to read other people’s tips about digital self-publishing and working with iBooks, so I decided to write about my own experience. Here are my notes about using iBooks Author 2.0 to […]

  11. iBooks Author Resources (You’ll Want to Bookmark These) | iBooks Author Templates | Blog - February 7, 2014

    […] a blog post detailing how you can add a full screen image to your […]

  12. 8 Hints from My Experience Using iBooks Author Software | Fleeting Architecture - April 30, 2014

    […] book. But I couldn’t get it to work, except only occasionally. So I went to the web. There is one wonderful post by Davide Barranca about making full screen images in Author that I consulted again and […]