topic Re: Creating a slide show in Blog, Website & Page Publishing

Creating a slide show

GSmith5 — Thu, 27 Jul 2023 21:32:58 GMT

I'm not sure what theme template I'm working on but I've been asked to see if the Home Page header image can be replaced with a slide show of a few images. I've tried using the slide module tool but the images are restricted to a much smaller size and because of that there's no chance of placing the header text over the images.

Re: Creating a slide show

kvlschaefer — Fri, 28 Jul 2023 12:15:15 GMT

Hi @GSmith5,

Thanks for reaching out to the Community!

You should be able to see the theme by clicking on the "Edit" button in the page editor and viewing the dropdown menu. I've shared a screenshot from my testing page for reference below 🙂

Would you be able to share which theme you are using with us, please? In addition, do you have a URL to your website if it's live? Thank you!

Best,

Kristen

Re: Creating a slide show

GSmith5 — Fri, 28 Jul 2023 19:19:01 GMT

G'day Kristen,

Many thanks for getting back to me. The theme being used for the website is 'Freehold'. Our site hasn't gone live yet but I thought I'd share this link in case it works for you. **edited for privacy reasons**

Cheers,

Greg

Re: Creating a slide show

kvlschaefer — Fri, 28 Jul 2023 19:19:35 GMT

Hello, Greg! ( @GSmith5),

You're very welcome!

Thank you for sharing your theme with us and the design issue you are running into with the slider module (I would have suggested using it!). This is very helpful information 🙂

Would you happen to have a picture of what the module looks like on your end? Have you tried out both Image Slider module options?

I wanted to invite our subject matter experts to this conversation to see if they have any advice.

Hi @Jnix284, @TomM2, @Anton - Do you have any module tips for @GSmith5?

Thank you!

Best,

Kristen

Re: Creating a slide show

Jnix284 — Fri, 28 Jul 2023 21:35:36 GMT

Hi @kvlschaefer happy to help @GSmith5 with creating an image slider in the hero using Freehold.

I downloaded the theme and recorded a video to go through the two image slider modules and the hero module settings to see what's possible - I've never used the theme prior to this and am not the developer of Freehold, but based on what I can find in the modules available, there isn't a module included that will allow you to use multiple images in the background while still having your hero text as an overlay.

If you decide to have a developer help you with creating a custom module, here is a link to the hero slider from Power Pro to show one way this can be implemented - I recommend starting with the theme developer to see if they provide customization services since they know their theme best.

Re: Creating a slide show

Anton — Fri, 28 Jul 2023 22:15:43 GMT

Hi @GSmith5,

just a tipp before getting into the module creation: if you're working with a default or marketplace theme I recommend you to create a child-theme and use it as your default theme (if you haven't already). The benefit of a child-theme is that you can enhance&modify elements from the default/marketplace theme.

About the hero-slider: It's a quite common module(but also got it's drawbacks) and there are many different solutions how you can achieve this.

My personal go-to approach is this:

First decide which slider script you'd like to use - there are A LOT of them out there. To save you some time here's a list of the most common once which are easy to work with within HubSpot:

slick slider - a bit older than others from the list but very light weight and gets the job done in most cases
swiperJS - a very modern and very customizable script but might have to many options in most cases
SplideJS - very similar to swiperJS but has some "under-the-hood" differences

Simply look at the most basic layout and the functionality in the documentation of each script and decide which is more appealing/better fitting to the usecase.

Or you can look for "pure" HTML+CSS solutions on pages like codepen but I don't recommend that since it's gonna be a lot more work in most cases

Once you've choosen a script you like head over to your Design-Tools (since it's easier) but you check out the local development option.

To keep it as easy as possible I'll describe the Design-Tool way from here.

create a new module
- If you're working with a child theme, open the child-theme folder and right-click on the modules folder. If you don't use one you can select "New" - "New file" in the left sidebar
- Select "Module" in the dropdown and click next
- Select the page types you'd like to use the module in (important: don't select email if available since this module won't work in emails)
- select if it should be a local or global module
  - local module: can be used on several pages or several times on one page with different content
  - global module: can be used on several pages or several times on one page with the same content; great if you want to display the same content multiple times without put in the content each time
Add the core functions you want/need each slide to have via the Fields in the right sidebar. My recommendations from what I see in your shared screenshot:
- Image for background ( name: Slide background)
- Text for headline ( name: Headline )
- Text for subline ( name: Subline )
- Link for button ( name: Button URL )
- Text for button ( name: Button label )
Group all elements(Actions -> Group) - most importantly - enable the repeater option(at the very bottom of the right sidebar) inside this group
Write the code. For demo purposes I'll go with the swiperJS but it's basically the same for each script

HTML+Hubl area:

{# start Slider CSS #} {% require_css %} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/> {# the stylesheet of the slider #} <style> {# custom styling; feel free to modify or use existing classes from your theme #} {% scope_css %} .swiper-slide.image-bg{ background-size:cover !important; {# required #} background-position:center center; {# required #} min-height:40vh; padding-top:5rem; padding-bottom:5rem; display: flex; flex-direction: column; justify-content: center; } .content-wrapper{ max-width:80%; width:100%; margin:0 auto; } {% end_scope_css %} </style> {% end_require_css %} {# end Slider CSS #} {# start module layout #} <div class="hero-slider"> <div class="swiper-wrapper"> {# start single slide #} {% for single_slide in module.slides %} <div class="swiper-slide image-bg" style="background:url('{{ single_slide.background_image.src }}')"> <div class="content-wrapper"> <h1>{{ single_slide.headline }}</h1> <p class="hero-slider-subline">{{ single_slide.subline }}</p> {# start button #} {% if single_slide.button_url.url.href %} {% set href = single_slide.button_url.url.href %} {% if single_slide.button_url.url.type is equalto "EMAIL_ADDRESS" %} {% set href = "mailto:" + href %} {% endif %} <a href="{{ href }}"{% if single_slide.button_url.open_in_new_tab %} target="_blank"{% endif %}{% if single_slide.button_url.rel %} rel="{{ single_slide.button_url.rel }}"{% endif %} class="{# replace this with your button class(es) #}"> {{ single_slide.button_label }} </a> {% endif %} {# end button #} </div> </div> {% endfor %} {# end single slide #} </div> </div> {# end module layout #} {# start Slider script #} {% require_js %} <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> {# the slider script #} {# Initialize Swiper #} <script> var swiper = new Swiper(".hero-slider", { {# check out the docs of your chosen slider script for follwing options #} slidesPerView: 1, spaceBetween: 30, loop: true }); </script> {% end_require_js %}

🎉 congrats! You've done the biggest part.

The only thing left is the CSS part. If you need more guideance on this - will be happy to help

best,

Anton

Re: Creating a slide show

Jnix284 — Fri, 28 Jul 2023 22:41:32 GMT

awesome @Anton, love how quickly you could whip that up!

@GSmith5 I also forgot to mention you could check the new modules in the marketplace, this one looks promising.

On a side note - hero sliders are somewhat divisive in web design, I typically only recommend using if you are wanting to show different images in the background in place of a video to add some visual appeal, but where hero sliders go wrong is when the image and content (heading, text, CTA) all transition together - this can create a bad user experience and leave them confused about what you want to do and what is the most important CTA for the page.

Re: Creating a slide show

Anton — Fri, 28 Jul 2023 22:57:16 GMT

ha!

Thanks @Jnix284 - really appreciate that.

And you're totally right - sliders can have drawbacks, especially if you're diving into (tech.) SEO optimization, mobile-friendlyness and such

edit: Sorry for jumping into it - you've answered while I was typing 🙂