Added image credit support

Signed-off-by: Brendan Dixon <brendandixon@me.com>
brendandixon · Apr 22, 2018 · 917000d · 917000d
1 parent 5541f8d
commit 917000d
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 30 deletions.
diff --git a/inc/template-tags.php b/inc/template-tags.php
@@ -265,16 +265,22 @@ function thegatherings_get_post_card() {
 
 	$name = $type['name'];
 	$slug = $type['slug'];
+	$credits = thegatherings_get_credits();
 
 	return
-		'<a class="card mx-0 mt-0 mb-3 '. $slug . '" href="' . get_the_permalink() . '">' .
-			'<img class="card-img-top" src="' . get_the_post_thumbnail_url() . '">' .
-			'<div class="card-body">' .
-				'<div class="card-subtitle">' . thegatherings_get_post_date( $name ) . '</div>' .
-				$title .
-				'<div class="card-text">' . thegatherings_get_teaser(true) . '</div>' .
+		'<div class="card credits-container mx-0 mt-0 mb-3 ' . $slug . '">' .
+			'<div class="credits">' . $credits . '</div>' .
+			'<div class="card-content">' .
+				'<a style="display:inline-block;" href="' . get_the_permalink() . '">' .
+					'<img class="card-img-top" src="' . get_the_post_thumbnail_url() . '"/>' .
+					'<div class="card-body">' .
+						'<div class="card-subtitle">' . thegatherings_get_post_date( $name ) . '</div>' .
+						$title .
+						'<div class="card-text">' . thegatherings_get_teaser(true) . '</div>' .
+					'</div>' .
+				'</a>' .
 			'</div>' .
-		'</a>';
+		'</div>';
 }
 endif;
 
@@ -360,5 +366,34 @@ function thegatherings_get_teaser( $strip_tags = false, $post = null ) {
 }
 endif;
 
-if ( ! function_exists ( 'thegatherings_the_excerpt' ) ) :
+if ( ! function_exists ( 'thegatherings_get_credits' ) ) :
+function thegatherings_get_credits() {
+	$image_id = get_post_thumbnail_id();
+	$image_post = get_post($image_id);
+	$credits = $image_post->post_content;
+	if ( ! empty( $credits ) ) {
+		$credits = explode( '|', $credits );
+		$credits = trim( $credits[0] ) == 'unsplash'
+					? thegatherings_unsplash_credit( trim( $credits[1] ), trim( $credits[2] ) )
+					: '';
+	}
+	return $credits;
+}
+endif;
+
+if ( ! function_exists ( 'thegatherings_unsplash_credit' ) ) :
+function thegatherings_unsplash_credit( $name, $id ) {
+	return
+		'<a class="unsplash-credit"' .
+			'href="https://unsplash.com/' . $id . '?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" ' .
+			'target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from ' . $name . '">' .
+			'<span style="display:inline-block;padding:2px 3px;">' .
+				'<svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white;" viewBox="0 0 32 32">' .
+					'<title>unsplash-logo</title>' .
+					'<path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path>' .
+				'</svg>' .
+			'</span>' .
+			'<span class="unsplash-credit-name">' . $name . '</span>' .
+		'</a>';
+}
 endif;
diff --git a/sass/bootstrap/_cards.scss b/sass/bootstrap/_cards.scss
@@ -1,21 +1,22 @@
-a.card {
-    color: $light-gray;
-    display: block;
-    text-decoration: none;
-}
-
-
 .card {
     border: none;
     margin: 0 0.9rem 2rem 0.9rem;
 }
-.card:hover img {
-    -webkit-filter: contrast(110%) saturate(130%);
-    filter: contrast(110%) saturate(130%);
-}
 .card-body {
     padding: 0.15rem;
 }
+.card-content {
+    & a {
+        color: $light-gray;
+        display: block;
+        text-decoration: none;
+
+        &:hover img {
+            -webkit-filter: contrast(110%) saturate(130%);
+            filter: contrast(110%) saturate(130%);
+        }
+    }
+}
 .card-subtitle {
     margin-top: 0;
 }

diff --git a/sass/modules/_utility.scss b/sass/modules/_utility.scss
@@ -5,3 +5,36 @@
 .hover-show, a:hover .hover-hide {
     display: none;
 }
+
+.credits-container {
+    position: relative;
+}
+.credits {
+    opacity:0.45;
+    position:absolute;
+    right:5px;
+    top:5px;
+    z-index:42;
+}
+
+.unsplash-credit {
+    background-color:black;
+    color:white !important;
+    text-decoration:none;
+    padding:2px 4px;
+    font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;
+    font-size:0.7em;
+    font-weight:bold;
+    line-height:1.2;
+    display:inline-block;
+    border-radius:3px;
+
+    &:hover .unsplash-credit-name {
+        display:inline-block;
+        padding:2px 3px;
+    }
+}
+
+.unsplash-credit-name {
+    display:none;
+}
diff --git a/sass/style.scss b/sass/style.scss
@@ -4,7 +4,7 @@ Theme URI: http://underscores.me/
 Author: Brendan Dixon
 Author URI: http://thegatherings.place/
 Description: Description
-Version: 1.1.3
+Version: 1.1.4
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: thegatherings

diff --git a/style.css b/style.css
@@ -4,7 +4,7 @@ Theme URI: http://underscores.me/
 Author: Brendan Dixon
 Author URI: http://thegatherings.place/
 Description: Description
-Version: 1.1.3
+Version: 1.1.4
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: thegatherings
@@ -131,22 +131,49 @@ h2 {
 .hover-show, a:hover .hover-hide {
   display: none; }
 
-a.card {
-  color: rgba(74, 74, 74, 0.95);
-  display: block;
-  text-decoration: none; }
+.credits-container {
+  position: relative; }
+
+.credits {
+  opacity: 0.45;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 42; }
+
+.unsplash-credit {
+  background-color: black;
+  color: white !important;
+  text-decoration: none;
+  padding: 2px 4px;
+  font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;
+  font-size: 0.7em;
+  font-weight: bold;
+  line-height: 1.2;
+  display: inline-block;
+  border-radius: 3px; }
+  .unsplash-credit:hover .unsplash-credit-name {
+    display: inline-block;
+    padding: 2px 3px; }
+
+.unsplash-credit-name {
+  display: none; }
 
 .card {
   border: none;
   margin: 0 0.9rem 2rem 0.9rem; }
 
-.card:hover img {
-  -webkit-filter: contrast(110%) saturate(130%);
-  filter: contrast(110%) saturate(130%); }
-
 .card-body {
   padding: 0.15rem; }
 
+.card-content a {
+  color: rgba(74, 74, 74, 0.95);
+  display: block;
+  text-decoration: none; }
+  .card-content a:hover img {
+    -webkit-filter: contrast(110%) saturate(130%);
+    filter: contrast(110%) saturate(130%); }
+
 .card-subtitle {
   margin-top: 0; }
 

diff --git a/template-parts/content-header.php b/template-parts/content-header.php
@@ -12,7 +12,8 @@
 <header class="row mb-0 mb-lg-3">
     <div class="col-12 col-lg-7 col-xl-8 mb-3 mb-lg-0">
         <div class="d-table h-100">
-            <div class="d-table-cell align-middle">
+            <div class="d-table-cell align-middle credits-container">
+                <div class="credits"><?php echo thegatherings_get_credits(); ?></div>
                 <img class="w-100" src="<?php echo get_the_post_thumbnail_url(); ?>">
             </div>
         </div>