2 Replies Latest reply on Feb 7, 2015 12:12 PM by dkweithekdi

    Missing GIFs in Adobe Digital Editions only

    dkweithekdi

      I'm exporting from InDesign CC (latest version)  to ePub 3.0.

       

      When I view my file in my other ePub readers, I see everything fine.  The images only go missing in Adobe Digital Editions 4.0.

       

      In that reader, my GIFs only show up if I select CSS Size: Fixed - all other options lead to a blank area where the image should be.  But when I select that option, the image boxes are very small, and the images are not scaled so they are cut off.

       

      The GIFs have already been optimized in PhotoShop for distribution so I prefer the option, "Use Existing Image for Graphics Objects" when I export.  But it doesn't matter if I turn that off - I see the same behavior if I select the "Preserve Appearance from Layout" option instead.

       

      But I don't think the image itself is the problem - I think it's in the InDesign-generated CSS for the tags that surround the image.

       

      If I crack open the ePub file and remove all the DIV tags surrounding the image then repackage the ePub, the image appears in the right place, floating above the text.  It's the right size and it looks great (except that you can't read the text underneath it).

       

      I'm guessing there's an error in the CSS styles that those DIV tags use.  I'm savvy enough to fix the CSS in the ePub file, but I'd like to know what fixes I need to make and if there's a way to adjust the settings in InDesign so that I don't have to do it.

       

      Most of my readers are likely to use iBooks or another reader - I guess I could just warn them NOT to use Adobe Digital Editions. . . but it seems like Adobe would prefer a different solution.

       

      Thanks!

        • 1. Re: Missing GIFs in Adobe Digital Editions only
          dkweithekdi Level 1

          Some additional information:

           

          The problem lies in the CSS style _idContainer003

           

          which has these attributes:

           

            display:inline-block;

            overflow:hidden;

            width:42.61%;

           

          When I remove that DIV tag from the ePub file, the image displays perfectly.  When I change the Width attribute to 100% from 42.61% the image displays just fine.

           

          The image itself is not sized.

           

          I can make the change to the CSS in the final file,  I guess but I'm wondering if anyone else has the same problem.

           

          Does anyone know where that DIV tag comes from?

          • 2. Re: Missing GIFs in Adobe Digital Editions only
            dkweithekdi Level 1

            Figured this out on my own but leaving it here because it was such a FRUSTRATING problem!

             

            My image's object frame was not sized at 100% across the entire width of the text frame where the image was anchored.

             

            I don't know why the image disappeared when it wasn't scaled, but I know that when I fixed the width attribute for the container in CSS, it worked.  Then I figured out that the value of the width attribute was getting set by the size of the frame.  When I resized it to be 100% it worked.

             

            My key takeaway from all of this:

             

            If your images are not showing up in your ePub files after exporting from InDesign, first crack open the ePUB file and remove the surrounding CSS. Then repackage as an ePub.

             

            If the image displays, the problem is in the CSS. 

             

            Experiment with the original CSS to find the right settings that will eliminate the problem. 

             

            Finally, see if it's possible to work with InDesign to get the right settings to appear when it exports.  If not, at least you just have to change the CSS file, instead of changing every individual IMG tag in the XHTML files.