pagesize and images overlapping that
January 2, 2016 12:00 AM
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.
Discussion (4)
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
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)
pageDIV.style.clip = "rect(0px, 1480px, 1800px, 0px)";
// to ensure the page is indeed wide enough to not cutoff images
pageDIV.style.width = "1480px";
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! :)
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...
Discussions have been disabled for this post