title = "News"
url = "/news/:page?"
layout = "default"
is_hidden = 1
lazy_load = 1
meta_title = "Caribbean Travel and Tours  - What's New?"
meta_description = "News updates on what's happening in the world of Caribbean travel experiences."
robot_index = "index"
robot_follow = "follow"
enabled_in_sitemap = 0
model_all_posts = 0
model_include_default = 0
use_updated_at = 1
changefreq = "always"
priority = 0.1

[blogPosts]
pageNumber = "{{ :page }}"
categoryFilter = "news"
postsPerPage = 9
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "news"
postPage = "article"

[blogCategories]
slug = "news"
displayEmpty = 1
categoryPage = "article"

[tags]
results = 0
sortOrder = "created_at desc"
==
{% set posts = blogPosts.posts %}
<div class="main overflow-hidden">
    {% put styles %}
    <style>
    .slider__main__content {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: end;
        padding-left: 25px;
        padding-right: 100px;
        /*padding-top: 110px;*/
    }
    .back__btn__blk {
        padding-top: 0px;
        margin-bottom: 10px;
        margin-right: 20px;
    }
    .tab__area {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .tab__topbar {
        text-align: center;
        padding-bottom: 10px;
    }
    .pagination > li {
        list-style: none! important;
    }
    </style>
    {% endput %}
    <!-- =================== Slider AREA START ===================== -->
    <div class="slider__area">
        <div class="slider__left__blk" style="background-image: url({{ record.about_repeater_image|media }});">
            <div class="slider__main__content">
                <div class="slider__pages">
                    <div class="back__btn__blk">
                        <a href="#" onclick="history.back()"><i class="fal fa-long-arrow-left"></i>Go Back</a>
                    </div>
                    <a href="/">Home</a>
                    <span>{{ record.home_about_title }}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- =================== Slider AREA START ===================== -->


    <!-- =================== SERVICE AREA START ===================== -->
    <section class="tab__area">
        {% if backendLoggedIn and editMode %}
            <a style="position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/rainlab/blog/categories/update/{{ category.id }}" role="button" target="_blank">Edit category</a>
        {% endif %}
        <div class="container">
        <h1>{{ record.home_about_title }}</h1>
        <div class="row">
        {% for post in posts %}
            <div class="col-md-4" style="margin: 5px 0px;">
                <div style="text-align: center; border: solid 0.5px; padding: 5px; margin: 0px 0px; height: 100%;">
                {% if backendLoggedIn and editMode %}
                    <a style="display: flex;position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/rainlab/blog/posts/update/{{ post.id }}" role="button" target="_blank">Edit post</a>
                {% endif %}
                    <div style="height: 200px; display: flex; justify-content: center; align-items: center; overflow: hidden">
                    <a href="{{ post.url }}"><img src="{% if post.featured_images is not empty %}{{ post.featured_images.0.path }}{% endif %}" style="min-height:200px; min-width:100%; object-fit: cover;" noresize></a>
                    </div>
                        <span class="button" style="position: relative;top: -25px;background: #d9d9d9;border-radius: 10px;padding: 4px;">{{ post.categories.0.name }}</span>
                        <br>
                        <h2 style="font-size: 20px"><a href="{{ post.url }}">{{ post.title }}</a></h2>
                        {{ post.summary|striptags|slice(0,200)|raw }}
                </div>
            </div>
        {% endfor %}
        </div>
{% if posts.lastPage > 1 %}
    
    <ul class="pagination">
            <li>Page: </li>
        {% if posts.currentPage > 1 %}
            <li><a href="{{ this.page.baseFileName|page({ (blogPosts.pageParam): (posts.currentPage-1) }) }}">&larr; Prev |&nbsp;</a></li>
        {% endif %}

        {% for page in 1..posts.lastPage %}
            <li class="{{ posts.currentPage == page ? 'active' : null }}">
                <a href="{{ this.page.baseFileName|page({ (blogPosts.pageParam): page }) }}"> {{ page }}  {% if not loop.last %}|&nbsp;{% endif %}</a>
            </li>
        {% endfor %}

        {% if posts.lastPage > posts.currentPage %}
            <li><a href="{{ this.page.baseFileName|page({ (blogPosts.pageParam): (posts.currentPage+1) }) }}">&nbsp;| Next &rarr;</a></li>
        {% endif %}
    </ul>
{% endif %}
        </div>
    </section>
</div>