Mission

"It is the mission of Harwood Union High School to provide an educational and creative environment in which every person is valued as an individual, challenged as a learner and inspired to contribute to a democratic society. As a professional learning organization of all academic departments, we are prepared to work together in order to provide a unique and personalized learning experience for all students."


@HarwoodAD


- Dec 31 1969 7:00 PM

@rexa_harwood


- Dec 31 1969 7:00 PM

HU WebApp Test Page: Image Slider Test 1

 

With a dynamic variable size container for the image slider - different size images behave very differently.

  • Why does a 3:4 aspect ratio image of 300 x 400 enlarge so big? but a 3:4 image of 1492 x 1936 scales down to an acceptable height (though it is then auto cropped)?
  • With a variable container size, the text you are reading will move up and down which is very annoying.
  • Even if we get close very close to a standardized crop size but are off by a few pixels, those few pixels will still cause the container to resize and the text to move.
  • It cannot be expected that everyone who may eventually upload pictures into the various sliders on the site will know how to crop images to exact specifications.
  • We cannot expect an auto crop/center to give us an acceptable image (as is seen in the examples above).

The slider container needs to be set at a fixed aspect ratio relative to the responsive layout design.

An aspect ratio of 5:2 would be good.

Images inside the container should auto scale to the container size (NOT the container scales to the image size).

  • Images taller than the current height should scale to the current height and center horizontally
  • Images wider than the current width should scale to the current width and center vertically
  • Images of the same aspect ratio as the image container will scale to fit
  • Images smaller than the cuurent height and/or width should display at actual size
  • Example at CSSPlay of a responsive slider that resizes and centers the images: http://www.cssplay.co.uk/cssplay-swipe-me-inline.html select the Lady in Black photo set for both landscape & portrait images.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae venenatis massa, ut tempor odio. Cras at maximus mi. Donec felis velit, efficitur eget tortor eu, ullamcorper fermentum risus. Praesent sit amet varius dolor, id vehicula neque. Ut vitae mauris nec urna rutrum condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut interdum leo sem, at imperdiet orci rhoncus sit amet. Etiam eu cursus dui, vel elementum nulla. Nullam arcu odio, consectetur quis risus in, mattis iaculis ex. Integer in diam nec tortor venenatis suscipit quis in sapien. Quisque a est ut diam pulvinar elementum. Ut rutrum tempus ornare. Sed ipsum massa, vestibulum a malesuada eu, elementum nec arcu. Vestibulum cursus mattis mi, eget euismod nisi laoreet quis.


Sed ut venenatis ex, vel rutrum tortor. Aliquam odio sapien, dignissim vel massa at, eleifend ornare turpis. Aliquam erat volutpat. Nullam aliquet maximus eros, non blandit augue volutpat ac. Nunc iaculis, libero vitae aliquet tristique, libero lacus finibus velit, vel ullamcorper enim elit ac libero. Mauris accumsan eros lectus, sed elementum orci congue auctor. Praesent tincidunt ipsum tellus, sed aliquam tellus varius eget. Ut in enim ut ligula semper finibus ac consectetur nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ac vestibulum ligula, sed porttitor nibh. Aenean cursus eget mi in sollicitudin. Mauris blandit eros sed finibus imperdiet. Integer tempor neque eget nibh egestas feugiat. Praesent eu pretium tortor, eleifend commodo dui. Vestibulum blandit, mi et posuere venenatis, felis neque ornare ante, ac vehicula felis nisl quis tortor. Nunc ut venenatis leo, eget ultrices purus. Suspendisse tempor, enim a bibendum consequat, quam ex molestie lectus, nec consectetur quam orci ac urna. Phasellus efficitur convallis lacus eu convallis. Proin auctor orci ut blandit vulputate. Proin auctor, turpis nec bibendum iaculis, velit justo malesuada arcu, vel auctor tortor risus at felis.

Sed placerat et magna id fringilla. Sed mattis blandit est et rhoncus. Vivamus pellentesque urna orci, vel lacinia mauris pulvinar laoreet. Mauris aliquet, dui ut consectetur maximus, nibh ex semper turpis, vitae gravida lectus ligula non turpis. Sed vulputate neque est, nec dictum urna mollis et. Duis ligula sapien, finibus eu feugiat ac, ornare sed magna. Proin suscipit fringilla elementum. In turpis urna, tempor sed dictum iaculis, mattis non ipsum. Aenean quis accumsan elit, fringilla tempus ipsum. Nunc tincidunt tincidunt cursus. Maecenas cursus lectus auctor ligula iaculis mattis. Nunc varius urna vitae velit egestas sagittis.

 

Morbi quis elit ante. Sed imperdiet vel dui consequat aliquam. Nulla iaculis dictum felis, sed scelerisque est molestie eu. Suspendisse potenti. Phasellus sit amet nisi ligula. Nam tincidunt tortor tellus, dignissim rhoncus est luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam et viverra sem, et semper sapien. Duis imperdiet libero sit amet maximus dictum. Nunc fermentum mi ut dapibus tincidunt. Aenean tristique dolor sapien, pellentesque ultrices justo venenatis id.