Skip to content

Conversation

@Z3R0GT
Copy link

@Z3R0GT Z3R0GT commented Apr 30, 2025

Context of this feature

On my website I have some sections where I use hextra/hero-container to display text followed by an image, but there came a time when I wanted to put several but I didn't want to add a lot of code

Modified files

  • hextra-home: Added the "useSwiper" parameter to make this feature optional and not disrupt the current workflow and scripts needed to make the swiper work, also It can easily be applied to index

  • hextra/hero-container: I rewrote the code to convert all image inputs into lists, so as not to disturb projects using olders versions

  • "image.html": generic template for images based on hextra/hero-container

hero-container structure

  • inputs
  • converti section
  • section to insert whatever is inside the "hero-container" block
  • fork to use to determine whether the "images" will be used for one image (normal) or multiple images (Swiper)
  • ends

I use Swiper because of how simple it is to use, and has a lot of more options.

(in testing) Sintax

{{< hero-container 
image="../place_holder.webp* ../place_holder.webp" 
imageCard="true* true"
>}}
    <div class="hx-mt-6 hx-mb-6">
    {{< hextra/hero-headline >}}
    Web/Desktop Solutions 
    tailored to you
    {{< /hextra/hero-headline >}}
    </div>

    <div class="hx-mt-6 hx-mb-6">
    {{< hextra/hero-subtitle >}}
    Local execution, simple, fast, and sustainable in the long run.

    Specializing in backend solutions for your apps and video games!
    {{< /hextra/hero-subtitle >}}
    </div>
{{< /hero-container >}}

and it would be the same for others, using the "*" structure as delimiters

Note: My English isn't very good, so I'll use a translator to write this.

Z3R0GT added 2 commits April 30, 2025 03:15
* changed hero-container structure
* added image.html
@netlify
Copy link

netlify bot commented Apr 30, 2025

Deploy Preview for hugo-hextra ready!

Name Link
🔨 Latest commit 744ffca
🔍 Latest deploy log https://app.netlify.com/sites/hugo-hextra/deploys/6811e5c7b3c98500088cf548
😎 Deploy Preview https://deploy-preview-676--hugo-hextra.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Z3R0GT
Copy link
Author

Z3R0GT commented Apr 30, 2025

The website in fact (for better viewing, use desktop and not phone) is https://sco-studio.lat/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant