jumbo-jekyll-theme 4.8.4 → 4.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a47b5ec95e5f2abbd9b9924a8dadcdbcb85ac117514dd9f71bee6d992de70f89
-  data.tar.gz: 0522df6a457a91f132db96f576b2394d8ee75980d7bfb2513cf51ec7b0429385
+  metadata.gz: c2cdc6c9e432c4259886237d94f3e808b5c1651be85a194cc7d947a81cf4b59a
+  data.tar.gz: dcae7bb8af5bb77e9bdcba85d9d8ea26496cb273c161c44d26be94277fe05269
 SHA512:
-  metadata.gz: a31bc64625bb666881c615388f554af504ebdea70780e2f8a5ca1ae4cad2f19146cbdebf76d6a84aa53f2c7885e9eaf735c56f621b234efd90d3ec7b90412f09
-  data.tar.gz: a6956cc4cd789acb8664903053be0448cac0814e1186e14b87c6a545bcd7f39a1fae146a9fbb5929a7aae6671b92520ba4c83ba094e1b9b228522350a36264e0
+  metadata.gz: cd9f8b346d7b9fb6701c1773f0efa3fffb562b047f5f037c39ed1449923cc6878c696a6323e2de89578b3a8b08846751f05bbc8b3499a7d50c80a12dfd5f37ad
+  data.tar.gz: 7bae6f2e092d8dcc096d2394de752ed6cc51e4ca0cf065ef1bf4c9f63edbf4c052188d94408c10536921b104bc8c038253490db7a860d101745ccdc45158ba98

data/_config.yml

@@ -39,24 +39,37 @@ exclude:
   - _static-site
   - .sass-cache
   - _site
-  - package.json
-  - node_modules
-  - gulpfile.js
+# Sass Configuration for the site styles
+sass:
+    style: compressed
+    load_paths:
+        - assets/css
 # Compress HTML using the jekyll-tidy plugin.
 jekyll_tidy: 
     # Toggle compression of HTML
     compress_html: true
     # JS Path added to exclude to stop errors.
     exclude: ["assets/**/*.js"] 
+# Permalink style to be used for paginating pages in pagination.html
+paginate_path: /blog/:num/
+paginate_path_news: /news/:num/
+paginate_path_authors: /authors/:num/
 # Jekyll Pagination V2 Configuration
 pagination:
-    permalink: '/:num/'
+    # Default pagination path for Jekyll Posts
+    # For other permalinks set in the front matter of the post index page
+    permalink: /:num/
+    # Enabled or not?
     enabled: true
+    # Home many posts to display by default
     per_page: 9
+    # Number of pages to show either side of the current page i.e - 1, 2, {3}, 4, 5
     trail:
         before: 2
         after: 2
+    # Reverse the order of paginated pages
     sort_reverse: true
+    # Field to sort posts by when paginating
     sort_field: 'date'
 # Jekyll pagination v2 autopages configuration.
 autopages:
@@ -85,6 +98,19 @@ defaults:
         type: "authors"
     values:
         layout: author
+# Jekyll Assets setup
+assets:
+  # Compress JS Assets - uses the uglifier 
+  compression: true
+  gzip: true
+  # Autoprefixer default settings
+  autoprefixer:
+      browsers: ["last 2 versions","> 5%","IE 9"]
+  # These are the paths to look for assets
+  sources:
+    - assets/js/
+    - assets/images/
+    - assets/css/    
 # Jekyll relative links plugin settings    
 jekyll_relative_links:
     process_all_collections: true
@@ -92,9 +118,14 @@ jekyll_relative_links:
 plugins:
     - jekyll-seo-tag
     - jekyll-sitemap
+    - uglifier
+    - jekyll-assets
+    - jekyll-theme-assets-updated
+    - jekyll-tidy
     - jekyll-redirect-from
+    - jekyll-responsive-image
+    - autoprefixer-rails
     - jekyll-paginate-v2
-    - jekyll-picture-tag-latest
 collections:
   authors:
     output: true
@@ -105,7 +136,65 @@ liquid:
 readme_index:
     enabled:          true
     remove_originals: false
