Dynamic Image Assets

[JavaKhangNguyen]

I have a code as below that displays image slideshow:

                  <div class="carousel-inner">
                  <div class="carousel-item active c-item">
                    <img src="{{ 'assets/slide/b1_s675.jpg' | theme }}" class="d-block w-100 c-img">
                  </div>
                  <div class="carousel-item c-item">
                    <img src="{{ 'assets/slide/b2_s676.jpg' | theme }}"  class="d-block w-100 c-img">
                  </div>
                  <div class="carousel-item c-item">
                    <img src="{{ 'assets/slide/b3_s677.jpg' | theme }}" class="d-block w-100 c-img">
                  </div>
                </div>

Problem is, this is a quite static path as it cannot add more images or changing the images provided in the code from WinterCMS admin panel. To be able to change the images, you may have to name the new image just as the original one (doing a replacement). What it needs is that I can add or update the image from WinterCMS admin panel without having to update the HTML code. How can I achieve such a goal? Thank you

[LukeTowers]

There's a bunch of different ways that you can achieve what you're looking for in Winter CMS, and which one would fit your case best would depend on where this code gets included on your frontend and how you want to manage it.

1. Use an existing plugin (see Awesome Winter CMS for a list of available plugins while we work on finishing our marketplace).
2. Build a custom plugin that manages Slideshows as database records using either the Media Library or FileUploads and displays the slideshows using a Component.
3. If using the Winter.Pages plugin, use the Custom Page Fields feature to define the fields for the slider in your page's layout.
4. If you only want one instance of this slider but you might want to display it in multiple places you could define the fields using the Theme Customization feature and then render the slider in a Partial.

For a quick example of the Custom Page Fields feature see below:

<div class="carousel-inner">
    {repeater name="carousel_items" prompt="Add carousel item"}
        <div class="carousel-item active c-item">
            {variable name="image" label="Image" type="mediafinder" mode="image"}{/variable}
            <img src="{{ image | media | resize(1920, false) }}" class="d-block w-100 c-img">
        </div>
    {/repeater}
</div>

[JavaKhangNguyen]

now that I have installed the Dimsog.Slider plugin and migrate the database to make it work, it is now available as a Component and can customize, however, when I put the component in the page, the slider does not show up as expected. I try to test out the logic before implementing it on the real project.

The demo website plugin (get the link from the plugin documentations) show as such:

From that demo I tried to put the slider component in the home page of my demo theme like this:

Did I place it at the wrong place? if not how can I make it work?

[LukeTowers]

Did you also put the {% component 'slider' %} (or whatever it's called) in the code section of the page or did you just add it to the configuration section?