Back to top

Autore Topic: Inserimento griglia immagini responsiva in articolo con template responsivo  (Letto 3639 volte)

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Buongiorno a tutti,
scusate la domanda magari banale per voi ma sono un novellino in merito ai siti web e quindi anche per quanto riguarda Joomla.
Detto questo vorrei inserire in un articolo una serie d'immagini, tipo una griglia 4x5 4x6....
Io riesco inserendoli in una tabella o DIV ma questo fà si che su un dispositivo modible con schermo più piccolo, mi trovo le 4 immagini ancora sulla stessa riga ma talmente piccole che diventano inutili.
Mi chiedevo se esisteva un modo per creare una griglia d'immagini e far in modo che se la risoluzione cambia le immagini si adattino tipo una griglia 3xX, 2xX o vadano una sotto l'altra formando una colonna sola.
Il template è responsivo.
Se vi mancano dettagli chiedete pure e grazie mille del supporto.


Maw

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Devi utilizzare bootstrap, in questo articolo di esempio ho inserito una griglia 2 x 2

sisinternational.net/edimburgh-queen-margaret-university-scozia.html
« Ultima modifica: 11 Gen 2016, 11:39:40 da tomtomeight »

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Ciao Tomtomeight,
intanto grazie per la risposta.
Ho provato a dare un occhio a coc'è bootsstrap, per quello che ho capito devrei creare un nuovo template?
Se riesci a indirizzarmi meglio, esempio creando moduli o come integrarlo nel template che già ho. Magari il mio template lo utilizza.
Io uso il template helix 3.
Non vorrei rifare il sito.


Grazie mille e scusate l'ignoranza :-(.


Maw

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
No non devi modificare o reinstallare altro.
Io ho scritto il codice direttamente nell'articolo

Codice: [Seleziona]
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css"/>
<div class="container">
<div class="header">
<div id="logo" class="col-md-12"><img src="images/eventi/edinburgh.jpg" alt="Edinburgh" width="90%" class="img-header" />
<div class="titolo">UN CAMPUS MODERNISSIMO NELLA CORNICE UNICA ED INDIMENTICABILE DI UNA CAPITALE EUROPEA RICCA DI STORIA, VERDE E CULTURA. DA SEMPRE MOLTO AMATA DA RAGAZZI ITALIANI E STRANIERI</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="titpar">COLLEGE</div>
<p>Il campus della <strong>Queen Margaret University</strong> &egrave; stato costruito nel 2007 con i pi&ugrave; moderni e avanguardistici criteri architettonici. Si trova nel quartiere residenziale di Musselburgh a soli 6 minuti di treno dalla stazione centrale di Waverley. Il campus offre uno standard unico e senza paragoni; spazi verdi, un eccezionale centro didattico, un grande ristorante, una sports hall, impianti sportivi all'aperto, una bellissima Student Union dove hanno luogo molte delle attivit&agrave; serali e la discoteca.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="titpar">IL PROGRAMMA</div>
<ul>
<li>Il corso di lingua &egrave; di 3,5 ore di lezioni effettive al giorno con insegnanti madrelingua qualificati e livelli dal principiante all'avanzato <strong>e report settimanale sull'andamento dello studente</strong></li>
<li>Certificato finale con riconoscimento British Council</li>
<li>Test di ingresso online prima della partenza</li>
<li>Libri di testo e workbook in omaggio</li>
<li><strong>Staff&nbsp;ed assistenza ISV in loco</strong></li>
<li>Intenso programma di <strong>sport, visite e attivit&agrave; serali</strong> nel campus e in citt&agrave;, animate da activity leaders locali</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="titpar">SISTEMAZIONE</div>
<p>Le residenze all'interno del campus prevedono camere singole con servizi privati moderne e ben arredate. Trattamento di pensione completa.</p>
<p>In alternativa &egrave; possibile prevedere la sistemazione in famiglia; tutte selezionate e con esperienza di accoglienza a ragazzi stranieri risiedono nella stessa area del campus (colazione e cena in famiglia e pranzo nel ristorante del campus).</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="titpar">ESCURSIONI 2016</div>
<p>Il programma di escursioni permetter&agrave; di visitare le pi&ugrave; belle e suggestive localit&agrave; scozzesi; sono infatti previste <strong>2 escursioni di intera giornata:</strong></p>
<ul>
<li><strong>La prima </strong>escursione sar&amp;agrave, a <strong>Glasgow</strong>, la pi&ugrave; grande citt&agrave; della Scozia, famosa per la sua cultura, l'architettura e il design ed indiscussa capitale dello stile scozzese.</li>
<li><strong>La seconda</strong> giornata&nbsp; di escursione prevede un itinerario che porta a <strong>St. Andrews </strong>storica e prestigiosa citt&agrave; universitaria e del golf ed alla vista del<strong> Glamis Castle, </strong>tra i pi&ugrave; belli di Scozia, famoso per le sue leggende di fantasmi.</li>
</ul>
<p><strong>Ed infine 6 giornate alla scoperta dei segreti e delle meraviglie di Edimburgo: </strong>gli studenti saranno accompagnati per la visita della citt&agrave; antica e dell'elegante citt&agrave; moderna georgiana ( entrambe dichiarate dall'UNESCO Patrimonio dell'umanit&agrave;).<br />Tra le visite incluse ricordiamo il famoso <strong>Edinburgh Castle</strong>, principale attrazione che svetta sulla citt&agrave; ed il <strong>Palace of Holyroodhouse</strong>, residenza ufficiale di Sua Maest&agrave; la Regina</p>
</div>

