pagesize and images overlapping that

mnotermans5114 Community Member Posts: 916
A while ago in Lectora Inspire 11 i had a project where images needed to slightly overlap the edges of the pages. L11 didnot have the option of positioning images overlapping the edges, so the designers couldnot set it up like that. I wrote a Javascript that tweened an image to be positioned slightly off, and thus overlapping the Lectora pagesize edges. Worked swell, i could reposition any element to any position i wanted.

Now in Lectora Inspire 16 we can position images overlapping the edges of the pages. But they crop!!!!!
When previewing or publishing the image is cropped. What im wondering now ? Is that intentional ? Because if i position an image on the sides of a page...i actually dont want it to be cropped....
I did try my Javascript... but even then the images get cropped assoon they tween outside the page.


  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Aha, Lectora crops the page indeed when publishing:

    clip: rect(0px, 480px, 1800px, 0px);

    Now to figure out how to set that like i want it, without the need for editing the html
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Always nice when i can solve my own issues :-)
    //  the container in which everything happens when Lectora publishes
    var pageDIV = document.getElementById("pageDIV");
    // clip rect is the CSS that crops the page (top,right,bottom,left) = "rect(0px, 1480px, 1800px, 0px)";
    // to ensure the page is indeed wide enough to not cutoff images = "1480px";
  • wendymiller
    wendymiller Community Member Posts: 244
    Yep, you got it! This is the first time I've heard of someone wanting no clipping to the page, but you obviously have your reasons. Prior to Lectora v12, I was always adding the clipping CSS to the pageDIV! :)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    With Lectora 16 the reason why i dont want images cropped when outside the page becomes obvious for me.
    If you develop/design for multiple devices... and the device your user is watching your elearning on... is wider than your original designed size.... well images that overlap the edges get cropped...and they see it cropped. If you have a endless css background behind it, only emphasizes that its been cropped to some other size...