# \[SOLVED\] Help with Dashboard slideshow gallery

**URL:** <https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954>\
**Category:** Dashboard\
**Created:** [28 January 2020 11:03 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954 "2020-01-28T11:03:09Z")\
**Posts on this page:** 14\
**Page:** 2

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [23 February 2020 12:45 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/21 "2020-02-23T12:45:31Z")

</div>

Try this link...

> [@IR Detector - the project that grew and grew](https://discourse.nodered.org/t/ir-detector-the-project-that-grew-and-grew/4738):
>
> [The project that 'grew and grew'.](http://resources-area.co.uk/node-red-flows/it_grew_and_grew.pdf) Here's a link to an instruction sheet, for my IoT students, on how to interface an InfraRed (IR) detector to a WeMos D1 Mini.. Note: This exercise uses a WeMos D1 Mini, Node-RED and MQTT (mosquitto) and of course an IR detector. The project grew into using a RPi-camera to FTP images to a server and a dashboard to display those images. I hope you enjoy reading this as much as I enjoyed writing it. Regards from David.

I think you missed the last digit (i.e. 8) off of the link you posted.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [23 February 2020 23:16 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/22 "2020-02-23T23:16:23Z")

</div>

> [@newbie](#):
>
> I tried to changed the group of the template to another tab. It did not work. It seems that the template is linked to the "slide" tab and to the "Slideshow" group. Can you explain how?

You are right indeed. You have to find the template node named "Slideshow Grid" and do a small change on it.

```auto
<style>

#Slide_Slideshow .nr-dashboard-template {
    background-image : url(/slideshow/{{payload}});
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

</style>

```

It is hardcoded to work with a tab named "Slide" and group named "Slideshow". Change the first line inside the style tag to fit your TAB\_Group. In the very same line use the CSS selector ".nr-dashboard-template" as it is more specific then the one used previously (md-card). I will add this explanation to the flow posted in the Library.

---

<div class="post-metadata">

**Author:** ![newbie](https://avatars.discourse-cdn.com/v4/letter/n/dc4da7/32.png) [@newbie](https://discourse.nodered.org/u/newbie)\
**Post date:** [24 February 2020 11:22 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/23 "2020-02-24T11:22:20Z")

</div>

Thanks @Andrei . It did work after changed as you mentioned.

to recap for future:

Changing the below line in the "Slideshow Grid" node in the flow

```auto
#Slide_Slideshow md-card {

```

to

```auto
#TAB_GROUP .nr-dashboard-template {

```

where TAB is the the tab name. And, GROUP is the group name.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [26 February 2020 16:07 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/24 "2020-02-26T16:07:34Z")

</div>

## **Dashboard slideshow**

This flow based on the @Andrei flow above :  
creates a slideshow in the Dashboard with pictures from a local directory in your Raspberry pi. The slideshow is controlled by nod-red dashboard buttons.

## **Features**

- You can play and pause the slideshow. Go to next/previous , last/first.
- The time each picture displays is configurable in a delay node.
- You can delete pictures.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b0768594a7936f033f4a53a292054b456b055d39.jpeg)

See the complete topic in the #share-your-projects area : [Dashboard slideshow gallery](https://discourse.nodered.org/t/dashboard-slideshow-gallery/22291)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [26 February 2020 16:15 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/25 "2020-02-26T16:15:25Z")

</div>

✅ Probably best to cut/paste just that last post into the #share-your-projects area

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [26 February 2020 16:17 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/26 "2020-02-26T16:17:13Z")

</div>

yes i will 😉

---

<div class="post-metadata">

**Author:** ![newbie](https://avatars.discourse-cdn.com/v4/letter/n/dc4da7/32.png) [@newbie](https://discourse.nodered.org/u/newbie)\
**Post date:** [27 February 2020 07:40 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/27 "2020-02-27T07:40:49Z")

</div>

Thank you @SuperNinja and @Andrei for good word. There is a minor side effect (not critical). Requiring the name of the TAB and GROUP names within the CSS will create a small limitation. It is limiting the user to write the TAB and GROUP names in English only 🙂

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [27 February 2020 07:55 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/28 "2020-02-27T07:55:32Z")

</div>

Hi @newbie for my part, I do not use images in the background, they are displayed as images that can be resized, arranged, as desired in the "web page". I do not modify the CSS.  
**For testing , use this classic html code:**

```auto
<style>        
img {
    width: 100%;
    height: auto;
}
</style>
<body>
<div >
<img src= "/camAlerte/{{msg.fileName}}" alt="Camera Picture" ><br>
</div>
</body>

```

Where `msg.fileName` is the name of the file to display Ex: `car.jpg` send by the previous node.  
Of course , change `camAlerte` by your folder  
Try it out.

---

<div class="post-metadata">

**Author:** ![newbie](https://avatars.discourse-cdn.com/v4/letter/n/dc4da7/32.png) [@newbie](https://discourse.nodered.org/u/newbie)\
**Post date:** [27 February 2020 08:19 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/29 "2020-02-27T08:19:47Z")

</div>

I will try. Thanks @SuperNinja

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [27 February 2020 08:27 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/30 "2020-02-27T08:27:15Z")

</div>

Take a look at the complete project :

> [@SuperNinja](#):
>
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b0768594a7936f033f4a53a292054b456b055d39.jpeg)
> 
> See the complete topic in the #Share Your Projects area : [Dashboard slideshow gallery](https://discourse.nodered.org/t/dashboard-slideshow-gallery/22291)

---

<div class="post-metadata">

**Author:** ![newbie](https://avatars.discourse-cdn.com/v4/letter/n/dc4da7/32.png) [@newbie](https://discourse.nodered.org/u/newbie)\
**Post date:** [29 February 2020 08:10 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/31 "2020-02-29T08:10:04Z")

</div>

@SuperNinja, Thanks again. You are right. It did work very well regardless of the language. I will modify my comments. I encountered two small obstacles (maybe because I use windows environment). I will write them in the project page.

---

<div class="post-metadata">

**Author:** ![newbie](https://avatars.discourse-cdn.com/v4/letter/n/dc4da7/32.png) [@newbie](https://discourse.nodered.org/u/newbie)\
**Post date:** [29 February 2020 08:48 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/32 "2020-02-29T08:48:28Z")

</div>

Edit (correction) : @SuperNinja work is independent from interface language.

---

<div class="post-metadata">

**Author:** ![newbie](https://avatars.discourse-cdn.com/v4/letter/n/dc4da7/32.png) [@newbie](https://discourse.nodered.org/u/newbie)\
**Post date:** [1 March 2020 07:28 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/33 "2020-03-01T07:28:04Z")

</div>

@SuperNinja Thanks again, regarding the small obstacle (only one 🙂 ) . It is the path of images. In windows, the path type in DIRECTORY node (fs-op-dir node) should be string as shown in image below to work. Hence, we may benefit from @Andrei work to implement the path directly and not using SET PATH node.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d72cf60f7e651c51187034e4a84aab7aa8a8f2a.png)

That is it 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 March 2020 07:28 UTC](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954/34 "2020-03-15T07:28:09Z")

</div>

Closed on 15 March 2020 07:28 UTC

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.nodered.org/t/solved-help-with-dashboard-slideshow-gallery/20954.md?page=1)