Ho aggiunto delle classi che poi ho riportato in un custom.css ancora devi fare a meno dell'editor disabilitandolo. Inoltre le prime due voci che richiamano il bootstrap puoi anche inserirle nell'index.php del template o in un modulo html che richiami insieme all'articolo. fai infine attenzione ad eventuali conflitti.

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Grazie tomtom,
io ho provato a fare una cosa del genere:


Codice: [Seleziona]
<div class="row-fluid">
   <div class="span3"><img src="images/Prodotti/occhiale-vista.jpg" alt="occhiale vista" /><>
   <div class="span3"><img src="images/Prodotti/occhiale-sole.jpg" alt="occhiale sole" /><>
   <div class="span3"><img src="images/Prodotti/lenti-oftalmiche.jpg" alt="lenti oftalmiche" /><>
   <div class="span3"><img src="images/Prodotti/lenti-contatto.jpg" alt="lenti contatto" /><>
<>

Così facendo riesco a fare le 4 colonne ma visualizzando su un mobile non diventano 4 "righe" ma le visualizzo sempre sulla stessa riga con immagini piccole e la cosa non mi piace.
Sono molto fuori strada?


Grazie.
Maw
« Ultima modifica: 11 Gen 2016, 14:15:18 da maw81maw »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Ma se non segui lo schema del codice che ti ho suggerito non applichi le classi di bootstrap.

Offline zent

  • Esploratore
  • **
  • Post: 159
  • Sesso: Maschio
    • Mostra profilo
Se quello che vuoi è di creare una griglia di immagini che poi si visualizzano su una colonna quando sei in dimensione tablet o mobile, puoi usare plugin o modulo sigplus che, se opportunamente configurato, ti consente di risolvere il problema.

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Tomtomhight:
non ho messo la parte <script> perchè ho visto che il mio template lo richiama in ogni pagina nell'headercon questo codice:
Codice: [Seleziona]
<script src="/templates/shaper_helix3/js/bootstrap.min.js" type="text/javascript"></script>
Non basta questo?.

Zent:
lo proverò, però vuol dire che poi nell'articolo devo richiamare il modulo con un loadposition o loadmodule?

Grazie mille a tutti.
Maw

Offline zent

  • Esploratore
  • **
  • Post: 159
  • Sesso: Maschio
    • Mostra profilo
Se usi il modulo si, se usi il plugin richiami direttamente la cartella che contiene le immagini.
Puoi vedere l'esempio http://www.zent.it/alberoalto/index.php

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Zent grazie,
tu così fai un loadmodule corretto?
Tale modulo permette anche di non far aprire lo slideshow e di mettere dei link a siti esterni aprendolo in una nuova scheda?
Dovrei fare una sorta di lista fornitori/partner inserendo la lista dei loghi e cliccando su di essi, venire rediretto sul loro sito in una nuova scheda.
Ovviamente rimanendo risponsivo e facendo diventare le righe una colonna su risoluzioni piccole.


