Feature Request: Add Configurable HTML Partial Template with Slick Slider for itch.io Projects Showcase #4

New issue

Open

opened 2024-06-20 23:20:20 +02:00 by Aroy · 0 comments

Aroy commented

2024-06-20 23:20:20 +02:00

Owner

Description:
I would like to request the addition of a configurable HTML partial template to the Hugo theme, designed to showcase projects from itch.io using the Slick slider. This feature will enhance the theme by providing users with a visually appealing way to display their itch.io projects on their websites.

Rationale:
Integrating a Slick slider to showcase itch.io projects directly into the Hugo theme will greatly benefit users who develop and share games and other projects on itch.io. This feature will enhance user engagement by providing a dynamic and interactive way to browse projects.

Use Cases:

Game Developers: Users who create and publish games on itch.io can prominently display their projects on their website.
Content Creators: Artists, writers, and other creators who use itch.io to distribute their work can showcase their projects.
Portfolio Websites: Developers and designers can use this feature to create an interactive portfolio of their itch.io projects.

Implementation Ideas:

Configurable Template:
- Create a new partial template (e.g., itchio-slider.html) in the theme.
- Allow users to configure the template via a YAML configuration file.
Slick Slider Integration:
- Integrate the Slick slider JavaScript library to create a responsive and customizable slider.
- Ensure compatibility with Bootstrap for consistent styling and responsiveness.
Data Fetching:
- Provide a way to fetch and display project data from itch.io, either through manual entry in the YAML config or by using itch.io's API.
Customization:
- Enable customization of the slider (e.g., number of slides, autoplay, navigation arrows).
- Allow users to style the slider via custom CSS.
Documentation:
- Include clear documentation on how to configure and use the itch.io projects slider.
- Provide examples and configuration options for different use cases.

Additional Context:
Many Hugo theme users are creators who share their projects on itch.io. Adding this feature will enhance their websites by providing an engaging way to showcase their work. The integration of the Slick slider will ensure a modern and interactive user experience.

Example configuration in config.yaml:

params:
  itchio_slider:
    enabled: true
    title: "My Projects"
    autoplay: true
    autoplay_speed: 3000
    show_arrows: true
    projects:
      - title: "Project One"
        image: "/images/project-one.png"
        url: "https://example.itch.io/project-one"
      - title: "Project Two"
        image: "/images/project-two.png"
        url: "https://example.itch.io/project-two"

Example usage in a Hugo template:

{{ if .Site.Params.itchio_slider.enabled }}
  {{ partial "itchio-slider.html" . }}
{{ end }}

Example itchio-slider.html partial template:

<div class="itchio-slider-container">
  <h2>{{ .Site.Params.itchio_slider.title }}</h2>
  <div class="slick-slider">
    {{ range .Site.Params.itchio_slider.projects }}
      <div>
        <a href="{{ .url }}">
          <img src="{{ .image }}" alt="{{ .title }}">
          <h3>{{ .title }}</h3>
        </a>
      </div>
    {{ end }}
  </div>
</div>

<script>
  $(document).ready(function(){
    $('.slick-slider').slick({
      autoplay: {{ .Site.Params.itchio_slider.autoplay }},
      autoplaySpeed: {{ .Site.Params.itchio_slider.autoplay_speed }},
      arrows: {{ .Site.Params.itchio_slider.show_arrows }}
    });
  });
</script>

Additional Notes:
This implementation assumes the use of jQuery for Slick slider initialization, which is common with Bootstrap-based themes. Ensure jQuery and Slick slider libraries are included in the theme’s assets.

**Description**: I would like to request the addition of a configurable HTML partial template to the Hugo theme, designed to showcase projects from itch.io using the Slick slider. This feature will enhance the theme by providing users with a visually appealing way to display their itch.io projects on their websites. **Rationale**: Integrating a Slick slider to showcase itch.io projects directly into the Hugo theme will greatly benefit users who develop and share games and other projects on itch.io. This feature will enhance user engagement by providing a dynamic and interactive way to browse projects. **Use Cases**: 1. **Game Developers**: Users who create and publish games on itch.io can prominently display their projects on their website. 2. **Content Creators**: Artists, writers, and other creators who use itch.io to distribute their work can showcase their projects. 3. **Portfolio Websites**: Developers and designers can use this feature to create an interactive portfolio of their itch.io projects. **Implementation Ideas**: 1. **Configurable Template**: - Create a new partial template (e.g., `itchio-slider.html`) in the theme. - Allow users to configure the template via a YAML configuration file. 2. **Slick Slider Integration**: - Integrate the Slick slider JavaScript library to create a responsive and customizable slider. - Ensure compatibility with Bootstrap for consistent styling and responsiveness. 3. **Data Fetching**: - Provide a way to fetch and display project data from itch.io, either through manual entry in the YAML config or by using itch.io's API. 4. **Customization**: - Enable customization of the slider (e.g., number of slides, autoplay, navigation arrows). - Allow users to style the slider via custom CSS. 5. **Documentation**: - Include clear documentation on how to configure and use the itch.io projects slider. - Provide examples and configuration options for different use cases. **Additional Context**: Many Hugo theme users are creators who share their projects on itch.io. Adding this feature will enhance their websites by providing an engaging way to showcase their work. The integration of the Slick slider will ensure a modern and interactive user experience. Example configuration in `config.yaml`: ```yaml params: itchio_slider: enabled: true title: "My Projects" autoplay: true autoplay_speed: 3000 show_arrows: true projects: - title: "Project One" image: "/images/project-one.png" url: "https://example.itch.io/project-one" - title: "Project Two" image: "/images/project-two.png" url: "https://example.itch.io/project-two" ``` Example usage in a Hugo template: ```html {{ if .Site.Params.itchio_slider.enabled }} {{ partial "itchio-slider.html" . }} {{ end }} ``` Example `itchio-slider.html` partial template: ```html <div class="itchio-slider-container"> <h2>{{ .Site.Params.itchio_slider.title }}</h2> <div class="slick-slider"> {{ range .Site.Params.itchio_slider.projects }} <div> <a href="{{ .url }}"> <img src="{{ .image }}" alt="{{ .title }}"> <h3>{{ .title }}</h3> </a> </div> {{ end }} </div> </div> <script> $(document).ready(function(){ $('.slick-slider').slick({ autoplay: {{ .Site.Params.itchio_slider.autoplay }}, autoplaySpeed: {{ .Site.Params.itchio_slider.autoplay_speed }}, arrows: {{ .Site.Params.itchio_slider.show_arrows }} }); }); </script> ``` **Additional Notes**: This implementation assumes the use of jQuery for Slick slider initialization, which is common with Bootstrap-based themes. Ensure jQuery and Slick slider libraries are included in the theme’s assets.