Level 10

Question

Example of guided landing pages with "carousel"-like functionality

Forum|Forum|10 years ago
December 16, 2015
4 replies
6481 views

We have a project underway that will require more content than the viewable portion of the page can display. We already have the approach in place for our new website, but the team was wondering if something like this could be built into a Marketo guided landing page template. Has anyone ever done this using guided landing pages? Is it even possible to build this sort of functionality into a template? If so, I'd love to see some examples.

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SanfordWhiteman

Level 10

Typically a carousel is initialized and controlled via a JS library (pure JS or -- ugh -- jQuery) by passing in either [a] a list of image paths or [b] an existing HTML/IMG block which is then slurped up and reorganized when the library loads.

The [a] approach isn't good for templating because you want users to be able to choose images.

The [b] approach would be totally fine for a GLPT. You can create image placeholders and then the user can populate with Marketo assets.

I wouldn't necessarily expect the the carousel to render properly within the LP Editor, though. You'd probably have to preview the page to make sure everything loaded in actual browser order.

Grégoire_Miche2

Level 10

To complement Sanford's answer, it is not that easy to include a custom HTML block in a Guided LP (see here: )

The trick is to create a text variable in the template and use that variable to fill in HTML code or a JS script ion the page.

-Greg

SanfordWhiteman

Level 10

You wouldn't need a custom HTML block, though.

Just a preset # of mktoImg areas. Then the user fills them in by choosing from the asset lib. This is actually better as far as end-user lockdown IMO.

Casey_Grimes2

Level 10

First off, I'm assuming with this answer that you have a fixed number of rotating assets that will always be roughly the same. If it's widely varying per page using the template, then go construct something with AngularJS on a free-form landing page. Do not pass go, do not collect $200. In fact, if I'm guessing correctly and you plan to have dynamic speakers pop up per location on the same page, you really should just go code this in AngularJS.

However, I'm going to assume that you'll have roughly the same amount each time and that these are going to be separate landing pages. In that case you could just use something a la carousel.js and have each of your item divs be Marketo rich text areas (since it looks like you're using both photos and text in the mockup.)

Dan_Stevens_Author

Level 10

Courtney, the goal here is to offer maximum flexibility - so no, we will not have a fixed number of assets here. Since this doesn't seem to be feasible using guided landing page templates, we'll have to remove this feature from the scope of these pages. Right now, the emphasis is on building out appropriate guided landing page templates and move away from the traditional landing pages. Appreciate the input.

SanfordWhiteman

Level 10

But you don't need to fix the # of assets. You need to allocate a maximum # of assets -- but surely for an LP you can say, "the carousel has up to 30 images." Unused ones are OK.

Milena_Mitova

Level 2

Hi, I have built 2 types of "carousels" or should I say simple slideshows. Both on guided templates.

- One allows for the image on the top banner to slide only:

https://go.bauschhealth.com/2020-03-31RotatingBanner.html

- the other allows for the image + text to slide.

https://go.bauschhealth.com/caroussellogos.html

Hope this is useful. I am using a very simplistic javascript + css, happy to share. Thanks

Ekaterina_Byank

Level 2

Hi, would you be able to share how you create the first carousel with images changing? Thanks

Milena_Mitova

Level 2

Sure, email me at milena.mitova@bauschhealth.com, happy to send you the code. Thank you

Dave_Roberts

Level 10

Hey Dan,

If you've got Bootstrap running in your template, you could start with any of the copy/paste carousel options you get for free with Bootstrap: https://getbootstrap.com/docs/4.5/components/carousel/

It's a little trickier to set them up w/ 3 "columns" showing and then only scroll one "column" at a time, but it's much easier to do a group of 3 and scroll 3 at a time. You'd just need to replace the HTML inside the "carousel-item" with a row and 3-cols that held your speaker cards.

There's also a tabbed interface that you could use for the three orange buttons here: https://getbootstrap.com/docs/4.5/components/navs/#javascript-behavior - you could nest a carousel in each "tab-pane" and then hide/show the different panes using the buttons at the top. You'd need to do a little work to customize the HTML and CSS, but the scripting is all setup and is class-based so it's easy to copy/paste more HTML in there to create or remove cards.

This'll work in the Marketo editor as well, so it's really easy for someone to come in and update. It'll show up (and scroll) in the LP editor, so you can use the built-in nav to scroll thru the different "slides" and click in to edit each of them as needed.

S

sd-dev-user-01

Level 1

Hi Dave!

Thanks for posting this almost 5 years ago! I was able to create a bootstrap carousel on a guided landing page and had the amount of items customizable using boolean. The problem is that, if/when one of the items are turned off the carousel still cycles through an empty container. The active class appears after the off class.

Would you happen to know if this is fixable and how to do so?

Dave_Roberts

Level 10

@sd-dev-user-01 glad to see this helped you get something going, always nice to see things from so long ago come back to the surface.

In order to get the boolean setup to work the way you've got it in there (on/off classes) you'd need to modify the carousel js to skip any .carousel-item with the "off" class which makes the on/off thing a little less of an ideal approach. In the past, I've just gone in and removed the HTML for the carousel-item that I didn't want to display, but this isn't the most intuitive approach for anyone without some HTML know-how so it can be difficult for some end-users to manage for sure.

Another approach might be to add a script to the page to remove any carousel item with the off class from the DOM and this might avoid the empty slide? Maybe something like this:

<script>
window.addEventListener('load', function () {
  $(document).ready(function(){
    $('.carousel-item.off').remove(); // remove hidden carousel items
  });
});
</script>

In my experience, adding the 'load' event listener with a nested 'ready' function has worked to get scripts to run within the context of the LP editor so that's why there's kind of redundant layers of loading going on there.

If you've got this setup on a page somewhere that you could send me a link to I'd be happy to fiddle around in the inspector tool in the browser to see if I can get something to work if this doesn't do the trick for ya. Feel free to DM a link as well if you're more comfortable going that route.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded