Loading ...

Inserting an image slider in a blog | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Inserting an image slider in a blog
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Inserting an image slider in a blog

Subscribe to RSS
  • cdale

    Hi there, 

    Is there a way we can insert an image slider into a blog post? 

    Thanks, 
    Chloie

  • Foster

    Hi Chloie,

    Can you elaborate on what you mean by an image slider? As in the ability to scroll up and down on an image larger than the page length? 

    Thanks,
    Foster

  • cdale

    Hey  Foster Clark , 

    This would be similar to the photo carousels you can use on page builder pages. We'd like to have something similar to insert in a blog so our people can click through images. Does that help?

    Thanks, 
    Chloie

  • raghav_khunger

    Hi Chloie,

    Are you talking about Carousel something like this: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

    Do you want to insert that inside the Editor?

    Thanks,
    Raghav

     

  • cdale

    Raghav Khunger yes! That's exactly what we're looking for. I've tried putting in some css/html but have had some issues aligning everything. 

    Thanks,
    Chloie

  • raghav_khunger
    Answered

    Hi Chloie,

    I can share one example to do that:

    Sample code:

     

    <div class="axero-widget axero-widget-carousel axero-widget-hide-header  ">
        <div class="axero-widget-header">
            <i class="icon-exclamation-sign"></i>
            <h3>Menu</h3>
        </div>
        <div class="axero-widget-content">
    
            <div class="carousel carousel-fade slide" id="myCarousel-3009">
                <ol class="carousel-indicators"><li data-target="#myCarousel-3009" data-slide-to="0" class="active"></li><li data-target="#myCarousel-3009" data-slide-to="1"></li><li data-target="#myCarousel-3009" data-slide-to="2"></li><li data-target="#myCarousel-3009" data-slide-to="3"></li><li data-target="#myCarousel-3009" data-slide-to="4"></li><li data-target="#myCarousel-3009" data-slide-to="5"></li></ol>
                <div class="carousel-inner">
        
                        <div class="item active">
                            <img src="https://www.communifire.com/Assets/Uploaded-CMS-Files/3905e86e-0377-4181-814b-ef00c205a832.jpg" alt="12 Reasons to Celebrate at Work">
                            <div class="carousel-caption">
                                <div class="carousel-caption-inner">
                                    <h4><a title="12 Reasons to Celebrate at Work" href="/spaces/252/human-resources/articles/news/6715/12-reasons-to-celebrate-at-work">12 Reasons to Celebrate at Work</a></h4>
                                    <p>I was excited to find this brave little challenge in the sea of productivity and negativity complaints. Here’s a person, I thought, who is not out to brainwash and slave-drive her fellow coworkers. But to refresh and entertain!</p>
                                    <div class="p-user">
                                        <div class="p-avatar">
                                            <a href="https://www.communifire.com/people/admin"><img src="https://www.communifire.com/Assets/Uploaded-Photos/376/902638f2-99ec-47f5-8641-f3aaf73764f4.jpeg" alt="Alexis Fox"></a>
                                        </div>
                                        <div class="p-user-info">
                                            <div class="p-user-name">
                                                <a class="axero-user-card-link" data-user="376" href="https://www.communifire.com/people/admin" title="Alexis Fox">Alexis Fox</a>
                                            </div>
                                            <div class="p-publish-date">
                                                3/8/2018&nbsp;&nbsp;⋅&nbsp;&nbsp;<i class="icon-comment"></i> 2
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <div class="item">
                            <img src="https://www.communifire.com/Assets/Uploaded-CMS-Files/a0909a6a-32fc-4d73-87e5-430168135a9e.jpg" alt="How to Get Your Employees to Use Technology">
                            <div class="carousel-caption">
                                <div class="carousel-caption-inner">
                                    <h4><a title="How to Get Your Employees to Use Technology" href="/spaces/252/human-resources/articles/news/6716/how-to-get-your-employees-to-use-technology">How to Get Your Employees to Use Technology</a></h4>
                                    <p>The particular individuals who left these comments on my site do not work for the same company. I don’t know about you, but I definitely sense office drama brewing beneath the surface...</p>
                                    <div class="p-user">
                                        <div class="p-avatar">
                                            <a href="https://www.communifire.com/people/admin"><img src="https://www.communifire.com/Assets/Uploaded-Photos/376/902638f2-99ec-47f5-8641-f3aaf73764f4.jpeg" alt="Alexis Fox"></a>
                                        </div>
                                        <div class="p-user-info">
                                            <div class="p-user-name">
                                                <a class="axero-user-card-link" data-user="376" href="https://www.communifire.com/people/admin" title="Alexis Fox">Alexis Fox</a>
                                            </div>
                                            <div class="p-publish-date">
                                                3/8/2018&nbsp;&nbsp;⋅&nbsp;&nbsp;<i class="icon-comment"></i> 4
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <div class="item">
                            <img src="https://www.communifire.com/Assets/Uploaded-CMS-Files/6de1b255-28b7-4800-8682-83865d99c966.jpg" alt="How to Get Coworkers to Read Your Emails">
                            <div class="carousel-caption">
                                <div class="carousel-caption-inner">
                                    <h4><a title="How to Get Coworkers to Read Your Emails" href="/spaces/252/human-resources/articles/news/6649/how-to-get-coworkers-to-read-your-emails">How to Get Coworkers to Read Your Emails</a></h4>
                                    <p>How can you advise people who refuse to read your advice, let alone take it? Maybe this is one of those rare occasions when you can blame the messenger. Meaning email…</p>
                                    <div class="p-user">
                                        <div class="p-avatar">
                                            <a href="https://www.communifire.com/people/admin"><img src="https://www.communifire.com/Assets/Uploaded-Photos/376/902638f2-99ec-47f5-8641-f3aaf73764f4.jpeg" alt="Alexis Fox"></a>
                                        </div>
                                        <div class="p-user-info">
                                            <div class="p-user-name">
                                                <a class="axero-user-card-link" data-user="376" href="https://www.communifire.com/people/admin" title="Alexis Fox">Alexis Fox</a>
                                            </div>
                                            <div class="p-publish-date">
                                                3/8/2018&nbsp;&nbsp;⋅&nbsp;&nbsp;<i class="icon-comment"></i> 3
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <div class="item">
                            <img src="https://www.communifire.com/Assets/Uploaded-CMS-Files/788f1467-cefb-48ce-b291-28497aabf151.jpg" alt="Can a Company’s Voice Be Strong and Clear When the Leadership Isn’t?">
                            <div class="carousel-caption">
                                <div class="carousel-caption-inner">
                                    <h4><a title="Can a Company’s Voice Be Strong and Clear When the Leadership Isn’t?" href="/spaces/252/human-resources/articles/news/6648/can-a-company-s-voice-be-strong-and-clear-when-the-leadership-isn-t">Can a Company’s Voice Be Strong and Clear When the Leadership Isn’t?</a></h4>
                                    <p>Today, let’s focus on something Internal Comms can do to make things better up and down the chain. Here’s a simple recipe. Whatever the message, make sure it comes across clear and strong...</p>
                                    <div class="p-user">
                                        <div class="p-avatar">
                                            <a href="https://www.communifire.com/people/admin"><img src="https://www.communifire.com/Assets/Uploaded-Photos/376/902638f2-99ec-47f5-8641-f3aaf73764f4.jpeg" alt="Alexis Fox"></a>
                                        </div>
                                        <div class="p-user-info">
                                            <div class="p-user-name">
                                                <a class="axero-user-card-link" data-user="376" href="https://www.communifire.com/people/admin" title="Alexis Fox">Alexis Fox</a>
                                            </div>
                                            <div class="p-publish-date">
                                                3/8/2018&nbsp;&nbsp;⋅&nbsp;&nbsp;<i class="icon-comment"></i> 0
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <div class="item">
                            <img src="https://www.communifire.com/Assets/Uploaded-CMS-Files/c722af0a-b138-45bc-aa95-a78eef88dbd3.jpg" alt="How Patagonia Helped Axero Overcome Pettiness">
                            <div class="carousel-caption">
                                <div class="carousel-caption-inner">
                                    <h4><a title="How Patagonia Helped Axero Overcome Pettiness" href="/spaces/252/human-resources/articles/news/6647/how-patagonia-helped-axero-overcome-pettiness">How Patagonia Helped Axero Overcome Pettiness</a></h4>
                                    <p>How do you solve pettiness in the workplace? I love this challenge, because I’ve actually solved it in my company. I’ve actually solved it without trying to solve it...</p>
                                    <div class="p-user">
                                        <div class="p-avatar">
                                            <a href="https://www.communifire.com/people/admin"><img src="https://www.communifire.com/Assets/Uploaded-Photos/376/902638f2-99ec-47f5-8641-f3aaf73764f4.jpeg" alt="Alexis Fox"></a>
                                        </div>
                                        <div class="p-user-info">
                                            <div class="p-user-name">
                                                <a class="axero-user-card-link" data-user="376" href="https://www.communifire.com/people/admin" title="Alexis Fox">Alexis Fox</a>
                                            </div>
                                            <div class="p-publish-date">
                                                7/12/2017&nbsp;&nbsp;⋅&nbsp;&nbsp;<i class="icon-comment"></i> 0
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <div class="item">
                            <img src="https://www.communifire.com/Assets/Uploaded-CMS-Files/9d5fc6f1-e249-4157-b3c0-e8a132a87107.jpg" alt="The Value of Processes and Procedures in the Workplace">
                            <div class="carousel-caption">
                                <div class="carousel-caption-inner">
                                    <h4><a title="The Value of Processes and Procedures in the Workplace" href="/spaces/252/human-resources/articles/news/6646/the-value-of-processes-and-procedures-in-the-workplace">The Value of Processes and Procedures in the Workplace</a></h4>
                                    <p>Nothing kills a project like a little lack of sharing and collaborating on standard processes and procedures. And, having spent my whole life in IT, I’ve seen the proof of this first hand. Here's how to fix it...</p>
    
                                </div>
                            </div>
                        </div>
                </div>
                <a data-slide="prev" href="#myCarousel-3009" class="left carousel-control">‹</a>
                <a data-slide="next" href="#myCarousel-3009" class="right carousel-control">›</a>
            </div>
    
    <script type="text/javascript">
        jQuery(function () {
            var html = '', carouselSelector = '#myCarousel-3009', items = jQuery(carouselSelector).find('div.item'),
            carouselIndicators = jQuery(carouselSelector).find('ol.carousel-indicators');
            for (var i = 0, len = items.length; i < len; i++) {
                html = html + '<li data-target="' + carouselSelector + '" data-slide-to="' + i + '"></li>';
            }
            carouselIndicators.html(html);
            carouselIndicators.find('li:eq(0)').addClass('active');
            jQuery(carouselSelector).find('div.item:eq(0)').addClass('active');
            jQuery(carouselSelector).carousel({
                interval: 10000
            });
        });
        </script></div></div>

    Take the above UI + JS code and paste it via View source in the editor:

    Saving the blog will make the detail page looks like this:

    i.e It will have an image slider:

     

    Pre conditions:

    Make sure you have allowed script tag and data-slide attrs in System Properties (admin/settings/manage-system-properties):

    Thanks,
    Raghav

  • cdale

    Thanks  Raghav Khunger ! 

    I went in and edited the code a little bit and got it working. I have a weird issue when clicking through my carousel though. I have three slides set up and when I click past the third slide I get the following screens, and then the option to click through three more times. 


    I also cannot click to the previous slide. Here's my code: 

    I noticed it auto corrected a bit after I entered the code. Any suggestions on how to make it work?

    Thanks!
    Chloie

  • gskamau
    Answered

    Hey Chloie,

    Your left/right buttons are within the carousel-inner container. Move the closing div tag before the buttons: in line 16, cut </div> and paste it before the code starting with <a class="left carousel-control" .

    You also need to include the script section:

    <script type="text/javascript">
        jQuery(function () {
            var html = '', carouselSelector = '#myCarousel-3009', items = jQuery(carouselSelector).find('div.item'),
            carouselIndicators = jQuery(carouselSelector).find('ol.carousel-indicators');
            for (var i = 0, len = items.length; i < len; i++) {
                html = html + '<li data-target="' + carouselSelector + '" data-slide-to="' + i + '"></li>';
            }
            carouselIndicators.html(html);
            carouselIndicators.find('li:eq(0)').addClass('active');
            jQuery(carouselSelector).find('div.item:eq(0)').addClass('active');
            jQuery(carouselSelector).carousel({
                interval: 10000
            });
        });
        </script>

    Add it before the last two </div>s.

    Grace

  • cdale

    Grace Kamau That worked! Thanks so much. 

    Out of curiosity is creating an easier solution for this kind of thing on Axero's radar for the future?

    Thanks!
    Chloie 

  • gskamau

    Hey Chloie,

    You can post a suggestion for this in our Suggestions and Feedback forum. We reference this area when considering new features and enhancements to add to Communifire. Also make sure to follow the New Enhancements page to stay updated on new features and bug fixes.

    Grace

  • raghav_khunger

    Hi Chloie,

    We already have that option in our Page Builder section.

    Carousel Template

    Adding slider via Editor seems to be ca custom requirement. For rare cases, we can have the above code to accommodate those requirements.

    Thanks,
    Raghav

  • cdale

    Grace Kamau ,  Raghav Khunger  thank you!

Page 1 of 1 (12 items)