Some feed, 404

404.php

@@ -8,8 +8,8 @@
                     <header class="page-header">
                         <h1 class="page-title">404 - <?php _e( 'Sivua ei löytynyt', 'ID' ); ?></h1>
                     </header><!-- .page-header -->
-                    <div class="page-content">
-                        <p><?php _e( 'Hakemaasi sisältöä ei löytynyt. Kokeile hakua!', 'ID' ); ?></p>
+                    <div class="">
+                        <p><?php _e( 'Hakemaasi sisältöä ei löytynyt', 'ID' ); ?></p>
                     </div><!-- .page-content -->
                 </section><!-- .error-404 -->
             </div>

components/block-social-feed/block-social-feed.php

@@ -17,7 +17,7 @@
 ?>
 
 <?php if(!empty($feed_id)): ?>
-<div class="block-social-feed full-width id-block">
+<div class="block-social-feed full-width id-block admin">
 	<div class="container-lg">
 		<div class="row">
 			<div class="col">
@@ -26,7 +26,70 @@
 		</div>
 		<div class="row">
 			<div class="col">
-				Somefeed tähän
+				<?php if(!is_admin()): ?>
+				<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
+				<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
+				<ul class="juicer-feed" data-feed-id="<?php echo $feed_id ?>" data-overlay="false" data-style="modern" data-after="custom_juicer()" data-gutter="48" data-per="6"></ul>
+				<script>
+					const $ = window.jQuery;
+
+					function custom_juicer() {
+						$('.block-social-feed .juicer-feed .feed-item').each(function(e) {
+							if($(this).find('.j-image').length !== 0) {
+								$(this).data('image', $(this).find('.j-image').data('image'));
+								$(this).data('image-link', $(this).find('.j-image').attr('href'));
+							}
+
+							if($(this).find('.j-text').length !== 0) {
+								$(this).data('message', JSON.stringify($(this).find('.j-message').html()));
+								$(this).data('socialmedia', $(this).find('.j-social').attr('aria-label'));
+							}
+
+							if($(this).find('.j-poster').length !== 0) {
+								$(this).data('poster-thumb', $(this).find('.j-poster img').data('lazy'));
+								$(this).data('poster-link', $(this).find('.j-poster a').attr('href'));
+								$(this).data('poster-name', JSON.stringify($(this).find('.j-poster h3').html()));
+								$(this).data('date', JSON.stringify($(this).find('.j-date').html()));
+							}
+
+							let juicer_item = '<div class="card">';
+
+							if($(this).data('image').length !== 0) {
+								juicer_item += '<a target="_blank" rel="no-referer" href="' + $(this).data('image-link') + '"><img class="thumbnail" src="' + $(this).data('image') + '"></a>';
+							} else {
+								juicer_item += '<div class="no-image"></div>';
+							}
+
+							juicer_item += '<div class="content">';
+							juicer_item += '<div class="excerpt">' + JSON.parse($(this).data('message')) + '</div>';
+							juicer_item += '<div class="user">';
+							juicer_item += '<img class="poster-thumb" src="' + $(this).data('poster-thumb') + '">';
+							juicer_item += '<div class="user-meta">';
+							juicer_item += '<div><a target="_blank" rel="no-referer" href="' + $(this).data('poster-link') + '" class="username">' + JSON.parse($(this).data('poster-name')) + '</a></div>';
+							juicer_item += '<p class="time">' + JSON.parse($(this).data('date')) + '</p>';
+							juicer_item += '</div>'; //user-meta
+							juicer_item += '</div>'; //user
+							juicer_item += '</div>'; //content
+							juicer_item += '<div class="socialmedia">' + $(this).data('socialmedia') + '</div>';
+							juicer_item += '</div>'; //card
+
+
+							//Replace card html
+							$(this).html(juicer_item);
+						});
+
+						//Change button language						
+						$('.j-paginate').text("<?php _ex('Näytä lisää', 'Juicer.io', 'ID'); ?>");
+
+
+						$('.block-social-feed .j-paginate').on('click', function(e) {
+							$(this).closest('.juicer-feed').addClass('more');
+						});
+					}
+				</script>
+				<?php else: ?>
+					<?php _e('Tässä näytetään sosiaalisen median syöte', 'ID_admin'); ?>
+				<?php endif; ?>
 			</div>
 		</div>
 	</div>	

components/block-social-feed/sass/_block-social-feed.scss

@@ -14,4 +14,144 @@
 	&.admin {
 		@include primary-text-color();
 	}
+
+	.juicer-feed {
+		padding: 0 !important;
+
+		@include media-breakpoint-down(xs) {
+			&:not(.more) {
+				.j-stack {
+					:nth-child(4), :nth-child(5), :nth-child(6) {
+						display: none;
+					}
+				}
+			}
+		}
+
+		@include media-breakpoint-down(md) {
+			.j-stack {
+				padding-left: 10px !important;
+				padding-right: 10px !important;
+			}
+		}
+
+		.referral {
+			display: none;
+		}
+
+		.feed-item {
+			border-width: 0px !important;
+
+			@include media-breakpoint-down(md) {
+				margin-bottom: 20px !important;
+			}
+
+			.card {
+				position: relative;
+
+				img {
+					width: 100%;
+					display: block;
+				}
+
+				.no-image {
+					height: 40px;
+				}
+
+				.content {
+					padding: 22px;
+
+					.excerpt {
+						margin-bottom: 25px;
+
+						:last-child {
+							margin-bottom: 0;
+						}
+					}
+
+					.user {
+						display: flex;
+
+						.poster-thumb {
+							width: 63px;
+							height: 63px;
+							border-radius: 50%;
+							margin-bottom: 0;
+							margin-right: 12px;
+							display: block;
+
+							@include media-breakpoint-down(md) {
+								width: 35px;
+								height: 35px;
+							}
+						}
+
+						.user-meta {
+							display: flex;
+							flex-direction: column;
+							justify-content: center;
+							@include font-size($font-size-s);
+							color: $clr-font-grey;
+
+							.username {
+								font-weight: bold;
+								@include font-size($font-size-base);
+								margin-bottom: 5px;
+								display: inline-block;
+
+								&:hover {
+									@include secondary-color-text();
+								}
+							}
+
+							.time {
+								margin: 0;
+							}
+						}
+					}
+				}
+
+				.socialmedia {
+					position: absolute;
+					top: 0;
+					left: 0;
+					padding: 6px;
+					@include secondary-color();
+					@include secondary-text-color();
+					font-weight: bold;
+					text-transform: uppercase;
+					font-family: $font-source-sans-pro;
+				}
+			}
+		}
+
+		.j-loading {
+			@include primary-border-color();
+		}
+
+		.j-loading:before {
+		 	@include primary-text-color();
+		}
+
+		.juicer-button {
+			margin-top: 0;
+			margin-bottom: 0;
+			font-family: $font-pt-sans;
+			padding: 16px 33px;
+			border-radius: 2px;
+			@include primary-border-color();
+			@include primary-text-color();
+			font-weight: bold;
+			text-transform: initial;
+			@include font-size($font-size-base);
+			width: auto;
+			max-width: 175px;
+
+			&:hover {
+				color: $clr-font-grey;
+				border-color: $clr-white;
+				background: $clr-white;
+			}
+		}
+	}
 }