Browse Source

Fixed layout. Tested with Ghost 2.3.0

rune 1 month ago
parent
commit
1f2d14109c
3 changed files with 43 additions and 22 deletions
  1. 18
    3
      insta.css
  2. 2
    2
      insta.js
  3. 23
    17
      page-insta.hbs

+ 18
- 3
insta.css View File

@@ -1,6 +1,21 @@
1 1
 .instaframe {
2 2
 	margin: 25px;
3
-	display:inline-block;
4
-	max-width: 450px;
5
-	max-height: 450px;
3
+	display: inline;
4
+	min-width: 45% !important;
5
+	min-height: 450px !important;
6
+}
7
+.instaimage {
8
+	max-width: 400px;
9
+	max-height: 400px;
10
+}
11
+.instatext {
12
+	width:250px;
13
+	font-size: 12px;
14
+}
15
+
16
+.instagram {
17
+	display: inline;
18
+	width: 90%;
19
+	margin-top:2% !important;
20
+	margin-bottom: 2% !important;
6 21
 }

+ 2
- 2
insta.js View File

@@ -11,10 +11,10 @@ $(function() {
11 11
             instaframes.each(function(i, selected) {
12 12
                 if(json.data[i].likes.count > 0){
13 13
                     $(selected).css("marginBottom: '20, em'");
14
-                    $(selected).html('<a href="'+json.data[i].link+'"><img src="'+json.data[i].images.standard_resolution.url+'"/></a><p style="font-size: 12px;">'+json.data[i].caption.text+'  <i class="fa fa-heart-o" aria-hidden="true"></i><sup>'+json.data[i].likes.count+'</sup></p>');  
14
+                    $(selected).html('<a href="'+json.data[i].link+'"><img class="instaimage" src="'+json.data[i].images.standard_resolution.url+'"/></a><p class="instatext">'+json.data[i].caption.text+'  <i class="fa fa-heart-o" aria-hidden="true"></i><sup>'+json.data[i].likes.count+'</sup></p>');  
15 15
                 } else {
16 16
                 $(selected).css("marginBottom: '20, em'");
17
-                $(selected).html('<a href="'+json.data[i].link+'"><img src="'+json.data[i].images.standard_resolution.url+'"/></a><p style="font-size: 12px;">'+json.data[i].caption.text+'</p>');
17
+                $(selected).html('<a href="'+json.data[i].link+'"><img class="instaimage" src="'+json.data[i].images.standard_resolution.url+'"/></a><p class="instatext">'+json.data[i].caption.text+'</p>');
18 18
                 };
19 19
             });
20 20
         }

+ 23
- 17
page-insta.hbs View File

@@ -1,4 +1,8 @@
1 1
 {{!< default}}
2
+{{!-- The tag above means: insert everything in this file
3
+into the {body} of the default.hbs template --}}
4
+
5
+{{!-- The big featured header, it uses blog cover image as a BG if available --}}
2 6
 <header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
3 7
     <div class="inner">
4 8
         <div class="site-header-content">
@@ -14,25 +18,27 @@
14 18
         {{> "site-nav"}}
15 19
     </div>
16 20
 </header>
21
+
22
+{{!-- The main content area --}}
17 23
 <main id="site-main" class="site-main outer" role="main">
18
-    <div class="inner">
19
-        <div class="instagram">
20
-            <span class="instaframe" style="float:left;"></span>
21
-            <span class="instaframe" style="float:right;"></span>
22
-        </div>
23
-        <div class="instagram">
24
-            <span class="instaframe" style="float:left;"></span>
25
-            <span class="instaframe" style="float:right;"></span>
26
-        </div>
27
-        <div class="instagram">
28
-            <span class="instaframe" style="float:left;"></span>
29
-            <span class="instaframe" style="float:right;"></span>
30
-        </div>
31
-        <div class="instagram">
32
-            <span class="instaframe" style="float:left;"></span>
33
-            <span class="instaframe" style="float:right;"></span>
24
+            <div class="instagram">
25
+                <span class="instaframe" style="float:left;"></span>
26
+                <span class="instaframe" style="float:right;"></span>
27
+            </div>
28
+            <div class="instagram">
29
+                <span class="instaframe" style="float:left;"></span>
30
+                <span class="instaframe" style="float:right;"></span>
31
+            </div>
32
+            <div class="instagram">
33
+                <span class="instaframe" style="float:left;"></span>
34
+                <span class="instaframe" style="float:right;"></span>
35
+            </div>
36
+            <div class="instagram">
37
+                <span class="instaframe" style="float:left;"></span>
38
+                <span class="instaframe" style="float:right;"></span>
39
+            </div>
34 40
         </div>
35
-        <div><p></p><p></p><p></p></div>
41
+   
36 42
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
37 43
         <script type="text/javascript" src="{{asset "js/insta.js"}}"></script> 
38 44
     </div>

Loading…
Cancel
Save