Rock alternative to linktr.ee, beacons.ai and other link aggregates

Shared by Randy Aufrecht, Community Bible Church-San Antonio
2 years ago

11.0 Communications, Web Intermediate

Many social media platforms don't offer a place to list links in posts and their about sections. That is where many of the link aggregate sites came in. Now you can have a list of links that are important to the people who visit your profile. The problem is, you can't track what people do when they are on these third party sites. What if you can create a similar function in Rock plus control the look of those link sites.

The Details

This system uses multiple Content Channels to connect your important Urls to your ministries/people.

Content Channel Types

Create 2 different ContentChannel Types:

Link Groups
1. Date Range Type: No Dates
2. Item Attributes:
  1. Theme: Single Select of values for theme selection
    (used by Page for page theme)
  2. Image: Image
  3. Title: Text
  4. Show Image As: Single-Select: Profile,Logo,None
  5. Show Name/Title: Boolean, Checkbox
  6. ShowContent: Boolean, Checkbox
Link Items
1. Date Range Type: Date Range
2. Include Time Checked
3. Item Attributes:
  1. Link Text: Text
  2. Link URL: Url Link, Should Always Show Condensed checked
  3. Bounce: Boolean, Checkbox (This is optional if you want to add some animation to highlight a certain link

Content Channels

Create a single content channel of type Link Items.
1. Named "Quick Link URLs"
2. "Items Manually Ordered" checked.
Create a content channel of type Link Groups.
1. Named "Quick Link Ministries"
2. Child Content Channels: Content Channel from Step 1.
3. "Items Manually Ordered" and Child Items Manually Ordered" checked
Create a content channel of type Link Groups.
1. Named "Quick Links"
2. Child Content Channels: Content Channel from Step 1 and 2.
3. "Items Manually Ordered" and "Child Items Manually Ordered" checked

Pages

Individual Links:

Advanced Settings: Page Routes: links/{slug}

Add Block: Content Channel Item View

Content Channel: Content Channel created in step 3
Lava Template:

{% stylesheet %}  
.links:after {   
    content: '';   
    display: block;   
    clear: both; 
} 
.linkbtn {
    display: inline-block;
    width: 100%;     
    padding: 20px 30px;     
    font-size: 36px;     
    line-height:1;     
    font-weight: 800;     
    text-align: center;     
    border-style: solid;     
    border-width: 2px;     
    border-radius: 100px;     
    transition: 300ms linear all;     
    margin-bottom: 30px; 
} 
.links a:hover {     
    color: inherit;
} 
.profileimg {     
    width:100%;     
    max-width:150px;     
    border-top-left-radius: 50%;     
    border-top-right-radius: 50%;     
    border-bottom-right-radius: 50%;     
    border-bottom-left-radius: 50%;     
    display: block;     
    float: none;     
    padding:5px; 
} 
.logoimg {     
    max-width:300px;     
    display: block;     
    float: none;     
    padding:5px; 
} 
@media screen and (max-width: 767px) {   
    .links .linkbtn  {     
        font-size: 24px;   
    } 
} 
.bounce {     
    bottom:0;     
    animation: bounce 0.5s infinite alternate;     
    -webkit-animation: bounce 0.5s infinite alternate;     
}     
@keyframes bounce {         
    0% { transform: translateY(0); }         
    30% { transform: translateY(5px); }         
    50% { transform: translateY(0); }         
    100% { transform: translateY(0); }     
}     
@-webkit-keyframes image {         
    0% { transform: translateY(0); }         
    30% { transform: translateY(5px); }         
    50% { transform: translateY(0); }         
    100% { transform: translateY(0); }     
} 
{% endstylesheet %} 
<div class="links">
    {% assign personimg = Item | Attribute:'Image' %}     
    {% assign position = Item | Attribute:'Title' %}     
    {% assign theme = Item | Attribute:'Theme','RawValue' %}     
    {% assign showimageas = Item | Attribute:'ShowImageAs' %}     
    {% assign showcontent = Item | Attribute:'ShowContent','RawValue' | AsBoolean %}     
    {% assign showname = Item | Attribute:'ShowName','RawValue' | AsBoolean %}     
    {% case theme %} /* change based on your themes */     
    {% when "Kids" %}         
        {% stylesheet %}         
        .linkbtn-1 {             
            color: #fff;             
            border-color: #00ADEE;             
            background-color: #00ADEE;         
        }         
        .linkbtn-2 {             
            color: #fff;             
            border-color: #F3E900;             
            background-color: #F3E900;         
        }         
        .linkbtn-3 {             
            color: #fff;             
            border-color: #F06475;             
            background-color: #F06475;         
        }         
        .linkbtn-4 {             
            color: #fff;             
            border-color: #F8BDBE;             
            background-color: #F8BDBE;         
        }         
        {% endstylesheet %}         
        {% capture logo %}https://www.oneandall.church/Content/ExternalSite/kids.png{% endcapture %}     
    {% when "Youth" %}         
        {% stylesheet %}         
        .linkbtn-1 {             
            color: #fff;             
            border-color: #8DC63F;             
            background-color: #8DC63F;         
        }         
        .linkbtn-2 {             
            color: #fff;             
            border-color: #FFCB03;             
            background-color: #FFCB03;         
        }         
        .linkbtn-3 {             
            color: #fff;             
            border-color: #F15A29;             
            background-color: #F15A29;         
        }         
        .linkbtn-4 {             
            color: #fff;             
            border-color: #FFB8FF;             
            background-color: #FFB8FF;         
        }         
        {% endstylesheet %}
        {% capture logo %}https://www.oneandall.church/Content/ExternalSite/IMG_9867.PNG{% endcapture%}
    {% when "YA" %}         
        {% stylesheet %}         
        .linkbtn-1 {             
            color: #fff;             
                border-color: #93d4ca;
                background-color: #000;
        }
        .linkbtn-2 {
            color: #fff;
            border-color: #93d4ca;
            background-color: #000;
        }
        .linkbtn-3 {
            color: #fff;
            border-color: #93d4ca;
            background-color: #000;
        }         
        .linkbtn-4 {
            color: #fff;
            border-color: #93d4ca;
            background-color: #000;
        }
        {% endstylesheet %}
        {% capture logo %}https://www.oneandall.church/Content/ExternalSite/profile_oneandallya.png{% endcapture%}
    {% else %}
        {% stylesheet %}
        .linkbtn-2 {
            color: #fff;
            border-color: #ffc905;
            background-color: #ffc905;
        }
        .linkbtn-3 {
            color: #fff;
            border-color: #ff6675;
            background-color: #ff6675;
        }
        .linkbtn-1 {
            color: #fff;
            border-color: #4054d9;
            background-color: #4054d9;
        }
        .linkbtn-4 {
            color: #fff;
            border-color: #ffb1bb;
            background-color: #ffb1bb;
        }
        {% endstylesheet %}
        {% capture logo %}https://www.oneandall.church/Themes/OneAll/Assets/Images/logo-yellow@2x.png{% endcapture %}
    {% endcase %}
    <div class="col-sm-6 col-xs-12 col-sm-offset-3 mb-3">
        {% case showimageas %}
        {% when 'Logo' %}
            <img src="{{logo}}" class="mx-auto logoimg">
        {% when 'Profile' %}
            {{personimg}}
        {% else %}
        {% endcase %}
        {% if showname == true %}
            <p class="text-center color-white">{{ person.Title }}<br>
            {{ position }}</p>
        {% endif %}
        {% if showcontent == true and Item.Content <> '' %}
            <p class="text-center color-white">{{Item.Content}}</p>
        {% endif %}
    </div>
    <div class="mt-5 mb-3">
        {% assign childitems = Item.ChildItems | Sort:'Order' %}
        {% assign onebounce = false %}
        {% for child in childitems %}
            {% if child.ChildContentChannelItem.ContentChannelTypeId == 23 %} /- Id of Link Groups Content Channel Type -/
                {% assign gchilditems = child.ChildContentChannelItem.ChildItems | Sort:'Order' %}
                {% for gchild in gchilditems %}
                    {%- assign link1  = gchild.ChildContentChannelItem | Attribute:'LinkURL'  -%}
                    {%- assign text1  = gchild.ChildContentChannelItem | Attribute:'LinkText'   -%}
                    {%- assign itembounce = gchild.ChildContentChannelItem | Attribute:'Bounce','RawValue' | AsBoolean-%}
                    <div class="{%- if onebounce == false and itembounce == true -%}{%- assign onebounce = true -%}bounce {% endif %}info-item col-sm-6 col-xs-12 col-sm-offset-3">
                        <a href="{{link1}}" class="linkbtn {% cycle 'bg': 'linkbtn-1','linkbtn-2', 'linkbtn-3', 'linkbtn-4' %}">
                            {{ text1 }}
                        </a>
                    </div> 
                {% endfor %}
            {% else %}
                {%- assign link1  = child.ChildContentChannelItem | Attribute:'LinkURL'  -%}
                {%- assign text1  = child.ChildContentChannelItem | Attribute:'LinkText'   -%}
                {%- assign itembounce = child.ChildContentChannelItem | Attribute:'Bounce','RawValue' | AsBoolean -%}
                <div class="{%- if onebounce == false and itembounce == true -%}{%- assign onebounce = true -%}bounce {% endif %}info-item col-sm-6 col-xs-12 col-sm-offset-3">
                    <a href="{{link1}}" class="linkbtn {% cycle 'bg': 'linkbtn-1','linkbtn-2', 'linkbtn-3', 'linkbtn-4' %}"> 
                        {{ text1 }}
                    </a> 
                </div>
            {% endif %}
        {% endfor %}
    </div> 
</div>

All Links:

Advanced Settings: Page Routes: links

Add Block: Content Channel View

Channel: Content Channel created in step 3
Format:

<style>
.links:after {
    content: '';
    display: block;
    clear: both;
}
.linkbtn {
    display: inline-block;
    width: 100%;
    padding: 20px 30px;
    font-size: 36px;
    line-height:1;
    font-weight: 800;
    text-align: center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100px;
    transition: 300ms linear all;
    margin-bottom: 30px;
}
.linkbtn-1 {
    color: #fff;
    border-color: #4054d9;
    background-color: #4054d9;
}
.linkbtn-2 {
    color: #fff;
    border-color: #ffc905;
    background-color: #ffc905;
}
.linkbtn-3 {
    color: #fff;
    border-color: #ff6675;
    background-color: #ff6675;
}
.linkbtn-4 {
    color: #fff;
    border-color: #ffb1bb;
    background-color: #ffb1bb;
}
@media screen and (max-width: 767px) {
    .links .linkbtn  {
        font-size: 24px;
    }
}
</style>

<div class="links">
    <div class="mt-3 mb-3 ">
        {% for Item in Items %}
            <div class="info-item col-sm-6 col-xs-12 col-sm-offset-3">
                <a href="/links/{{Item.PrimarySlug}}" class="linkbtn {% cycle 'bg': 'linkbtn-1','linkbtn-2', 'linkbtn-3', 'linkbtn-4' %}">
                    {{ Item.Title }}
                </a>
            </div>
        {% endfor %}
    </div>
</div>

Order Items By: Order

Recipe

Rock alternative to linktr.ee, beacons.ai and other link aggregates

Rock alternative to linktr.ee, beacons.ai and other link aggregates

The Details

Content Channel Types

Content Channels

Pages

Login to add a comment...