Расстояние между картинками в category view

Тема в разделе "Phoca Gallery", создана пользователем kanych, 16.09.2009.

  1. Offline

    kanych Недавно здесь

    Регистрация:
    14.09.2009
    Сообщения:
    1
    Симпатии:
    0
    Пытаюсь разобраться с phoca gallery и возникла пока не разрешимая проблема - никак не могу увеличить расстояние между изображениями в category view... Может кто сталкивался с такой задачей?
     
  2.  
  3. Offline

    MGM Недавно здесь

    Регистрация:
    11.11.2009
    Сообщения:
    13
    Симпатии:
    2
    Пол:
    Мужской
    Сам озаботился только что этим вопросом. Всё оказалось очень вэри просто :)
    Я, конечно, PHP не знаю, но в HTML и CSS разобраться могу.

    Находим файл:
    components\com_phocagallery\views\categories\tmpl\default.php
    и начинаем его очень легко изменять. Всё на уровне примитивного HTML и CSS - не более.
    интересует этот кусок:
    Код (CODE):
    1. echo '<tr>';       
    2. echo '<td align="center" valign="middle" style="'.$this->tmpl['imagebg'].';text-align:center;">
    3.      <a href="'.$this->categories[$i]->link.'">'.JHTML::_( 'image.site',
    4.       $this->categories[$i]->linkthumbnailpath, '', '', '', $this->categories[$i]->title, 'style="border:0"' ).'</a></td>';
    5. echo '<td align="center"><a href="'.$this->categories[$i]->link.'"class="category'.
    6.        $this->params->get( 'pageclass_sfx' ).'">'.$this->categories[$i]->title.'</a>&nbsp;';
    7.        
    8. if ($this->categories[$i]->numlinks > 0) {echo '<span class="small">('.$this->categories[$i]->numlinks.')</span>';}
    9.        
    10. echo '</td>';
    11. echo '</tr>';

    у меня он начинается на 70-й строке.

    Если кратко - здесь формируется строка таблицы из двух ячеек, в которых иконка и название категории.
    Собственно, вся таблица категории состоит из этой одной строки.

    Что делаем дальше? СЛЕГКА изменяем структуру таблицы и вводим 2 дополнительных свойства ячейки.
    1. Вместо строки таблицы с 2 ячейками делаем 2 строки с 1 ячейкой в каждой
    2. Увеличиваем левый и правый отступы в ячейке первой строки на сколько захотим (у меня 25 px).

    Код (CODE):
    1. echo '<tr>';       
    2. echo '<td align="center" valign="middle" style="'.$this->tmpl['imagebg'].';text-align:center; [COLOR="Red"][B]padding-left:25px;padding-right:25px;[/B][/COLOR]">
    3.     <a href="'.$this->categories[$i]->link.'">'.JHTML::_( 'image.site',  
    4.     $this->categories[$i]->linkthumbnailpath, '', '', '', $this->categories[$i]->title, 'style="border:0"' ).'</a></td>[COLOR="Magenta"][B]</tr>[/B][/COLOR]';
    5. echo '[COLOR="Magenta"][B]<tr>[/B][/COLOR]<td align="center">
    6.     <a href="'.$this->categories[$i]->link.'" class="category'.
    7.     $this->params->get( 'pageclass_sfx' ).'">'.$this->categories[$i]->title.'</a>&nbsp;';
    8.        
    9. if ($this->categories[$i]->numlinks > 0) {echo '<span class="small">
    10.      '.$this->categories[$i]->numlinks.')</span>';}
    11.        
    12. echo '</td>';
    13. echo '</tr>';


    ВСЁ!
    В итоге получаем регулируемые расстояния между категориями + название категории ПОД иконкой, а не рядом (что для меня важно было).

    Если нужны подписи сбоку, то таблицу не переформатируем, а в первую ячейку добавляем отступ слева, во вторую ячейку - отступ справа.
    Если нужно изменить ещё и вертикальное расстояние, нужно добавить padding-top и padding-bottom.

    В принципе, того же эффекта можно достичь, если эти свойства применить к таблице, а ещё лучше к контейнеру, в котором она содержится. Кроме того можно использовать свойство margin. Например так (строка 66)

    Код (CODE):
    1. echo '<div style="position:relative;float:left;[COLOR="Red"][B]margin:10px 25px 10px 25px;[/B][/COLOR]"><table>';


    Вот теперь точно всё.
     
    jei и doctorgrif нравится это.
  4. Offline

    jei Недавно здесь

    Регистрация:
    15.10.2009
    Сообщения:
    53
    Симпатии:
    0
    Пол:
    Мужской
    очень интересно а как вы вышли на этот код пшп.Ведь нужно знать какой файл пшп подключаеться к индексу шаблона.:)
     
  5. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    для вывода категории (в вашем случае - для подключения к индексу шаблона) используется components\com_phocagallery\views\categories\tmpl\default.php
    что характерно, ожидаемо и предсказуемо
    а уж потом в нем находится вызов категории по классу css - category
    MGM просто использовал логику и недокументированные возможности мозга для познания окружающего (таким образом, по мнению ученых, люди от человекообразных обезьян отпочковались и стали тем, кем стали)
    MGM +1
     
  6. Offline

    jei Недавно здесь

    Регистрация:
    15.10.2009
    Сообщения:
    53
    Симпатии:
    0
    Пол:
    Мужской
    doctorgrif человек ты помоему не в ту степ пошёл.Программист это прежде всего железная мужская логика.

    MGM спасбо вы навели меня на првильное решение + вам.ТОлько единственное что вам надо добавить.Этот как искать соответствующий подключающийся код пшп.Я лично делал так.Открываете в мозиле нужную страницу на которой будете производить изменения.После этого
    открывайте примочку файрбург.Он просматривает весь штмл страницы и цсс.После этого находите нужный див с названием класса или ИД.
    После этого в тотале задаете поиск по внутренему тексту это нижний пункт,во всей джумле или в компоненте конкретном по этому названию.Правда он находит много файлов но можно экспереминтировать со всеми.В данном случае с наводки MGM я догадался что путь такой E:\WebServers\home\asd\www\asd\components\com_phocagallery\views\category\tmpl\default.php После этого нужно вырезать некоторый код и сохранять и смотреть что происходит на странице.
    менять местами блоки кодов.Я лично мудрил час.В итоге получилось как хотел.Ещё надо хотя бы немного знать пшп.
     
    Последнее редактирование: 06.12.2009
  7. Offline

    MGM Недавно здесь

    Регистрация:
    11.11.2009
    Сообщения:
    13
    Симпатии:
    2
    Пол:
    Мужской
    jei, не поверите, но метода у меня точно такая, как Ваша :) Правда, времени ушло намного меньше, ибо сразу написал, как надо. Я дольше писал пост сюда
    ps. php я не знаю - исключительно по логике html сделал.
     
  8. Offline

    MGM Недавно здесь

    Регистрация:
    11.11.2009
    Сообщения:
    13
    Симпатии:
    2
    Пол:
    Мужской
    Продолжу тему, чтобы уже окончательно исчерпать вопросы, которые могут возникнуть при переходе на Phoca Gallery 2.6.

    Разработчик изменил код этого модуля + добавлена возможность указывать количество колонок на странице. Соответственно предложенные выше изменения теперь работают не полностью.

    Итак, в версии 2.6
    файл: components\com_phocagallery\views\categories\tmpl\ default.php
    строка: 94
    Код (CODE):
    1. echo '</a></td>[COLOR="Magenta"]</tr>[/COLOR]';
    2. echo '[COLOR="Magenta"]<tr>[/COLOR]<td [COLOR="Magenta"]align="center"[/COLOR]  [COLOR="Red"]style="padding-bottom:25px;[/COLOR]"><a href="'.$this->categories[$i]->link.'" class="category'.


    Эта добавка, как и прежде, позволяет разместить название категории ПОД иконкой

    А эта - изменяет интервал между рядами категорий

    Дело в том, что если раньше в блок <div> вставлялась только одна категория и нужно было манипулировать полями именно блока для изменения интервалов между категорями, то в версии 2.6 в этот блок помещается целая колонка и возможности раздвигать категории по вертикали, управляя блоком, нет.
    Поэтому самый простой способ увеличить отступ в ячейке с названием категории.

    Будем надеяться, что в следующей версии разработчик введёт возможность хотя бы раздвигать категории по вертикали :)
     
  9. Offline

    jei Недавно здесь

    Регистрация:
    15.10.2009
    Сообщения:
    53
    Симпатии:
    0
    Пол:
    Мужской
    MGM у нас с вами хорошая логика и методы железные.Но вам надо учить пшп и мне)))Я вот чуть дашьще вас пошёл я сменил большие блоки кода пшп.Но у меня не много другая задача была.
     

Поделиться этой страницей

Загрузка...