Slider Revolution

support
1

Hi,

I would like to ask an advice regarding the following problem:

We are using Hugo (version v0.55.5/extended windows/amd64) for generating our static site https://aahi.io

I am now looking for the most elegant solution how to include a Slider Revolution (https://sliderrevoluitoin……) generated slider into the homepage of our Hugo site.

Ideally we would like:

  1. Fully separate slider-generated code from our website code
  2. Be able to include generated sliders at will into parts of the website via partials
  3. We should be able to easily update/renew the generated sliders
  4. We need multilingual support but we can live with per-language generated slider

One idea is to keep the generated sliders in /static/sliders and read the main slider.html of each slider with readFile and modify it with replace

Can the Hugo gurus here share some insights if and how this can be done most elegantly?

Many thanks…

2

Have a look at Inline Shortcodes

By using these you can call a partial directly from content files.

Also by coupling the above with Page Resources and Page Bundles it is possible to write the slider code once store it in a partial and re-use it multiple times for different content.

This is an approach that meets all of the criteria that you mentioned, since you will be adding sliders with content in markdown files and not in templates.

1 Like
3

Hi @alexandros! Thanks for the reaction, let me clarify @LexSpeedKB question (we are from the same organisation):

There is no problem to bundle a slider as a page bundle and call it via a short-code, the real issue we are facing is how to cleanly integrate a rather dirtily generated Slider-Revolution sliders into our clean Hugo code :slight_smile:

So, the Slider Revolution plugin produces something like this for each slider:

├── NOTICE.txt
├── assets
│   ├── burger-1.png
│   ├── courgette.png
│   ├── dummy.png
│   ├── egg-1.png
│   ├── fish.png
│   ├── fork-1.png
│   ├── iphone_cutout.png
│   ├── knife.png
│   ├── leaf-1.png
│   ├── onion-1.png
│   ├── paprika.png
│   ├── screen.jpg
│   ├── transparent.png
│   └── wheat.png
├── css
│   └── settings.css
├── fonts
│   ├── font-awesome
│   │   ├── css
│   │   │   └── font-awesome.css
│   │   └── fonts
│   │       ├── FontAwesome.otf
│   │       ├── fontawesome-webfont.eot
│   │       ├── fontawesome-webfont.svg
│   │       ├── fontawesome-webfont.ttf
│   │       └── fontawesome-webfont.woff
│   ├── pe-icon-7-stroke
│   │   ├── css
│   │   │   ├── helper.css
│   │   │   └── pe-icon-7-stroke.css
│   │   └── fonts
│   │       ├── Pe-icon-7-stroke.eot
│   │       ├── Pe-icon-7-stroke.svg
│   │       ├── Pe-icon-7-stroke.ttf
│   │       └── Pe-icon-7-stroke.woff
│   └── revicons
│       ├── revicons.eot
│       ├── revicons.svg
│       ├── revicons.ttf
│       └── revicons.woff
├── js
│   ├── extensions
│   │   ├── revolution.extension.actions.min.js
│   │   ├── revolution.extension.carousel.min.js
│   │   ├── revolution.extension.kenburn.min.js
│   │   ├── revolution.extension.layeranimation.min.js
│   │   ├── revolution.extension.migration.min.js
│   │   ├── revolution.extension.navigation.min.js
│   │   ├── revolution.extension.parallax.min.js
│   │   ├── revolution.extension.slideanims.min.js
│   │   └── revolution.extension.video.min.js
│   ├── jquery.themepunch.enablelog.js
│   ├── jquery.themepunch.revolution.min.js
│   └── jquery.themepunch.tools.min.js
└── slider.html

We don’t want to manipulate this generated output manually so that if we need to update/modify the generated slider we don’t have to do the manual re-integration again.

So the idea is to keep these generated sliders folders somewhere separately, like e.g. /static/sliders/homepage-cs/ and have a clever Hugo code (in a short-code or partial, doesn’t matter) that would read the slider name’s slider.html, parse it into blocks (head/style/js/body) and re-insert the relevant blocks of the relevant layout or content page.

I guess we are looking into writing a custom pipeline if we want to do it this way?

Or can you guys see some other elegant way to do it? Any other ideas at all?

Regards,

Alex

4

The /static folder just presents those files as is, on the published site; no magic. Hugo does not manipulate them. To me your challenge seems possible to script though, running some script after you update the files from the vendor.

5

I agree with @RickCogley either use scripts on the frontend or experiment with Local File Templates to render slider.html with its assets from the /static/ folder. You may be able to render it by using a mix of what was already mentioned above.

But let me be honest here. Hope you don’t get it wrong but what is so special about some proprietary Wordpress plugin slider that is written with jQuery?

There are better alternatives out there that can be made to work with Hugo in a more elegant way such as the iDangerous swiper which I am using for some of my projects.

Also note that jQuery has become somewhat redundant these days and older versions have vulnerabilities.

2 Likes
6

@alexandros That’s exactly my thinking but the marketing girls just seem to love that particular Slider Revolution and we were not able to convince them otherwise this far. I will certainly check the iDangerous swiper and if you have any other alternative ideas - very welcome!

Thanks so far!

Alex

7

Slider Revolution code is sheer horror, but it does solve one purpose: creates beautiful responsive slides that look good on any device.

Any idea if there’s another plugin that can be combined with iDangerous swiper to achieve fully automated slide responsiveness?

To illustrate our problem, below two versions of our home page, first with slider revolution, second with our home-made js:

https://beta.aahi.io (slider revolution)

https://beta.aahi.dev (homemade jquery)

And I do understand why our marketing prefers the first version. :slight_smile:

OK, perhaps we miss a duly qualified web-developer who would be able to make #2 look like #1 but we are a startup and that’s the constraints we have at the moment…

Have a good day!

Alex