Use <img> for the main photo #361 #185

- Let the browser decide which photo to load
- Removed photo.getSize
- Automacialy center photos, without adding extra css from small images

src/scripts/build.js

@@ -113,24 +113,18 @@ build.photo = function(data) {
 
 }
 
-build.imageview = function(data, size, visibleControls) {
+build.imageview = function(data, visibleControls) {
 
-	let html = ''
+	let html      = '',
+	    hasMedium = data.medium!==''
 
-	if (size==='big') {
+	if (hasMedium===false) {
 
-		if (visibleControls===true) html += lychee.html`<div id='image' style='background-image: url($${ data.url })'></div>`
+		html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }'></div></div>`
-		else                        html += lychee.html`<div id='image' style='background-image: url($${ data.url });' class='full'></div>`
 
-	} else if (size==='medium') {
+	} else {
 
-		if (visibleControls===true) html += lychee.html`<div id='image' style='background-image: url($${ data.medium })'></div>`
+		html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }' srcset='$${ data.medium } 1920w, $${ data.url } $${ data.width }w'></div></div>`
-		else                        html += lychee.html`<div id='image' style='background-image: url($${ data.medium });' class='full'></div>`
-
-	} else if (size==='small') {
-
-		if (visibleControls===true) html += lychee.html`<div id='image' class='small' style='background-image: url($${ data.url }); width: $${ data.width }px; height: $${ data.height }px; margin-top: -$${ parseInt(data.height/2-20) }px; margin-left: -$${ data.width/2 }px;'></div>`
-		else                        html += lychee.html`<div id='image' class='small' style='background-image: url($${ data.url }); width: $${ data.width }px; height: $${ data.height }px; margin-top: -$${ parseInt(data.height/2) }px; margin-left: -$${ data.width/2 }px;'></div>`
 
 	}
 

src/scripts/header.js

@@ -67,17 +67,11 @@ header.bind = function() {
 
 header.show = function() {
 
-	let newMargin = (-1 * ($('#imageview #image').height()/2) + 20)
-
 	clearTimeout($(window).data('timeout'))
 
 	lychee.imageview.removeClass('full')
 	header.dom().removeClass('header--hidden')
 
-	// Adjust position or size of photo
-	if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
-	else                                       $('#imageview #image').removeClass('full')
-
 	return true
 
 }
@@ -90,15 +84,9 @@ header.hide = function(e, delay = 500) {
 
 		$(window).data('timeout', setTimeout(function() {
 
-			let newMargin = (-1 * ($('#imageview #image').height()/2))
-
 			lychee.imageview.addClass('full')
 			header.dom().addClass('header--hidden')
 
-			// Adjust position or size of photo
-			if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
-			else                                       $('#imageview #image').addClass('full')
-
 		}, delay))
 
 		return true

src/scripts/photo.js

@@ -625,42 +625,6 @@ photo.share = function(photoID, service) {
 
 }
 
-photo.getSize = function() {
-
-	// Size can be 'big', 'medium' or 'small'
-	// Default is big
-	// Small is centered in the middle of the screen
-	let size       = 'big',
-	    scaled     = false,
-	    hasMedium  = photo.json.medium!=='',
-	    pixelRatio = window.devicePixelRatio,
-	    view       = {
-	    	width  : $(window).width() - 60,
-	    	height : $(window).height() - 100
-	    }
-
-	// Detect if the photo will be shown scaled,
-	// because the screen size is smaller than the photo
-	if (photo.json.width>view.width || photo.json.height>view.height) scaled = true
-
-	// Calculate pixel ratio of screen
-	if (pixelRatio!=null && pixelRatio>1) {
-		view.width  = view.width * pixelRatio
-		view.height = view.height * pixelRatio
-	}
-
-	// Medium available and
-	// Medium still bigger than screen
-	if (hasMedium===true && (1920>view.width && 1080>view.height)) size = 'medium'
-
-	// Photo not scaled
-	// Photo smaller then screen
-	if (scaled===false && (photo.json.width<view.width&& photo.json.width<view.height)) size = 'small'
-
-	return size
-
-}
-
 photo.getArchive = function(photoID) {
 
 	let link,

src/scripts/view/main.js

@@ -97,42 +97,6 @@ $(document).ready(function() {
 
 })
 
-const getPhotoSize = function(photo) {
-
-	// Size can be 'big', 'medium' or 'small'
-	// Default is big
-	// Small is centered in the middle of the screen
-	let size       = 'big',
-	    scaled     = false,
-	    hasMedium  = photo.medium!=='',
-	    pixelRatio = window.devicePixelRatio,
-	    view       = {
-	    	width  : $(window).width() - 60,
-	    	height : $(window).height() - 100
-	    }
-
-	// Detect if the photo will be shown scaled,
-	// because the screen size is smaller than the photo
-	if (photo.width>view.width || photo.height>view.height) scaled = true
-
-	// Calculate pixel ratio of screen
-	if (pixelRatio!=null && pixelRatio>1) {
-		view.width  = view.width * pixelRatio
-		view.height = view.height * pixelRatio
-	}
-
-	// Medium available and
-	// Medium still bigger than screen
-	if (hasMedium===true && (1920>view.width && 1080>view.height)) size = 'medium'
-
-	// Photo not scaled
-	// Photo smaller then screen
-	if (scaled===false && (photo.width<view.width&& photo.width<view.height)) size = 'small'
-
-	return size
-
-}
-
 const loadPhotoInfo = function(photoID) {
 
 	let params = {
@@ -157,10 +121,8 @@ const loadPhotoInfo = function(photoID) {
 		document.title = 'Lychee - ' + data.title
 		header.dom('.header__title').html(lychee.escapeHTML(data.title))
 
-		let size = getPhotoSize(data)
-
 		// Render HTML
-		imageview.html(build.imageview(data, size, true))
+		imageview.html(build.imageview(data, true))
 		imageview.find('.arrow_wrapper').remove()
 		imageview.addClass('fadeIn').show()
 

src/styles/_imageview.scss

@@ -17,34 +17,43 @@
 	// ImageView -------------------------------------------------------------- //
 	#image {
 		position: absolute;
-		top: 60px;
+		top: 30px;
-		right: 30px;
+		right: 0;
-		bottom: 30px;
+		bottom: 0;
-		left: 30px;
+		left: 0;
-		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
+		transition: top .3s;
 		will-change: transform;
 
-		background-repeat: no-repeat;
+		display: flex;
-		background-position: 50% 50%;
+		justify-content: center;
-		background-size: contain;
+		align-items: center;
 
 		animation-name: zoomIn;
 		animation-duration: .3s;
 		animation-timing-function: $timingBounce;
-
-		&.small {
-			top: 50%;
-			right: auto;
-			bottom: auto;
-			left: 50%;
 	}
 
-		&.full {
+	&.full #image {
 		top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
 	}
+
+	#image > div {
+		width: 0;
+		height: 0;
+	}
+
+	#image img {
+		max-width: calc(100vw - 60px);
+		max-height: calc(100vh - 90px);
+		width: auto;
+		height: auto;
+		transform: translate(-50%, -50%);
+		transition: max-width .3s, max-height .3s;
+	}
+
+	&.full #image img {
+		max-width: 100vw;
+		max-height: 100vh;
 	}
 
 	// Previous/Next Buttons -------------------------------------------------------------- //