[RISOLTO] stesso componente gallery assume layout grid diversi

[mariarosaria]

Buon pomeriggio a tutti.
Sto rifacendo un sito da 0 e non avendo trovato nuove alternative per Joomla 4 ho installato lo stesso componente che avevo prima per creare una gallery di photo.
Qui una visualizzazione del componente sul sito vecchio
Qui su quello nuovo
Come mai la visualizzazione dell'album assume comportamenti diversi con il layout griglia?
Nel primo se vado ad analizzare il div di una singola foto ottengo queste classi

Codice: [Seleziona]

<div class="speasyimagegallery-col-md-3 speasyimagegallery-col-sm-4 speasyimagegallery-col-xs-6">Su quello nuovo ottengo queste classi

Codice: [Seleziona]

<div class="speasyimagegallery-col-md-4 speasyimagegallery-col-sm-3 speasyimagegallery-col-xs-2">Ovviamente ottengo una suddivisione diversa delle colonne e la cosa più antipatica è che sul nuovo sito in visualizzazione mobile vedo le anteprime molto piccole perchè vengono disposte su sei colonne anzichè su due e questo è molto fastidioso.
Le classi vengono attribuite automaticamente, ma se il componente è uguale e non ci sono particolari impostazioni a riguardo (comunque le ho ricopiate pedissequamente da un sito all'altro), come mai i layout sono diversi? Dipende dal template?

Ho dato un'occhiata anche ai file php del layout album del componente, ma sembrano identici.
Come posso cambiare?
Se vado a creare un override dalla sezione "Override" del pannello di controllo di Joomla mi sovrascrive soltanto questo file

Codice: [Seleziona]

<?php
/**
* @package com_speasyimagegallery
* @subpackage mod_speasyimagegallery
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2021 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Language\Text;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Layout\FileLayout;

// No direct access
defined('_JEXEC') or die('Restricted access');

HTMLHelper::_('jquery.framework');
$app = Factory::getApplication();
$option = $app->input->get('option', '', 'STRING');
$view = $app->input->get('view', '', 'STRING');
$doc = Factory::getDocument();
$doc->addStylesheet( Uri::base(true) . '/components/com_speasyimagegallery/assets/css/style-min.css' );
$doc->addScript( Uri::base(true) . '/components/com_speasyimagegallery/assets/js/script-min.js' );
$layout = $params->get('album_layout', 'default');
$show_title = $params->get('show_title', 1);
$show_desc = $params->get('show_desc', 1);
$show_count = $params->get('show_count', 1);
$gutter = $params->get('album_gutter', 20)/2;
$gutter_sm = $params->get('album_gutter_sm', 15)/2;
$gutter_xs = $params->get('album_gutter_xs', 10)/2;
$id = '#mod-speasyimagegallery-' . $module->id;

$gallery_attribs = '';
if((($option != 'com_speasyimagegallery') && ($view != 'album')) || (($option == 'com_speasyimagegallery') && ($view == 'albums'))) {
  $doc->addScript( Uri::base(true) . '/components/com_speasyimagegallery/assets/js/speasygallery-main.js' );
  $gallery_attribs = 'data-showtitle="'. $show_title . '" data-showdescription="' .$show_desc .'" data-showcounter="' . $show_count . '"';
}

// Stylesheet
if($gutter || $gutter_sm || $gutter_xs) {
  $css = '';
  if($gutter) {
    $css .= $id . ' .speasyimagegallery-row {margin: -' . $gutter . 'px;}';
    $css .= $id . ' .speasyimagegallery-row > div > .speasyimagegallery-gallery-item {padding: ' . $gutter . 'px;}';
  }

  if($gutter_sm) {
    $css .= '@media only screen and (max-width : 992px) {';
    $css .= $id . ' .speasyimagegallery-row {margin: -' . $gutter_sm . 'px;}';
    $css .= $id . ' .speasyimagegallery-row > div > .speasyimagegallery-gallery-item {padding: ' . $gutter_sm . 'px;}';
    $css .= '}';
  }

  if($gutter_xs) {
    $css .= '@media only screen and (max-width : 768px) {';
    $css .= $id . ' .speasyimagegallery-row {margin: -' . $gutter_xs . 'px;}';
    $css .= $id . ' .speasyimagegallery-row > div > .speasyimagegallery-gallery-item {padding: ' . $gutter_xs . 'px;}';
    $css .= '}';
  }

  $doc->addStyleDeclaration($css);
}
?>

<div class="mod-speasyimagegallery" id="mod-speasyimagegallery-<?php echo $module->id; ?>">
  <?php
  if(count($images)) {
    ?>
    <div class="speasyimagegallery-gallery clearfix" <?php echo $gallery_attribs; ?>>
      <?php
      $layout = new FileLayout('gallery.'. $layout .'.row', JPATH_ROOT .'/modules/mod_speasyimagegallery/layouts');
      echo $layout->render(array('images'=>$images, 'params'=>$params));
      ?>
    </div>
    <?php
  } else {
    echo '<div class="alert">' . Text::_('MOD_SPEASYIMAGEGALLERY_NO_IMAGES') . '</div>';
  }
  ?>
</div>
Potrebbero essere queste le righe imputate?

Codice: [Seleziona]

$gutter = $params->get('album_gutter', 20)/2;
$gutter_sm = $params->get('album_gutter_sm', 15)/2;
$gutter_xs = $params->get('album_gutter_xs', 10)/2;Grazie a tutti

[giusebos]

sul nuovo sito la prima classe che regola la vista a 4 colonne

<div class="speasyimagegallery-col-md-4 speasyimagegallery-col-sm-3 speasyimagegallery-col-xs-2">

viene sovrascritto dalla classe successiva che ne impagina il contenuto a tre colonne.

se guardi il vecchio sito le classi sono invertitite

ricorda il 4 sta per 4/12 quattro dodicesimi: 12/4= 3 colonne
quindi il 3 sta per 3/12 : 12/3= 4 colonne

l'intera l'arghezza dei contenuti è formata da 12/12

adesso secondo me per risolvere dovresti guardare nelle impostazioni del componente, perchè credo vi debba essere la possibilità di impostare questo importante parametro.

[giusebos]

altra ipotesi e che il numero di colonne nei desktop sia regolata dalla dimenzione delle miniature, nel vecchio sito sono di 400x400 dpi mentre nel nuovo di 600x600dpi.

prova a ridimensionare le miniature nel menù opzioni nella colonna di sinistra.

[mariarosaria]

Ciao Giuseppe.
Ho fatto delle prove. Parto al contrario.

altra ipotesi e che il numero di colonne nei desktop sia regolata dalla dimenzione delle miniature, nel vecchio sito sono di 400x400 dpi mentre nel nuovo di 600x600dpi.

In realtà la dimensione delle miniature era all'opposto... 600 nel vecchio sito e 400 nel nuovo. Quindi la seconda ipotesi è da scartare. Ho comunque provato a cambiare le dimensioni, ma non influisce sulla vista singolo album. Ho svuotato cache e quant'altro.

dovresti guardare nelle impostazioni del componente, perchè credo vi debba essere la possibilità di impostare questo importante parametro

Nel componente, la scelta delle colonne la si può fare soltanto per la vista degli album di una categoria, oppure per le foto del singolo album.

Ho creato un modulo di prova di un singolo album (scorri tutta la pagina), in entrambi i siti, ma all'interno della voce di menu principale (prima avevo linkato la vista di un singolo album).
Come puoi vedere, in questo caso, anche nel nuovo sito, ho potuto scegliere le quattro colonne, ma solo per il modulo singolo album.
Vecchio https://www.pfsi.it/cittadella-dell-immacolata-gallery
Nuovo https://www.cittadelladellimmacolata.it/joomla4/gallery.html

Praticamente le due pagine sono degli articoli dove ho richiamato il modulo "categoria album" con loadposition. In questo caso, cioè quando i singoli album vengono richiamati dalla vista categoria, le colonne vengono impostate automaticamente.
Quindi anche la prima ipotesi è da scartare... Le opzioni sono impostate correttamente, per quello che permette il componente.

Stesso procedimento per entrambi i siti, ma risultati diversi 
Altre idee?

Può essere che siano due versioni diverse e che nella versione per joomla4 (alla fine è l'unica differenza che mi viene in mente) abbiano cambiato la vista?

[mariarosaria]

Nuovo sito

Codice: [Seleziona]

<div class="speasyimagegallery-col-md-4 speasyimagegallery-col-sm-3 speasyimagegallery-col-xs-2">

sul nuovo sito la prima classe che regola la vista a 4 colonne viene sovrascritto dalla classe successiva che ne impagina il contenuto a tre colonne.
ricorda il 4 sta per 4/12 quattro dodicesimi: 12/4= 3 colonne
quindi il 3 sta per 3/12 : 12/3= 4 colonne

Sì, ricordo, quindi di fatto non è la prima regola che viene sovrascritta, le regole funzionano in maniera corretta, perchè la prima col-md-4, di fatto significa 3 colonne. Dovrebbe essere invece col-md-3 per avere le 4 colonne come nel vecchio sito.

Sul vecchio sito

Codice: [Seleziona]

class="speasyimagegallery-col-md-3 speasyimagegallery-col-sm-4 speasyimagegallery-col-xs-6"Per questo ipotizzavo un override della regola 

[giusebos]

secondo me se crei un override della vista e successivamente inverti le classi dovresti risolvere....sempre che non si aggiusti la visualizzazione sui monitor con risoluzioni ampie e si SFASCI su quella dei dispositivi con risoluzioni inferiori.

J4 usa bootstrap 5, quindi è possibile che ci sia un piccolo conflitto.

con l'estensione per chrome "web developer" puoi disabilitare bootstrap 5 e qualsiasi css del template: lasciando solo il css del componente dovresti vedere 4 colonne, mentre se così non fosse abbiamo la conferma che è proprio il componente a creare solo 3 colonne. Ha questo punto sarebbe buono contattare lo sviluppatore per saperne di più....

[mariarosaria]

Grazie per le indicazioni.
Alla fine ho risolto con un override e sembra funzionare. Ieri sbagliavo il file dell'override.
Andava fatto non dal componente, né dal modulo, ma da layout (vedi allegato). Ieri era l'unico che non avevo provato.

Il file che sono andata a sovrascrivere è questo:

/html/layouts/com_speasyimagegallery/gallery/default/row.php

proveniente da

/components/com_speasyimagegallery/layouts/gallery/default/row.php

Il codice che ho modificato è questo:

Codice: [Seleziona]

$col = 'speasyimagegallery-col-md-' . $params->get('column', 3);
$col .= ' speasyimagegallery-col-sm-' . $params->get('column_sm', 3);
$col .= ' speasyimagegallery-col-xs-' . $params->get('column_xs', 6);in

Codice: [Seleziona]

$col = 'speasyimagegallery-col-md-' . $params->get('column', 2);
$col .= ' speasyimagegallery-col-sm-' . $params->get('column_sm', 3);
$col .= ' speasyimagegallery-col-xs-' . $params->get('column_xs', 6);
L'unica cosa che non mi spiego è perchè se xs era già impostato su 6, prima vedevamo 6 colonne su mobile, mentre adesso è corretto. Come se l'override layout/row.php avesse avuto priorità anche sul file row.php della cartella "com_speasy..." (mentre quando modificavo soltanto "com_speasy.../row.php" non funzionava)

Ho fatto diverse prove, ho provato anche con singola colonna su tutte le dimensioni schermo (12, sm 12, xs12), due colonne, ecc, ecc,... Non sfalsa mai, funziona! 

Questo override sovrascrive soltanto la vista del singolo album, quando lo si raggiunge dalla vista "categoria album".

Come potete vedere infatti, il modulo del singolo album che ho creato nella stessa pagina, sotto la vista categoria, è rimasto impostato su 4 colonne, mentre se aprite l'album dalla vista categoria lo vedrete impostato su 6 colonne vista desktop.
Ovviamente parlo del sito nuovo

Se potesse interessare a qualcuno ho provato con web developer (anche se solitamente uso firefox), ed il bootstrap sembra non influire sul componente che a sua volta ha un suo proprio file style.css con le indicazioni grid.
Spero possa servire a qualcuno.
E grazie ancora a Giuseppe