How do I add a carousel and images to hugo-c-p-theme?

kishaningithub / hugo-creative-portfolio-theme

Port of the creative portfolio theme to Hugo

https://themes.gohugo.io/hugo-creative-portfolio-theme/

MIT License

447 stars 292 forks source link

How do I add a carousel and images to hugo-c-p-theme? #110

Closed nrbysf closed 1 year ago

nrbysf commented 1 year ago

Hi @kishaningithub,

The original bootstrapious template has these sliding galleries, e.g., here: https://demo.bootstrapious.com/creative/2-0-1/detail.html

How do I set these on my page? I have found some helpful links, but following two of them, I ended up with faulty HTMLs.

First case: https://hugocodex.org/add-ons/slider-carousel/ >> I need help with the carousel.html in vs code.

shortcodes-carousel

In this case, I am also trying to decide which layout document the guide refers to in steps 3. and 7.

Second case: https://github.com/tbiering/hugo-slider-shortcode >> Vs code shows nine problems with gallery-slider.html.

Third case: I have discovered these files in the theme:

owl.carousel.min.js
owl.carousel.css
owl.theme.css

I could use this help: https://discourse.gohugo.io/t/how-do-i-add-a-carousel-and-images-to-minimal-theme/9014/4 - but I need to learn how to link CSS and JS files.

I would be grateful for your help. Thank You

nrbysf commented 1 year ago

Hi @kishaningithub,

I could create a carousel by following the instructions of this link: https://hugocodex.org/add-ons/slider-carousel/

I just don't know how to make another one.

Could you give some instructions on how to use the owl carousel in this template, please. 🙏 🙃

Until then, I will continue experimenting.

nrbysf commented 1 year ago

:point_right: Here is how you can add different image slides/carousels to the theme using this guide (hugo codex).

Highlights:

In Step 3. (Make sure the footer of your layout document looks like this) use the baseof.html (Copy it into your _default folder.)
Step 6 has a mistake: Save the file in the ‘layouts/partials/shortcodes’ directory of your project >> it is instead: ‘layouts/shortcodes’ directory.
The yaml file is not needed.
Use the shortcode installation part with different shortcodes and carousel.html.

:raised_hands: :fireworks:

thrasosc commented 1 year ago

Hello friend, I am having the same issue you had, and I have been following your steps very closely to resolve it.

Do you remember having issues with the carousel showing up empty like this?

Also, is this how your baseof.html looks like?

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>{{ partial "head.html" . }}</head>
<body>
  <div id="all">
      <div class="container-fluid">
          <div class="row row-offcanvas row-offcanvas-left">
              {{ partial "sidebar.html" . }}
              {{ block "main" . }}
              {{ end }}
          </div>
      </div>
  </div>
  {{ partial "scripts.html" . }}
<script type="text/javascript" src="/static/js/carousel.js"></script>
<link rel="stylesheet" href="/static/css/carousel.css">
</body>
</html>

If you could provide me with the source code of the website you built using these themes, I would very much appreciate it. Thank you.