-picture:
-  nomarkdown: false
-  source: "assets/images"
-  output: "assets/images/processed"
+
+# Jeykyll Responsive Image Configuration
+responsive_image:
+  cache: false
+  # [Required]
+  # Path to the image template.
+  template: _includes/images/responsive-image.html
+
+  # [Optional, Default: 85]
+  # Quality to use when resizing images.
+  default_quality: 90
+
+  # [Optional, Default: []]
+  # An array of resize configuration objects. Each object must contain at least
+  # a `width` value.
+  sizes:
+    - width: 400  # [Required] How wide the resized image will be.
+      quality: 70 # [Optional] Overrides default_quality for this size.
+    - width: 800
+      quality: 70
+
+  # [Optional, Default: false]
+  # Rotate resized images depending on their EXIF rotation attribute. Useful for
+  # working with JPGs directly from digital cameras and smartphones
+  auto_rotate: false
+
+  # [Optional, Default: false]
+  # Strip EXIF and other JPEG profiles. Helps to minimize JPEG size and win friends
+  # at Google PageSpeed.
+  strip: false
+
+  # [Optional, Default: assets]
+  # The base directory where assets are stored. This is used to determine the
+  # `dirname` value in `output_path_format` below.
+  base_path: assets
+
+  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
+  # The template used when generating filenames for resized images. Must be a
+  # relative path.
+  #
+  # Parameters available are:
+  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
+  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)
+  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)
+  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)
+  #   %{width}       Width of the resized image
+  #   %{height}      Height of the resized image
+  #
+  output_path_format: assets/resized/%{width}/%{basename}
+
+  # [Optional, Default: true]
+  # Whether or not to save the generated assets into the source folder.
+  save_to_source: false
+
+  # [Optional, Default: []]
+  # By default, only images referenced by the responsive_image and responsive_image_block
+  # tags are resized. Here you can set a list of paths or path globs to resize other
+  # images. This is useful for resizing images which will be referenced from stylesheets.
+  extra_images:
+    - assets/foo/bar.png
+    - assets/bgs/*.png
+    - assets/avatars/*.{jpeg,jpg}

data/_includes/breadcrumb.html

@@ -1,7 +1,8 @@
 <div class="row breadcrumb-container"
 {% if site.data.settings.breadcrumb.image %}
-style="background-image: url({{site.data.settings.breadcrumb.image}});"
-{% endif %}> <!--- Row Start ---->
+style="background-image: url('{% asset_path '{{site.data.settings.breadcrumb.image}}' %}');
+"
+{% endif %}"> <!--- Row Start ---->
 <div class="container breadcrumb-inner-container"><!--- Container Start ---->
     <h1>
         {% if page.title %}

data/_includes/css.html

@@ -1,11 +1,9 @@
-{% if page.css-package %}
-    {% capture css-package %}/assets/css/main-{{page.css-package}}.css{% endcapture %}
-    <link rel="stylesheet" href="{{ css-package | relative_url }}?v={% bust_cache %}">
-{% elsif layout.css-package %}
-    {% capture css-package %}/assets/css/main-{{layout.css-package}}.css{% endcapture %}
-    <link rel="stylesheet" href="{{ css-package | relative_url }}?v={% bust_cache %}">
-{% elsif layout.css-package == "main" or page.css-package == "main" %}
-    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}?v={% bust_cache %}">
+{% if include.pageCSS %}
+    {% capture css-package %}/assets/css/main-{{include.pageCSS}}.css{% endcapture %}
+    <link rel="stylesheet" href="{{ css-package | relative_url }}">
+{% elsif include.layoutCSS %}
+    {% capture css-package %}/assets/css/main-{{include.layoutCSS}}.css{% endcapture %}
+    <link rel="stylesheet" href="{{ css-package | relative_url }}">
 {% else %}
-    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}?v={% bust_cache %}">
-{% endif %}
+    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+{% endif %}

data/_includes/display-blog-posts.html

@@ -4,6 +4,7 @@
         {% assign timeframe = 604800 %}
         {% assign post_in_seconds = post.date | date: "%s" | plus: 0 %}
         {% assign recent_posts = "now" | date: "%s" | minus: timeframe %}
+        
         {% if forloop.first and paginator.page == 1 %}
             <style>
                 @media(min-width: 1000px){
@@ -16,13 +17,37 @@
             <div class="featured-post-row">
                 <div class="col-xs-12 col-sm-7 col-sm-push-5 latest-featured-post">
                     <a href="{{post.url}}">
-                        {% if post.image.path %}
-                            {% assign imagePath = post.image.path | replace: '/assets/images/', '' %}
-                            {% picture thumb {{imagePath}} alt=post.title %}
-                        {% else %}
-                            {% assign imagePath = site.data.settings.placeholder | replace: '/assets/images/', '' %}
-                            {% picture placeholder {{imagePath}} alt=post.title %}
+                    {% assign image_path = "" %}
+                    {% if post.image.thumb %}
+                            {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                            {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                    {% elsif post.image.name %}
+                            {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                            {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                    {% elsif post.image.path %}
+                            {% capture image_path %}{{post.image.path | remove_first: "/" }}{% endcapture %}
+                            {% capture full_path %}{{post.image.path}}{% endcapture %}
+                    {% elsif post.image == site.data.settings.social_share_image %}
+                            {% capture image_path %}{{site.data.settings.placeholder | remove_first: "/" }}{% endcapture %}
+                            {% capture full_path %}{{site.data.settings.placeholder}}{% endcapture %}
+                    {% elsif post.image %}
+                            {% capture image_path %}{{post.image | remove_first: "/" }}{% endcapture %}
+                            {% capture full_path %}{{post.image}}{% endcapture %}
+                    {% else %}
+                        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+                        data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="center-block img-responsive lazyload"/>
+                    {% endif %}
+                    {% if image_path != "" %}
+                        {% responsive_image_block %}
+                        template: _includes/thumbnail_image.html
+                        path: {{ image_path }}
+                        fullpath: {{ full_path }}
+                        {% if post.title %}
+                        title: {{ post.title | slugify: "ascii"}}
+                        alt: {{ post.title | slugify: "ascii"}}
                         {% endif %}
+                        {% endresponsive_image_block %}
+                    {% endif %}
                     </a>
                 </div>
                 <div class="col-xs-12 col-sm-5 col-sm-pull-7 latest-featured-post-content">
@@ -59,14 +84,39 @@
                 <div class="blog-post-item">
                     <a href="{{post.url}}">
                         <div class="blog-featured-image {% if post.image == site.data.settings.social_share_image %}using-placeholder{% endif %}">
-                        {% if post.image.path %}
-                            {% assign imagePath = post.image.path | replace: '/assets/images/', '' %}
-                            {% picture thumb {{imagePath}} alt=post.title %}
+
+                        {% assign image_path = "" %}
+                        {% if post.image.thumb %}
+                                {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                                {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                        {% elsif post.image.name %}
+                                {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                                {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                        {% elsif post.image.path %}
+                                {% capture image_path %}{{post.image.path | remove_first: "/" }}{% endcapture %}
+                                {% capture full_path %}{{post.image.path}}{% endcapture %}
+                        {% elsif post.image == site.data.settings.social_share_image %}
+                            {% capture image_path %}{{site.data.settings.placeholder | remove_first: "/" }}{% endcapture %}
+                            {% capture full_path %}{{site.data.settings.placeholder}}{% endcapture %}
+                            {% assign using_placeholder = "true" %}
+                        {% elsif post.image %}
+                                {% capture image_path %}{{post.image | remove_first: "/" }}{% endcapture %}
+                                {% capture full_path %}{{post.image}}{% endcapture %}
                         {% else %}
-                            {% assign imagePath = site.data.settings.placeholder | replace: '/assets/images/', '' %}
-                            {% picture placeholder {{imagePath}} alt=post.title %}
+                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+                            data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="center-block img-responsive lazyload"/>
                         {% endif %}
+
                         {% if image_path != "" %}
+                            {% responsive_image_block %}
+                            template: _includes/thumbnail_image.html
+                            path: {{ image_path }}
+                            fullpath: {{ full_path }}
+                            {% if post.title %}
+                            title: {{ post.title | slugify: "ascii"}}
+                            alt: {{ post.title | slugify: "ascii"}}
+                            {% endif %}
+                            {% endresponsive_image_block %}
                         {% endif %}
                             <div class="read-article">
                                 <i class="fa fa-eye"></i> Read Article

data/_includes/head.html

@@ -8,7 +8,9 @@
         {% endif %}
     </title>
     {% include_cached css.html pageCSS=page.css-package layoutCSS=layout.css-package %}
-    <link rel="icon" href="{{site.data.settings.favicon}}" type="image/png" />
+    <link rel="icon" href="{% if site.data.settings.favicon %}
+    {% asset_path '{{site.data.settings.favicon}}'  %}
+    {% endif %}" type="image/png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {% include_cached google-analytics.html %}
     {% if page.keywords %}

data/_includes/image.html

@@ -1,6 +1,6 @@
 {% if include.lightbox_disabled %}
-![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{{include.path}}"}
+![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{% asset_path  '{{include.name}}'  %}"}
 {% else %}
-[![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{{include.path}}"}]({% if include.url %}{{include.url}}{% elsif include.lightbox_disabled %}{% else %}"{{include.path}}"{% endif %}){% if include.lightbox_disabled %}{% else %}{% if include.url %}{% else %}{: data-featherlight="{{include.name}}" data-title="{{include.alt}}"}{% endif %}{% endif %}
+[![{{include.alt}}](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==){:class="img-responsive lazyload {% if include.class %}{{include.class}}{% endif %}" data-src="{% asset_path '{{include.name}}' %}"}]({% if include.url %}{{include.url}}{% elsif include.lightbox_disabled %}{% else %}{% asset_path "{{include.name}}"  %}{% endif %}){% if include.lightbox_disabled %}{% else %}{% if include.url %}{% else %}{: data-featherlight="{% asset_path '{{include.name}}' %}" data-title="{{include.alt}}"}{% endif %}{% endif %}
 {% endif %}
 

data/_includes/javascript.html

@@ -1,9 +1,10 @@
 {% if page.js-package %}
     {% capture js-package %}package-{{page.js-package}}{% endcapture %}
-    <script type="text/javascript" src="{% asset_path {{js-package}}  %}?v={% bust_cache %}"></script>
+    <script type="text/javascript" src="{% asset_path {{js-package}}  %}"></script>
 {% elsif layout.js-package %}
     {% capture js-package %}package-{{layout.js-package}}{% endcapture %}
-    <script type="text/javascript" src="{% asset_path {{js-package}}  %}?v={% bust_cache %}"></script>
+    <script type="text/javascript" src="{% asset_path {{js-package}}  %}"></script>
 {% else %}
-    <script type="text/javascript" src="{% asset_path package-main %}?v={% bust_cache %}"></script>
-{% endif %}
+    <script type="text/javascript" src="{% asset_path package-main %}"></script>
+{% endif %}
+

data/_includes/pagination.html

@@ -1,4 +1,4 @@
-{% assign paginate_path = include.pagination_permalink %}
+{% assign paginate_path = include.path %}
 {% assign paginate_base_path = paginate_path | split: ":" %}
 {% if paginator.total_pages > 1 %}
 <div class="row pagination-row">
@@ -9,15 +9,25 @@
         {% else %}
         <li class="disabled"><a href="#">&laquo; Prev</a></li>
         {% endif %}
-        {% if paginator.page_trail %}
-            {% for trail in paginator.page_trail %}
-            <li data-pagination-permalink="{{paginate_path}}" {% if page.url == trail.path %}class="active"{% endif %}>
-                <a href="{% if trail.num == 1 %}{{paginate_base_path[0]}}{% else %}
-                {{ paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', trail.num  }}{% endif %}"
-                title="{{trail.title}}">{{ trail.num }}</a>
-            </li>
-            {% endfor %}
-        {% endif %}
+            {% if paginator.page_trail %}
+                {% for trail in paginator.page_trail %}
+                <li {% if page.url == trail.path %}class="active"{% endif %}>
+                    <a href="{% if trail.num == 1 %}{{paginate_base_path[0]}}{% else %}
+                    {{ paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', trail.num  }}{% endif %}"
+                    title="{{trail.title}}">{{ trail.num }}</a>
+                </li>
+                {% endfor %}
+            {% else %}
+                {% for page in (1..paginator.total_pages) %}
+                {% if page == paginator.page %}
+                    <li class="active"><a href="">{{ page }}</a></li>
+                {% elsif page == 1 %}
+                    <li><a href="{{paginate_base_path[0]}}">{{ page }}</a></li>
+                {% else %}
+                    <li><a href="{{ paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a></li>
+                {% endif %}
+                {% endfor %}
+            {% endif %}
         {% if paginator.next_page %}
             <li><a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next </a></li>
         {% else %}

data/_includes/post-sidebar.html

@@ -16,17 +16,60 @@
                 <div class="row featured_blog_post">
                     <div class="col-md-3 col-sm-3 col-xs-3 no-padding">
                             {% if post.image.thumb %}
-                                    {% capture full_path %}blog/thumbs/{{post.image.thumb}}{% endcapture %}
+                                    {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                                    {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                                    {% responsive_image_block %}
+                                    template: _includes/thumb.html
+                                    path: {{ image_path }}
+                                    fullpath: {{ full_path }}
+                                    {% if post.title %}
+                                    title: {{ post.title | slugify: "ascii"}}
+                                    alt: {{ post.title | slugify: "ascii"}}
+                                    {% endif %}
+                                    {% endresponsive_image_block %}
+                             {% elsif post.image.name %}
+                                    {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                                    {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                                    {% responsive_image_block %}
+                                    template: _includes/thumb.html
+                                    path: {{ image_path }}
+                                    fullpath: {{ full_path }}
+                                    {% if post.title %}
+                                    title: {{ post.title | slugify: "ascii"}}
+                                    alt: {{ post.title | slugify: "ascii"}}
+                                    {% endif %}
+                                    {% endresponsive_image_block %}
                             {% elsif post.image.path %}
-                                    {% capture full_path %}{{post.image.path | replace: '/assets/images/', ''  }}{% endcapture %}
+                                    {% capture image_path %}{{post.image.path | remove_first: '/'}}{% endcapture %}
+                                    {% capture full_path %}{{post.image.path }}{% endcapture %}
+                                    {% responsive_image_block %}
+                                    template: _includes/thumb.html
+                                    path: {{ image_path }}
+                                    fullpath: {{ full_path }}
+                                    {% if post.title %}
+                                    title: {{ post.title | slugify: "ascii"}}
+                                    alt: {{ post.title | slugify: "ascii"}}
+                                    {% endif %}
+                                    {% endresponsive_image_block %}
                             {% elsif post.image == site.data.settings.social_share_image %}
-                                    {% capture full_path %}{{site.data.settings.social_share_image | replace: '/assets/images/', '' }}{% endcapture %}
+                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{site.data.settings.placeholder}}"
+                                    alt="{{post.title}}" class="center-block img-responsive lazyload" />
                             {% elsif post.image %}
-                                    {% capture full_path %}{{post.image | replace: '/assets/images/', '' }}{% endcapture %}
+                                    {% capture image_path %}{{post.image | remove_first: '/'}}{% endcapture %}
+                                    {% capture full_path %}{{post.image }}{% endcapture %}
+                                    {% responsive_image_block %}
+                                    template: _includes/thumb.html
+                                    path: {{ image_path }}
+                                    fullpath: {{ full_path }}
+                                    {% if post.title %}
+                                    title: {{ post.title | slugify: "ascii"}}
+                                    alt: {{ post.title | slugify: "ascii"}}
+                                    {% endif %}
+                                    {% endresponsive_image_block %}
                              {% else %}
-                                    {% capture full_path %}{{site.data.settings.social_share_image | replace: '/assets/images/', '' }}{% endcapture %}
+                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+                                 data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="img-responsive lazyload"/>
                              {% endif %}
-                             {% picture blogThumb {{full_path}} alt=post.title %}
                     </div>
                     <div class="col-md-9 col-sm-9 col-xs-9 ">
                        {{post.title | truncate: 40}}
@@ -63,17 +106,60 @@
             <div class="row featured_blog_post">
                 <div class="col-md-3 col-sm-3 col-xs-3 no-padding">
                     {% if post.image.thumb %}
-                            {% capture full_path %}blog/thumbs/{{post.image.thumb}}{% endcapture %}
-                    {% elsif post.image.path %}
-                            {% capture full_path %}{{post.image.path | replace: '/assets/images/', ''  }}{% endcapture %}
-                    {% elsif post.image == site.data.settings.social_share_image %}
-                            {% capture full_path %}{{site.data.settings.social_share_image | replace: '/assets/images/', '' }}{% endcapture %}
-                    {% elsif post.image %}
-                            {% capture full_path %}{{post.image | replace: '/assets/images/', '' }}{% endcapture %}
-                        {% else %}
-                            {% capture full_path %}{{site.data.settings.social_share_image | replace: '/assets/images/', '' }}{% endcapture %}
+                        {% capture image_path %}{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                        {% capture full_path %}/{{site.blog_images_dir}}thumbs/{{post.image.thumb}}{% endcapture %}
+                        {% responsive_image_block %}
+                        template: _includes/thumb.html
+                        path: {{ image_path }}
+                        fullpath: {{ full_path }}
+                        {% if post.title %}
+                        title: {{ post.title | slugify: "ascii"}}
+                        alt: {{ post.title | slugify: "ascii"}}
                         {% endif %}
-                        {% picture blogThumb {{full_path}} alt=post.title %}
+                        {% endresponsive_image_block %}
+                 {% elsif post.image.name %}
+                        {% capture image_path %}{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                        {% capture full_path %}/{{site.blog_images_dir}}{{post.image.name}}{% endcapture %}
+                        {% responsive_image_block %}
+                        template: _includes/thumb.html
+                        path: {{ image_path }}
+                        fullpath: {{ full_path }}
+                        {% if post.title %}
+                        title: {{ post.title | slugify: "ascii"}}
+                        alt: {{ post.title | slugify: "ascii"}}
+                        {% endif %}
+                        {% endresponsive_image_block %}
+                 {% elsif post.image.path %}
+                        {% capture image_path %}{{post.image.path | remove_first: '/' }}{% endcapture %}
+                        {% capture full_path %}{{post.image.path }}{% endcapture %}
+                        {% responsive_image_block %}
+                        template: _includes/thumb.html
+                        path: {{ image_path }}
+                        fullpath: {{ full_path }}
+                        {% if post.title %}
+                        title: {{ post.title | slugify: "ascii"}}
+                        alt: {{ post.title | slugify: "ascii"}}
+                        {% endif %}
+                        {% endresponsive_image_block %}
+                {% elsif post.image == site.data.settings.social_share_image %}
+                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{site.data.settings.placeholder}}"
+                        alt="{{post.title}}" class="center-block img-responsive lazyload" />
+                 {% elsif post.image %}
+                        {% capture image_path %}{{post.image | remove_first: '/' }}{% endcapture %}
+                        {% capture full_path %}{{post.image }}{% endcapture %}
+                        {% responsive_image_block %}
+                        template: _includes/thumb.html
+                        path: {{ image_path }}
+                        fullpath: {{ full_path }}
+                        {% if post.title %}
+                        title: {{ post.title | slugify: "ascii"}}
+                        alt: {{ post.title | slugify: "ascii"}}
+                        {% endif %}
+                        {% endresponsive_image_block %}
+                 {% else %}
+                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+                    data-src="{{site.data.settings.placeholder}}" alt="{{post.title}}" class="img-responsive lazyload"/>
+                 {% endif %}
                 </div>
                 <div class="col-md-9 col-sm-9 col-xs-9 ">
                    {{post.title | truncate: 40}}

data/_includes/responsive-image.html

@@ -1,34 +1,6 @@
-{% assign resizedImageTypes = "jpg,jpeg,png" | split: ',' %}
-{% assign resized = false %}
-{% for imageType in resizedImageTypes %}
-    {% if include.path contains imageType %}
-        {% assign resized = true %}
-    {% endif %}
-{% endfor %}
-
-{% if resized %}
-{% assign webpImage = include.path | replace: "/assets/images", "/assets/images/webp"| split: "." %}
-{% assign webpImage =  webpImage[0] | append: ".webp" %}
-{% assign imageType = "image/" | append: include.type %}
-
-{% assign smallImage = include.path | replace: '/assets/images' , '/assets/images/400' %}
-{% assign mediumImage = include.path | replace: '/assets/images' , '/assets/images/800' %}
-{% assign largeImage = include.path | replace: '/assets/images' , '/assets/images/1400' %}
-
 <picture>
-<!--[if IE 9]><video style="display: none;><![endif]-->
-<source data-srcset="{{smallImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 480px)" type="image/webp" />
-<source data-srcset="{{smallImage}}" media="(max-width: 480px)" type="{{imageType}}" />
-<source data-srcset="{{mediumImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 900px)" type="image/webp" />
-<source data-srcset="{{mediumImage}}" media="(max-width: 900px)" type="{{imageType}}" />
-<source data-srcset="{{largeImage | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" media="(max-width: 1400px)" type="image/webp" />
-<source data-srcset="{{largeImage}}" media="(max-width: 1400px)" type="{{imageType}}" />
-<source data-srcset="{{include.path | replace: '/assets/images', '/assets/images/webp' | replace: include.type, 'webp'}}" type="image/webp"/>
-<source data-srcset="{{include.path}}" type="{{imageType}}"/>
-<!--[if IE 9]></video><![endif]-->
-<img data-src="{{largeImage}}" class="lazyload" alt="{{include.alt}}" />
-</picture>
-{% else %}
-<img  data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" src="{{include.image}}"
- alt="{{include.alt}}" class="lazyload"/>
-{% endif %}
+    {% for i in resized %}
+        <source media="(min-width: {{ i.width }}px)" data-srcset="/{{ i.path }}">
+    {% endfor %}
+    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/{{ path }}" class="img-responsive lazyload">
+</picture>

data/_includes/thumb.html

@@ -0,0 +1,2 @@
+<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/{{resized[0].path}}" 
+class="img-responsive lazyload">

data/_includes/thumbnail_image.html

@@ -0,0 +1,10 @@
+{% comment %}
+    This is a template for the jekyll-responsive-image plugin.
+    This will generate a picture element
+{% endcomment %}
+<picture>
+    {% for i in resized %}
+        <source media="(max-width: {{ i.width }}px)" data-srcset="/{{ i.path }}">
+    {% endfor %}
+    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/{{ path }}" class="img-responsive lazyload">
+</picture>

data/_layouts/container-breadcrumb-tabs.html

@@ -0,0 +1,10 @@
+---
+layout: base
+---
+{% include breadcrumb.html %}
+<div class="row" id="content-container">
+    {% include sticky-tab-bar.html %}
+    <div class="container">
+        {{ content }}
+    </div>
+</div>

data/_layouts/container-breadcrumb.html

@@ -0,0 +1,19 @@
+---
+layout: base
+---
+{% if page.jumbotron.carousel-images %}
+    {% include carousel-header.html images=page.jumbotron.carousel-images %}
+    {% include jumbotron.html %}
+{% elsif page.jumbotron %}
+    {% include jumbotron.html %}
+{% else %}
+    {% include breadcrumb.html %}
+{% endif %}
+<div class="row" id="content-container">
+    {% if page.sticky-tab-bar %}
+        {% include sticky-tab-bar.html %}
+    {% endif %}
+    <div class="container">
+        {{ content }}
+    </div>
+</div>

data/_layouts/container.html

@@ -0,0 +1,8 @@
+---
+layout: base
+---
+{% if page.carousel %}
+    {% include carousel-header.html images=site.page.images %}
+{% endif %}
+{% include jumbotron.html %}
+{{content}}

data/_layouts/jumbotron.html

@@ -9,8 +9,4 @@ layout: base
 {% else %}
     {% include breadcrumb.html %}
 {% endif %}
-{% if page.flow %}
-    {% include flow.html flow=page.flow %}
-{% else %}
-    {{content}}
-{% endif %}
+{{content}}

data/_layouts/post-index.html

@@ -3,18 +3,14 @@ layout: base
 title: Blog
 css-package: blog
 js-package: blog
-pagination:
-    enabled: true
-    category: blog
 ---
 <div class="row" id="content-container">
     <div class="container">
         {% include display-blog-posts.html %}
-        {% if page.pagination_base_url %}
-            {% assign paginationUrl = page.pagination_base_url | append: ':num/' %}
+        {% if page.news %}
+            {% include pagination.html path="/news/:num/"%}
         {% else %}
-            {% assign paginationUrl =  "/blog/:num/" %}
+            {% include pagination.html path="/blog/:num/"%}
         {% endif %}
-        {% include pagination.html pagination_permalink=paginationUrl %}
     </div>
 </div>

data/_layouts/post.html

@@ -3,13 +3,7 @@ layout: base
 js-package: blog
 css-package: blog
 ---
-<div class="row overlay background-image {% if page.image.background-class %}{{page.image.background-class}}{% endif %}" id="jumbotron">
-    {% if page.image.path %}
-        {% assign image_path = page.image.path | replace: '/assets/images/','' %}
-    {% elsif page.image %}
-        {% assign image_path = page.image | replace: '/assets/images/','' %}
-    {% endif %}
-    {% picture backgroundImage {{image_path}} alt=page.title %}
+<div class="row overlay background-image {% if page.image.background-class %}{{page.image.background-class}}{% endif %}" id="jumbotron" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{% if page.image.path %}{{page.image.path}}{% else %}{{page.image}}{% endif %}');"> <!--Row -->
     <div id="jumbotron-content" class="flex-container"> <!--Jumbotron div -->        
         <div class="container flex-center" id="jumbotron-text"> <!--Container -->
             <h1 id="jumbotron-heading">{{page.title}}</h1>

data/_sass/bootstrap/_variables.scss

@@ -45,9 +45,6 @@ $footer-border-color: #eee !default;
 $footer-bg-color:      #131313 !default;
 $footer-text-color:       #fff !default;
 $sub-footer-color:        #E5E5E5 !default;
-$footer-bottom-bg-color: $brand-primary !default;
-$footer-bottom-color: #fff !default;
-$footer-column-heading-font-size: 24px !default;
 
 
 // Breadcrumb

data/_sass/core/blog.scss

@@ -182,7 +182,7 @@ article {
     }
 }
 // BLOG SIDEBAR
-#wrapper .blog-sidebar {
+.blog-sidebar {
     padding: 15px;
     margin-top: 40px;
     margin-bottom: 40px;

data/_sass/core/footer.scss

@@ -22,7 +22,7 @@
             }
         }
         h3 {
-            font-size: $footer-column-heading-font-size;
+            font-size:24px;
             color: $footer-text-color;
             @media(max-width: $screen-sm-min - 1){
                 text-align: center;
@@ -66,7 +66,7 @@
                     color: $footer-text-color;
                     a.email {
                         text-align: left;
-                        font-size: $footer-column-heading-font-size;
+                        font-size: 24px;
                         display:inline-block; 
                         background-color: transparent;
                         border: 0px;
@@ -128,8 +128,8 @@
             }
         }
         .footer-bottom {
-            background-color: $footer-bottom-bg-color;
-            color: $footer-bottom-color;
+            background-color: #1c1c1c;
+            color: #FFF;
             span.coloured-bp{
                 color: $brand-primary;
             }

data/_sass/core/jumbotron.scss

@@ -49,27 +49,6 @@
     background-position-y: 0px !important;
     background-position-x: center !important;
 }
-#jumbotron picture img {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0px;
-    object-fit: cover;
-    height: 100%;
-}
-#jumbotron picture:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  height: $jumbotron-height;
-  left: 0;
-  background-image: linear-gradient(to bottom right, #000, #000);
-  opacity: .6;
-  width: 100%;
-  z-index: 1;
-}
 video#jumbotronVideo {    
     position: absolute;
     right: 0;

data/_sass/home.scss

@@ -0,0 +1,2 @@
+/* Home Sass Partials */
+@import 'core/homepage';

