Back to top

Autore Topic: [Risolto] Template con switch per cambio immagine background  (Letto 1282 volte)

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Ho l'esigenza di inserire dentro un template di mia realizzazione uno switch per il cambio immagine usata per background del body.

Non sono riuscito a trovare nessuna informazione in merito, i risultati pullulano di pagine che parlano su come cambiare il background, ma nessuna affronta l'implementazione di uno switch nelle opzioni del template.

Mi ricordo che in passato ho trovato qualche template con questa opzione, ma adesso non ricordo ne nome de dove reperirlo.

Qualcuno ha memoria di un template che utilizzi questo meccanismo in modo tale da replicarlo nel mio template?

Mi pare anche che esistono delle estensioni, ma vorrei evitare di installarne una per fare una cosa abbastanza semplice.

Grazie
« Ultima modifica: 25 Ott 2020, 14:00:04 da giusebos »
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline joomla_fan

  • Nuovo arrivato
  • *
  • Post: 29
    • Mostra profilo
Re:Template con switch per cambio immagine background
« Risposta #1 il: 24 Ott 2020, 16:11:35 »
Buongiorno.
Se non ho capito male, forse questo potrebbe esserti utile:
https://www.jquery-backstretch.com/

Nella sezione "demos" dal menu' a tendina seleziona "attach Backstretch to click event"

« Ultima modifica: 24 Ott 2020, 16:14:46 da joomla_fan »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Template con switch per cambio immagine background
« Risposta #2 il: 24 Ott 2020, 18:33:20 »
no purtroppo le info mancanti sono l'integrazione con joomla, a livello di codice non ho problemi
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Template con switch per cambio immagine background
« Risposta #3 il: 25 Ott 2020, 13:45:02 »
dopo molte moltissime ricerche sono riuscito a capire come fare per realizzare ciò che si vede nell'immagine allegata.

nel post sotto descrivo come ho risolto:
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Template con switch per cambio immagine background
« Risposta #4 il: 25 Ott 2020, 13:59:25 »
per prima cosa realizzo o modifico la regola per il body come nel codice seguente, ho inserito degli asterischi nelle dichiarazioni obbligatorie, mentre le altre varieranno in base al vostro template.

Codice: [Seleziona]
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
    color: #808080;
    margin: 0px;
    padding: 0px;
    *background-repeat: no-repeat;
    *background-size: cover;
   * background-position: center;
    *background-attachment: fixed;
}

Come seconda operazione dichiaro nel template che il body dovrà prelevare i valori dalle impostazioni del template scritte nel file templateDetails.xml.
per fare ciò apro il file index.php (attenzione per chi usa framework vari questa procedura potrebbe non funzionare)

queste le righe di codice da inserire dopo la chiusura dell'head e prima dell'apertura del body

Codice: [Seleziona]
</head>
<style type="text/css">
body {
    background-color: <?php echo $this->params->get('body_color'?>;
    background-image: url('../<?php echo $this->params->get('body_background'?>');
}
</style>

<body>

infine inserisco le seguenti istruzioni nel file templateDetails.xml , di seguito le ultime righe di codice dopo le ultime posizioni del mio template

Codice: [Seleziona]
        <position>full_width_bottom</position>
        <position>copyright</position>
    </positions>
    <config>
<fields name="params" addfieldpath="/templates/pomodoro/elements">
<fieldset  name="body" type="upload_func" label="Body">
            <field name="body_color" type="color" label="Colore background:" description="Example: #000000" default="#d10000"></field>
<field  name="body_background" type="media" label="immagine background:">
</field>
</fieldset>
</fields>
    </config>
</extension>
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:[Risolto] Template con switch per cambio immagine background
« Risposta #5 il: 25 Ott 2020, 14:04:50 »
Con questo sistema ho realizzato un automatismo che sarà utile a chi non conosce una riga di codice e non ha sufficiente dimistichezza con css e connessioni FTP.

L'utente dopo aver realizzato un immagine potrà caricarla in una cartella preposta e questa diverrà l'immagine di background del sito.
Il sito dove verrà installato questo meccanismo ha l'esigenda di cambiare immagine molto spesso, inoltre per quelle volte che nessuna immagine verrà inserità, ho fatto in modo che sarà possibile assegnare un colore con un codice esadecimale prelevato da un color picker.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

 



Web Design Bolzano Kreatif