On this page
A snippet is just a block of HTML tags. If you have already designed them for other system, they can be easily added as SiteGUI template snippets with little modification. If it contains mostly content, add "sg-block-content" as a class to the most outer tag so it can be editable by SiteGUI editor. If it is more a layout block, add "sg-block-wrapper col" as classes for any tag representing a block.
Below is the default code for Bootstrap carousel, we'll turn it into a simple snippet.
<div id="carouselExampleCaptions" class="carousel carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/200?sig=1" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/200?sig=2" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/200?sig=3" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
We take the code and add "sg-block-content" as a class to the most outer tag which happens to be at the first line of the snippet
<div id="carouselExampleCaptions" class="sg-block-content carousel carousel-fade slide" data-bs-ride="carousel">
And now we have a simple snippet, save it as carousel.html, add it to index.json and use File Manager to upload both files to the snippet folder of the current template. Next time you open SiteGUI editor, this snippet will be available to use. As a simple snippet, it does not support adding/removing its slides. Also when a user adds more than one carousel, the controls will be mixed up because they both refer to #carouselExampleCaptions as the target and thus clicking on one control will change both carousels. Learn how to make the targets unique next.
As a snippet can be added multiple times to a page, if its ID is used as the target for some controls (like carousel's previous and next button), the ID should be made unique each time the snippet is added. To help SiteGUI know when to make the ID unique, you should add a data-sg-id-ref attribute to the HTML element that contains the unique ID, the value of this attribute should be the name of other attributes (separated by commas) that refer back to the unique ID.
For the carousel snippet, we should add data-sg-id-ref="data-bs-target" to the first tag as that tag contains a unique ID and is referred by other tags using their data-bs-target attribute. With that added, SiteGUI editor will assign a unique ID in place of carouselExampleCaptions and also change the value of the data-bs-target attribute to this unique ID.
<div id="carouselExampleCaptions" data-sg-id-ref="data-bs-target" class="sg-block-content carousel carousel-fade slide" data-bs-ride="carousel">
Finally, whenever the above snippet is added, SiteGUI editor will render the following code for it. You can see that the snippet has been assigned a unique ID sg-id-1647426670280 and every references have been updated to this value. Also, the snippet is wrapped inside a wrapper <div class="sg-block-wrapper col-12">, which is a SiteGUI block wrapper to help move and resize the block easier.
<div class="sg-block-wrapper col-12">
<div id="sg-id-1647426670280" data-sg-id-ref="data-bs-target" class="sg-block-content carousel carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#sg-id-1647426670280" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#sg-id-1647426670280" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#sg-id-1647426670280" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/200?sig=1" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/200?sig=2" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/200?sig=3" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sg-id-1647426670280" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sg-id-1647426670280" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>