data/assets/css/main-blog.scss

@@ -3,17 +3,12 @@
 @charset "UTF-8";
 //Bootstrap Overrides
 @import "app/overrides";
-
 //Boostrap Includes
-@import 'bootstrap';
-@import 'bootstrap/variables';
-
+@import '_bootstrap';
 // Linaro Jekyll Theme Includes
 @import 'core';
-
 // Additional Core Includes
 @import 'blog';
-
 // App Includes
 @import "app/custom";
 @import "app/blog";

data/assets/css/main-error.scss

@@ -4,11 +4,10 @@
 // App Overrides - Sass variables
 @import "app/overrides";
 //Boostrap Includes
-@import 'bootstrap';
-@import 'bootstrap/variables';
+@import '_bootstrap';
 // Core Theme
 @import 'core';
 //Additional Core includes
 @import "core/error";
 // App Includes
-@import "app/custom";
+@import "app/custom";

data/assets/css/main.scss

@@ -4,9 +4,8 @@
 //Bootstrap Overrides
 @import "app/overrides";
 //Boostrap Includes
-@import 'bootstrap';
-@import 'bootstrap/variables';
+@import '_bootstrap';
 // Linaro Jekyll Theme Includes
 @import "core";
 // App Includes
-@import "app/custom";
+@import "app/custom";

data/assets/js/app/facebook.js

@@ -0,0 +1,8 @@
+<!-- <div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9&appId=155006367915796";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script> -->

data/assets/js/app/main.js

@@ -3,12 +3,6 @@ $(window).click(function() {
     $(".dropdown-submenu.sub-menu > .dropdown-menu.sub-menu").hide();
 });
 $(document).ready(function () {
-    window.lazySizesConfig = window.lazySizesConfig || {};
-    window.lazySizesConfig.customMedia = {
-        '--small': '(max-width: 480px)',
-        '--medium': '(max-width: 900px)',
-        '--large': '(max-width: 1400px)',
-    };
     // Clipboard JS
     if($("div.highlight").length > 0){
         $('div.highlight').each(function (index) {

data/assets/js/package-blog.js

@@ -9,5 +9,4 @@
 
 //= require app/main
 //= require app/search
-//= require app/tables
-//= require app/custom
+//= require app/custom

data/assets/js/package-extended.js

@@ -11,4 +11,4 @@
 //= require app/main
 //= require app/search
 //= require app/tables
-//= require app/custom
+//= require app/custom

data/assets/js/package-main.js

@@ -2,14 +2,12 @@
 //= require vendor/bootstrap
 //= require vendor/cookieconsent
 //= require vendor/lazysizes
+//= require vendor/owl.carousel
 //= require vendor/ls.unveilhooks
 //= require vendor/jquery.doubleScroll
-//= require vendor/owl.carousel
 //= require vendor/featherlight
 
 //= require app/main
-//= require app/tables
 //= require app/search
-//= require app/fly
 //= require app/sticky-tab-bar
-//= require app/custom
+//= require app/custom

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jumbo-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 4.8.4
+  version: 4.9.0
 platform: ruby
 authors:
 - Kyle Kirkby
@@ -39,7 +39,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '2.2'
 - !ruby/object:Gem::Dependency
-  name: jekyll-4-picture-tag
+  name: jekyll-responsive-image
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
@@ -364,7 +364,6 @@ files:
 - _config.yml
 - _data/footer.yml
 - _data/nav.yml
-- _data/picture.yml
 - _data/settings.yml
 - _data/sidebar-nav.yml
 - _data/sticky-tab-bar.yml
@@ -402,10 +401,15 @@ files:
 - _includes/social-media-icons.html
 - _includes/sticky-tab-bar.html
 - _includes/thumb-image.html
+- _includes/thumb.html
+- _includes/thumbnail_image.html
 - _includes/universal-nav.html
 - _includes/youtube.html
 - _layouts/author.html
 - _layouts/base.html
+- _layouts/container-breadcrumb-tabs.html
+- _layouts/container-breadcrumb.html
+- _layouts/container.html
 - _layouts/default.html
 - _layouts/error.html
 - _layouts/jumbotron-container.html
@@ -528,6 +532,7 @@ files:
 - _sass/core/universal-nav.scss
 - _sass/core/youtube-lazy.scss
 - _sass/core/youtube.scss
+- _sass/home.scss
 - assets/css/main-blog.scss
 - assets/css/main-error.scss
 - assets/css/main-search.scss
@@ -568,6 +573,7 @@ files:
 - assets/images/social-media-image.png
 - assets/js/app/blog-comments.js
 - assets/js/app/custom.js
+- assets/js/app/facebook.js
 - assets/js/app/fly.js
 - assets/js/app/main.js
 - assets/js/app/scroll-to-anchors.js

data/_data/picture.yml

@@ -1,116 +0,0 @@
-# Example picture presets:
-# TODO: change to EMs, because safari sucks.
-
-# Media presets are used in several places:
-# - To specify alternate source images (for art direction)
-# - To build the 'sizes' attribute
-# - When given alternate source images, specify which sizes to generate.
-media_presets:
-  wide_desktop: 'min-width: 1801px'
-  desktop: 'max-width: 1800px'
-  wide_tablet: 'max-width: 1200px'
-  tablet: 'max-width: 900px'
-  mobile: 'max-width: 600px'
-
-# Markup presets allow you to group settings together, and select one of them by name in your jekyll
-# tag. All settings are optional.
-markup_presets:
-  default:
-
-    # Optionally specify a markup type. Your current options are 'picture', 'img', or 'auto'
-    # (default).
-    markup: auto
-
-    # Must be an array, in order of decreasing preference. Defaults to just 'original'.
-    formats: [original]
-
-    # Must be an array: which image sizes (width in pixels) to generate (unless directed otherwise
-    # below). If not specified, will use sensible default values.
-    widths: [200, 400, 800, 1600]
-
-    # Alternate source images (for art direction) are associated with media query presets. Here, you
-    # can optionally specify a different set of sizes to generate for those alternate source images.
-    # This is how you avoid generating a 1800 pixel wide image that's only shown on narrow screens.
-    # Must be arrays.
-    media_widths: 
-      mobile: [200, 400, 600] 
-      tablet: [400, 600, 800]
-
-    # Specifies an optional, unconditional size attribute. Can be given alone, or if specified in
-    # combination with 'sizes' below, will be given last (when no media queries apply).
-    size: 800px
-
-    # For building the 'sizes' attribute on img and source tags. specifies how wide the image will
-    # be when a given media query is true. Note that every source in a given <picture> tag will have
-    # the same associated sizes attribute.
-    sizes: 
-      mobile: 100vw
-      desktop: 60vw
-
-    # Specify the properties of the fallback image. If not specified, will return a 900 pixel
-    # wide image in the original format.
-    fallback_width: 800
-    fallback_format: original
-
-    # Attributes can be added to each HTML element, by type:
-    attributes:
-      picture: 'class="awesome" data-volume="11"'
-      img: 'class="some-other-class"'
-
-  # This is an example of how you would create a 'multiplier' based srcset; useful when an image
-  # will always be the same size on all screens, but you'd like to supply higher resolution images
-  # to devices with higher pixel ratios.
-  icon:
-    base_width: 20
-    pixel_ratios: [1, 1.5, 2]
-    fallback_width: 20
-    attributes:
-      img: 'class="icon"'
-
-  # Here's an example of how you'd configure jekyll-picture-tag to work with something like
-  # lazyload:
-  # https://github.com/verlok/lazyload
-  lazy:
-    markup: data_picture
-    formats: [original]
-    widths: [400, 750, 1000]
-    noscript: true # Default: false
-    attributes: 
-      img: class="lazyload"
-
-  thumb:
-    markup: data_picture
-    formats: [original]
-    widths: [400, 750, 1000]
-    noscript: true # Default: false
-    attributes: 
-      img: class="lazyload"
-
-  blogThumb:
-    markup: data_picture
-    formats: [original]
-    widths: [50, 100, 200]
-    noscript: true # Default: false
-    attributes: 
-      img: class="lazyload img-responsive"
-
-  placeholder:
-    markup: data_picture
-    formats: [original]
-    noscript: true # Default: false
-    attributes: 
-      img: class="lazyload"
-
-  backgroundImage:
-    markup: data_picture
-    widths: [400, 800, 1100, 1400]
-    formats: [original]
-    noscript: true # Default: false
-    attributes: 
-      img: class="lazyload"
-
-  # This is an example of how you'd get generated image and a URL, and nothing else.
-  direct:
-    markup: direct_url
-    fallback_format:  Default original
-    fallback_width: 600 # Default 800