Grazie mille.
Maw

Offline zent

  • Esploratore
  • **
  • Post: 159
  • Sesso: Maschio
    • Mostra profilo
Si, l'esempio è col modulo, ma è lo stesso col plugin. Entrambi sono ampiamente configurabili e, per un link esterno, puoi creare un file labels.txt con le informazioni necessarie.
Comunque questo è un esempio, nella JED trovi diversi moduli che possono risolvere il tuo problema. Basta cercare.

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Zent, il problema è saper cosa cercare...heheh
Ci provo e vediamo cosa esce, intanto grazie.

Offline zent

  • Esploratore
  • **
  • Post: 159
  • Sesso: Maschio
    • Mostra profilo
Cercare e provare è sempre la cosa migliore.
Se riguardi nel precedente esempio, ho creato e aggiunto il file labels.txt con i comandi necessari a richiamare un link esterno.

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Zent,
grazie per lo spronamento ma ti assicuro che di prove e ricerche ne faccio parecchie, ci ho perso 2 giorni prima di chiedere. :-)
Sto provando il modulo sigplus ma ricevo questo errore:
"[sigplus] Critical error: Image base folder /images/Prodotti/Vista specified in the administration back-end is expected to be a relative path w.r.t. the Joomla root"

Ho cercato e dicono che la folder deve avere i permessi 755 e così sono mentre i file hanno i permessi 644, ho provato a metterli 755 ma non cambia nulla.
In più dal tuo esempio non riesco a recuperare il file labels.txt ma immagino sia qualcosa del tipo:
[/size][/color]
Codice: [Seleziona]
inamename.jpg|<a href="http://www.sitoesterno.it"></a>



Dici che può andare bene?

[/size]Grazie mille.[/color]
[/size]Maw[/color]

Offline zent

  • Esploratore
  • **
  • Post: 159
  • Sesso: Maschio
    • Mostra profilo
Il percorso deve essere: images/Prodotti (verifica bene maiuscole e minuscole).

Il file labels.txt, lo devi creare nella cartella che contiene le immagini, il testo va bene. Puoi aggiungere un target="new" se vuoi farlo aprire in una nuova scheda.
« Ultima modifica: 11 Gen 2016, 17:53:59 da zent »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Intanto i richiami sono due, js e css se li hai entrambi richiamati nel template ok, ma devono essere oprio uguali a quelli nel mio esempio. Quello che però intendevo che tu non hai messo sono le classi col-md coi relativi numeri in base alle colonne che vuoi ottenere per le larghezze dei dispositivi.
span3 non è la stessa cosa.

Offline maw81maw

  • Esploratore
  • **
  • Post: 71
    • Mostra profilo
Tomtomeght,
ecco quello che mi mancava, non avevo capiro che i tag col-lg, col-md, col-sm, col-xs servivano per le varie risoluzioni, pensavo si adattasse automaticamente ma in effetti non specificando quante colonne vuoi per risoluzione diventa complicato.


Io non sono riuscito a mettere nella pagina i richiami JS e CSS però funziona quindi conferma che il template lo carica in automatico.


Il codice che ho usato è questo:
Codice: [Seleziona]

<div class="container">
<div class="header">&nbsp;<>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/Allison.jpg" alt="Allison" /></p>
<>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/CLIPPER.jpg" alt="CLIPPER" /></p>
<>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/Eco.jpg" alt="Eco" /></p>
<>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/esprit.jpg" alt="esprit" /></p>
<>
<>
<p>&nbsp;</p>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/Lamartina.jpg" alt="Lamartina" /></p>
<>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/locman_Black.jpg" alt="locman Black" /></p>
<>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/Max_&amp;_Co.jpg" alt="Max &amp; Co" /></p>
<>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p><img src="images/Prodotti/Vista/Mmissoni.jpg" alt="Mmissoni" /></p>
<>
<>
<>


poi aggiungerò i link ed è fatta.


Ottima solizione, mi piace ma l'unica pecca è che una persona non smart o che non sappia mettere mano al codice non possa modificare i contenuti.


Grazie a tutti per il supporto.
Maw

 



Web Design Bolzano Kreatif