Gallery 3

“use strict”;

var positionImage = function positionImage(imageEl) {
var imageDimensions = imageEl.dataset.imageDimensions.split(‘x’);
var originalWidth = imageDimensions[0];
var originalHeight = imageDimensions[1];
var focalPoint = imageEl.dataset.imageFocalPoint.split(‘,’);
var focalPointX = focalPoint[0];
var focalPointY = focalPoint[1];
var parentNode = imageEl.parentNode;

var scale = function () {
var imageRatio = originalWidth / originalHeight;
var parentClientSize = {
height: parentNode.clientHeight,
width: parentNode.clientWidth
};
var parentRatio = parentClientSize.width / parentClientSize.height;

if (imageRatio > parentRatio) {
return parentClientSize.height / originalHeight;
}

return parentClientSize.width / originalWidth;
}();

var getRelativeOffset = function getRelativeOffset() {
var targetWidth = Math.ceil(originalWidth * scale);
var targetHeight = Math.ceil(originalHeight * scale);
var parentDimensionWidth = parentNode.offsetWidth;
var parentDimensionHeight = parentNode.offsetHeight;
var overflowWidth = targetWidth – parentDimensionWidth;
var overflowHeight = targetHeight – parentDimensionHeight;
var valueX;

if (overflowWidth === 0) {
valueX = focalPointX;
} else {
valueX = Math.max(Math.min(targetWidth * focalPointX – parentDimensionWidth * 0.5, overflowWidth), 0) / overflowWidth;
}

var valueY;

if (overflowHeight === 0) {
valueY = focalPointY;
} else {
valueY = Math.max(Math.min(targetHeight * focalPointY – parentDimensionHeight * 0.5, overflowHeight), 0) / overflowHeight;
}

return {
valueX: valueX,
valueY: valueY
};
};

var relativeOffset = getRelativeOffset();
var valueX = relativeOffset.valueX;
var valueY = relativeOffset.valueY;
imageEl.style.objectPosition = “”.concat(valueX * 100, “% “).concat(valueY * 100, “%”);
};

Whatever it is, the way you tell your story online can make all the difference.

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference. Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.