# Filo di confronto immagini
**URL:** https://meta.discourse.org/t/image-comparison-slider/264479
**Category:** Theme component
**Created:** [10 Maggio 2023, 1:56am UTC](https://meta.discourse.org/t/image-comparison-slider/264479 "2023-05-10T01:56:37Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [10 Maggio 2023, 1:56am UTC](https://meta.discourse.org/t/image-comparison-slider/264479/1 "2023-05-10T01:56:37Z")
|||
|-|-|-|
| ℹ | **Riepilogo** | Aggiungi un pulsante all’editor per creare un cursore interattivo di confronto immagini trascinabile.
| 🛠| **Repository** | [GitHub - josephclaytonhansen/discourse-image-comparison-slider](https://github.com/josephclaytonhansen/discourse-image-comparison-slider/) |
| ❓| **Guida all’installazione** |[Come installare un tema o un componente tema](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)|
| 📖| **Nuovo ai temi di Discourse?** | [Guida per principianti all’uso dei temi di Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)|
← Inserisci “repoName” e “repoURL” per il pulsante di installazione automatica →
Installa questo componente tema
← Descrivi questo tema/componente in una o due frasi →
Questo componente aggiunge un pulsante all’editor per creare cursori di confronto immagini trascinabili. Le impostazioni del cursore, come la direzione o l’icona del pulsante, possono essere personalizzate dalle impostazioni dell’amministratore.
← Aggiungi screenshot (se applicabile) →
[https://github-production-user-asset-6210df.s3.amazonaws.com/45859835/237227273-10e4e042-f751-4402-ae81-826b8e8b5113.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20251102%2Fus-east-1%2Fs3%2Faws4\_request&X-Amz-Date=20251102T053705Z&X-Amz-Expires=300&X-Amz-Signature=8b3c09009df69f49bbb8b407650c5c39bd4f82c23155a25a8f3f5085ba24e3bf&X-Amz-SignedHeaders=host](https://github-production-user-asset-6210df.s3.amazonaws.com/45859835/237227273-10e4e042-f751-4402-ae81-826b8e8b5113.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20251102%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251102T053705Z&X-Amz-Expires=300&X-Amz-Signature=8b3c09009df69f49bbb8b407650c5c39bd4f82c23155a25a8f3f5085ba24e3bf&X-Amz-SignedHeaders=host)
← Aggiungi maggiori dettagli e spiega le impostazioni (se applicabile) →
Questa è la mia prima esperienza nello sviluppo di Discourse, quindi mi scuso se ho commesso degli errori.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [10 Maggio 2023, 6:10am UTC](https://meta.discourse.org/t/image-comparison-slider/264479/2 "2023-05-10T06:10:34Z")
Cos’è il WIP? (Ci sono 20 caratteri ora?)
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [10 Maggio 2023, 6:25am UTC](https://meta.discourse.org/t/image-comparison-slider/264479/3 "2023-05-10T06:25:13Z")
> **[WIP](https://dictionary.cambridge.org/dictionary/english/wip)**
>
> 1. abbreviation for work in progress or process: a piece of work or a product…
---
### Author:  [@ColdSun](https://meta.discourse.org/u/ColdSun)
#### Post date: [10 Maggio 2023, 7:31am UTC](https://meta.discourse.org/t/image-comparison-slider/264479/4 "2023-05-10T07:31:17Z")
WIP è lavoro in corso.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [10 Maggio 2023, 8:01am UTC](https://meta.discourse.org/t/image-comparison-slider/264479/5 "2023-05-10T08:01:50Z")
Fantastico! Grazie per questo contributo 👍
> [@Joseph\_Hansen](#):
>
> Questo è un lavoro in corso con aggiornamenti pianificati.
Che tipo di aggiornamenti hai in mente?
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [10 Maggio 2023, 12:23pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/6 "2023-05-10T12:23:08Z")
Principalmente, ho bisogno di ripulire il codice e renderlo più in linea con Discourse. Al momento è un po’ sciatto, dato che stavo imparando attivamente come creare un componente del tema qui 🙂
Ho anche in programma di aggiungere un modo per cambiare la direzione dello slider dalla composizione: al momento, la direzione è quella impostata nelle impostazioni dell’amministratore, vorrei renderla controllabile dall’utente. (_MODIFICA: questo è stato aggiunto!_)
Vorrei anche aggiungere un maggiore controllo sugli stili della maniglia/del divisore dello slider, ma purtroppo non è realmente possibile. Il JavaScript che gestisce lo slider costruisce lo slider prima di qualsiasi modifica CSS e non ricostruisce lo slider quando le modifiche CSS vengono apportate.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [10 Maggio 2023, 1:11pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/7 "2023-05-10T13:11:10Z")
Fantastico! ❤
Grazie per il tuo contributo 🙌
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [10 Maggio 2023, 1:36pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/8 "2023-05-10T13:36:23Z")
Ho aggiunto la possibilità per l’utente di scegliere uno slider verticale o orizzontale, utilizzando un attributo `data-direction-horizontal` o `data-direction-vertical`. L’impostazione predefinita scelta nelle impostazioni dell’amministratore verrà utilizzata se l’utente non specifica una direzione
Questo aggiornamento è ora disponibile su GitHub o dal pannello di amministrazione di Discourse, se hai installato il componente del tema.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [11 Maggio 2023, 3:28pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/9 "2023-05-11T15:28:02Z")
Molto bello, grazie Joseph! Funziona bene, ma vedo questo errore sul mio sito:
Scompare se aggiorno la pagina, e questo è tutto ciò che vedo nella console:
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [11 Maggio 2023, 3:30pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/10 "2023-05-11T15:30:21Z")
Questo è fantastico. Bel lavoro. 👍
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [11 Maggio 2023, 4:17pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/11 "2023-05-11T16:17:25Z")
È difficile dire cosa stia causando questo, non riesco a replicarlo da parte mia 😕 Di quegli errori, solo il primo potrebbe provenire da questo componente, poiché non sto usando un tooltipContainer o un ciclo ResizeObserver, ma di nuovo, non sono davvero sicuro. Ti sei aggiornato all’ultima versione? Ho apportato alcune modifiche ieri che potrebbero risolvere questo problema
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [11 Maggio 2023, 6:21pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/12 "2023-05-11T18:21:52Z")
Grazie Joseph, sono all’ultima versione. È strano, non riesco più a visualizzare questo messaggio e non vedo problemi, quindi forse è stato un caso isolato?
Un’altra cosa, l’icona non vuole cambiare. Ho, ovviamente, aggiunto l’icona al sottoinsieme di icone svg. Ho anche provato diverse icone che funzionano già sul mio sito e non cambia dal fulmine. Sto cercando di cambiarla in arrows-alt-h
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [11 Maggio 2023, 7:06pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/13 "2023-05-11T19:06:00Z")
> [@davidkingham](#):
>
> Un’altra cosa, l’icona non vuole cambiare. Ho, ovviamente, aggiunto l’icona al sottoinsieme di icone svg. Ho anche provato diverse icone che stanno già funzionando sul mio sito e semplicemente non cambia dal fulmine. Sto cercando di cambiarla in arrows-alt-h
È colpa mia, ho appena apportato una modifica che risolverà il problema. Grazie per averlo notato!
---
### Author:  [@Frully](https://meta.discourse.org/u/Frully)
#### Post date: [16 Maggio 2023, 8:37pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/15 "2023-05-16T20:37:42Z")
Molto bello, ho alcuni problemi:
### Localizzazione
Nel mio forum siamo passati alla localizzazione en\_GB, quindi quando passo il mouse sopra ottengo:
invece del testo alternativo/di sapore dalle impostazioni del componente:
### Impossibile selezionare il testo
~~Il plugin sembra rubare tutti gli eventi mouse-down del cursore e mi impedisce di selezionare qualsiasi testo sulla pagina per copiare/incollare/citare, ecc. Questo non è un problema su meta.discourse…~~ è scomparso… amo la tecnologia.
### 3.1.0.beta4
([f0bdb2ee9a](https://github.com/discourse/discourse/commits/f0bdb2ee9a0a63992d858efadc2c85e4c51b90f5))
### Non funziona affatto in Firefox (e alcuni utenti Chrome su dispositivi mobili)
Ho creato un post di istruzioni per utilizzare la funzionalità e alcune persone hanno detto che non vedevano nulla. (feedback non molto utile dato che non ho segnalazioni di bug reali da parte delle persone).
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [16 Maggio 2023, 9:17pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/16 "2023-05-16T21:17:07Z")
Hmm… questo è strano, l’ho testato su Firefox senza problemi. Vedrò se riesco a riprodurlo. Adoro i bug casuali 🫠 la libreria che sto usando non ha problemi nel repository GitHub per Firefox, aperto o chiuso, il che rende la correzione dei bug ancora più difficile.
Localizzazioni: non sono sicuro di quale sia il processo per fornire file di localizzazione, posso aggiungere un en.GB dato che parlo quella lingua, ma questa è l’estensione della mia esperienza. Qualche altro autore di componenti del tema sa come funzionano le traduzioni dei file di localizzazione? Dovrei semplicemente passare il testo tramite Google Translate? 😅
---
### Author:  [@Frully](https://meta.discourse.org/u/Frully)
#### Post date: [16 Maggio 2023, 9:44pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/17 "2023-05-16T21:44:07Z")
L’unica differenza che riesco a vedere tra il tuo e un componente funzionante (giphy) è l’indentazione…
>
Forse è il fatto che tutta la bontà dello yml è allo stesso livello di indentazione, qualcosa a che fare con il parser.
>
In pratica… sono un incompetente e non ho idea di cosa sto facendo.
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [16 Maggio 2023, 9:47pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/18 "2023-05-16T21:47:26Z")
Capisco come ti senti 🙂 Ci darò un’occhiata, sto usando il parser YML di VS Studio ma potrebbe non essere all’altezza. Proverò con un po’ di indentazione manuale in stile vecchio stile su Notepad
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [18 Maggio 2023, 5:58pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/19 "2023-05-18T17:58:08Z")
@Frully Ho risolto il problema di Firefox: ora dovrebbe funzionare su tutti i browser (ho testato Chrome, Firefox, Safari e versioni mobili senza problemi). Se aggiorni questo, funzionerà per i tuoi utenti Firefox
---
### Author:  [@Stephane\_Roy](https://meta.discourse.org/u/Stephane_Roy)
#### Post date: [26 Giugno 2023, 8:37am UTC](https://meta.discourse.org/t/image-comparison-slider/264479/20 "2023-06-26T08:37:22Z")
Ciao
Questo tema-componente è molto bello, grazie e l’ho appena installato 🙂
Un problema con il testo del pulsante e con il testo segnaposto
* * *
Ho anche il tema-componente
> [@Masonry Image Gallery](https://meta.discourse.org/t/masonry-image-gallery/188315):
>
> warning This feature is now built-in to Discourse core, see [the announcement](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664) regarding image grids in Discourse. This theme component adds a responsive masonry-style image gallery with customizable ordering. Desktop view: Mobile view: When clicking on an image it will open with the default lightbox viewer. You add the gallery by clicking on the grid icon and then adding your images. It also works by first selecting the uploaded images and then clickin…
Dopo l’installazione ho:
- il testo del pulsante “Image comparison slider” anche sul pulsante “Masonry Image Gallery”
- il testo segnaposto di “Image comparison slider” invece del testo segnaposto di “Masonry Image Gallery”
Strano, no?
Stéphane
> **[Forums FFJdR](https://forums.ffjdr.org/)**
>
> Bienvenue ! Venez y discuter JdR
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [26 Giugno 2023, 3:25pm UTC](https://meta.discourse.org/t/image-comparison-slider/264479/21 "2023-06-26T15:25:56Z")
Non avevo pensato a quel problema. Grazie per averlo segnalato @Stephane_Roy!
Il problema è che entrambi i componenti del tema utilizzano le stesse variabili di traduzione. Altri TC potrebbero avere lo stesso problema. La soluzione è aggiornare/modificare il nome di _button\_text_ e _add\_images\_prompt_ nei punti sottostanti. Aggiornerò anche Masonry Image Gallery.
> translations. **button\_text** = settings.button\_text;
> translations.composer. **add\_images\_prompt** =
> settings.add\_images\_prompt;
> api.onToolbarCreate(function(toolbar){
> toolbar.addButton({
> trimLeading: true,
> id: “image-comparison-slider”,
> group: “insertions”,
> icon: settings.button\_icon,
> title: “ **button\_text** ”,
> perform: e =\> e.applySurround(
> [“\
> "].join(‘’),
> "
>
> ", "\*\*add\_images\_prompt\*\*", { multiline: false } ) });
[Next page](https://meta.discourse.org/t/image-comparison-slider/264479.md?page=2)