Browse Source

Fixed layout. Tested with Ghost 2.3.0

master
rune 1 year 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 @@
.instaframe {
margin: 25px;
display:inline-block;
max-width: 450px;
max-height: 450px;
display: inline;
min-width: 45% !important;
min-height: 450px !important;
}
.instaimage {
max-width: 400px;
max-height: 400px;
}
.instatext {
width:250px;
font-size: 12px;
}

.instagram {
display: inline;
width: 90%;
margin-top:2% !important;
margin-bottom: 2% !important;
}

+ 2
- 2
insta.js View File

@@ -11,10 +11,10 @@ $(function() {
instaframes.each(function(i, selected) {
if(json.data[i].likes.count > 0){
$(selected).css("marginBottom: '20, em'");
$(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>');
$(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>');
} else {
$(selected).css("marginBottom: '20, em'");
$(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>');
$(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>');
};
});
}

+ 23
- 17
page-insta.hbs View File

@@ -1,4 +1,8 @@
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<div class="site-header-content">
@@ -14,25 +18,27 @@
{{> "site-nav"}}
</div>
</header>

{{!-- The main content area --}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
<div class="instagram">
<span class="instaframe" style="float:left;"></span>
<span class="instaframe" style="float:right;"></span>
</div>
</div>
<div><p></p><p></p><p></p></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="{{asset "js/insta.js"}}"></script>
</div>

Loading…
Cancel
Save