Merge pull request #44 from BKWLD/craft-visual-placeholder-update

first pass at testing for png, and making the bg color default transp…

components/cloak-visual.coffee

@@ -33,6 +33,9 @@ export default
 
 		# Clear placeholder color, like for logos
 		noPlaceholder: Boolean
+		autoNoPlaceholder:
+			type: Boolean
+			default: true
 
 		# Set base booleans to an undefined default so we can test whether they
 		# were explicitly made false or are actually undefined
@@ -65,10 +68,6 @@ export default
 	# Render a Visual instance
 	render: (create, { props, injections, data, children, scopedSlots }) ->
 
-		# Decide if there is a placeholder color
-		placeholderColor = if props.noPlaceholder then null
-		else process.env.PLACEHOLDER_COLOR || '#f3f3f2'
-
 		# Convert "16:9" style aspect to a number
 		aspect = if props.aspect and
 			typeof props.aspect == 'string' and
@@ -95,6 +94,13 @@ export default
 		if props.srcset and !sizes and process.env.APP_ENV == 'dev'
 		then console.debug "No sizes prop for #{props.image}"
 
+		# Clear placeholder color if `no-placeholder` prop is set or if the image
+		# is of a format that woulds support transparency.  The latter is handy
+		# for product images.
+		placeholderColor = unless props.noPlaceholder or
+			(props.autoNoPlaceholder and props.image.match /\.(png|svg)/i)
+		then process.env.PLACEHOLDER_COLOR || 'rgba(0,0,0,.2)'
+
 		# Disable lazy loading automatically if found in 2 blocks. Written
 		# kinda weird so it defaults to true when blockIndex is undefined
 		isCriticalImage = injections.blockIndex < 2