Перейти к содержанию
Официальный форум поддержки Simpla

Возможность редактирования показа картинок в записях блога.


Перейти к решению Решено Виталий Анатольевич,

Рекомендуемые сообщения

Помогите разобраться, как можно отредактировать показ картинок в записях блога. Например, при написании статьи в блоге необходимо, что бы у читающего была возможность навести курсор мышки на картинку и посмотреть увеличенный вариант. Или, как другой вариант, "шёлкнуть" на картинке мышкой и посмотреть увеличенный вариант картинки.

Заранее спасибо.

Ссылка на сообщение
Поделиться на другие сайты

если прибегать в стандартным библиотекам симплы то

1 -  в шаблоне пишем

{literal}
<script>
$(function() {
	// Зум картинок
	$("a.zoom").fancybox({ 'hideOnContentClick' : true });
});
</script>
{/literal}

 

2 <img /> помещаем в ссылку вида <a href="{путь к большой картинке}" class="zoom" data-rel="group">

Ссылка на сообщение
Поделиться на другие сайты

в админке, при написании записи в блог есть стандартные средства редактирования. если я вставлю код в шаблон, то на странице админке это не отразится, т.е. там не появятся новые "кпонки". но, когда я вставлю картинку, она автоматом сделает ресайз до малого размера, а потом уже на сайте будт работать как надо? так?

Ссылка на сообщение
Поделиться на другие сайты

эээ... ресайз автоматом? а разве у стандартной симплы нет поля для загрузки картинки для записи?

Ссылка на сообщение
Поделиться на другие сайты

Первый пункт использовал в шаблоне simpla/design/html/post.php

А куда вставлять изменения, относящиеся к второму пункту?

И, может кто подскажет, в каком файле формируется тект поста?

Заранее спасибо.

Ссылка на сообщение
Поделиться на другие сайты

Формируется? в редакторе :)

а так у тебя есть view/BlogView.php

Могу рассказать как сделать что то подобное этому 

http://awesomescreenshot.com/09520b3m71

Ссылка на сообщение
Поделиться на другие сайты

Формируется? в редакторе :)

а так у тебя есть view/BlogView.php

Могу рассказать как сделать что то подобное этому 

http://awesomescreenshot.com/09520b3m71

не формируется, а хранится. в виде страницы.

да, такой эффект и хочется получить. пробовал в настройках вставляемой картинки, но что-то не получается. если поделитесь опытом - большое, человеческое спасибо:)

Ссылка на сообщение
Поделиться на другие сайты
  • Решение

И так... приступим

1 - добавляем поле image () в таблицу s_blog



    ALTER TABLE `s_blog` ADD `image` VARCHAR( 255 ) NOT NULL

 

2 - открываем api/Blog.php
    2.1 к запросам добавляем новое поле:
        2.1.1 метод get_post($id)
        было



        $query = $this->db->placehold("SELECT b.id, b.url, b.name, b.annotation, b.text, b.meta_title,
         b.meta_keywords, b.meta_description, b.visible, b.date
         FROM __blog b $where LIMIT 1");

 

        стало
 



        $query = $this->db->placehold("SELECT b.id, b.url, b.name, b.annotation, b.text, b.meta_title,
         b.meta_keywords, b.meta_description, b.visible, b.date, b.image
         FROM __blog b $where LIMIT 1");

 


    
        2.1.2 метод get_posts($id)
        было
 



        $query = $this->db->placehold("SELECT b.id, b.url, b.name, b.annotation, b.text,
         b.meta_title, b.meta_keywords, b.meta_description, b.visible,
         b.date
         FROM __blog b WHERE 1 $post_id_filter $visible_filter $keyword_filter
         ORDER BY date DESC, id DESC $sql_limit");

 

        стало



        $query = $this->db->placehold("SELECT b.id, b.url, b.name, b.annotation, b.text,
         b.meta_title, b.meta_keywords, b.meta_description, b.visible,
         b.date, b.image
         FROM __blog b WHERE 1 $post_id_filter $visible_filter $keyword_filter
         ORDER BY date DESC, id DESC $sql_limit");

 

    2.2 Добавляем метод удаление картинки



    public function delete_image($id)
    {
        $query = $this->db->placehold("SELECT image FROM __blog WHERE id=?", intval($id));
        $this->db->query($query);
        $filename = $this->db->result('image');
        if(!empty($filename))
        {
            $query = $this->db->placehold("UPDATE __blog SET image=NULL WHERE id=?", $id);
            $this->db->query($query);
            $query = $this->db->placehold("SELECT count(*) as count FROM __blog WHERE image=? LIMIT 1", $filename);
            $this->db->query($query);
            $count = $this->db->result('count');
            if($count == 0)
            {            
                @unlink($this->config->root_dir.$this->config->original_images_dir.$filename);        
            }
        }
    }

 

 

Теперь в админке
3 - simpla/PostAdmin.php
    перед методом public function fetch()
    вставляем 



    private $allowed_image_extentions = array('png', 'gif', 'jpg', 'jpeg', 'ico');

 

     вставить загрузку и удаление картинок в оригиналс методом класса Image. Вставляем после



            if(empty($post->id))
            {
                $post->id = $this->blog->add_post($post);
                $post = $this->blog->get_post($post->id);
                $this->design->assign('message_success', 'added');
            }
             else
             {
                 $this->blog->update_post($post->id, $post);
                 $post = $this->blog->get_post($post->id);
                    $this->design->assign('message_success', 'updated');
             }    

 


    Строки



                // Удаление изображения

                if($this->request->post('delete_image'))
                {
                    $this->blog->delete_image($post->id);
                }
                // Загрузка изображения
                $image = $this->request->files('image');
                if(!empty($image['name']) && in_array(strtolower(pathinfo($image['name'], PATHINFO_EXTENSION)), $this->allowed_image_extentions))
                {
                    if ($image_name = $this->image->upload_image($image['tmp_name'], $image['name']))
                    {
                            $this->blog->delete_image($post->id);
                            $this->blog->update_post($post->id, array('image'=>$image_name));
                    }
                    else
                    {
                        $this->design->assign('error', 'error uploading image');
                    }    
                }    
                $post = $this->blog->get_post(intval($post->id));

 


4 - simpla/design/html/post.tpl в правую часть



    <!-- Правая колонка свойств товара -->    
    <div id="column_right">

 


    вставляем (уже с ресайзером, см ниже)
 



        <!-- Изображение категории -->    
        <div class="block layer images">
            <h2>Изображение</h2>
            <input class='upload_image' name=image type=file>            
            <input type=hidden name="delete_image" value="">
            {if $post->image}
            <ul>
                <li>
                    <a href='#' class="delete"><img src='design/images/cross-circle-frame.png'></a>
                    <img src="{$post->image|resizepost:100:100}" alt="" />
                </li>
            </ul>
            {/if}
        </div>

 

превью http://awesomescreenshot.com/0f820gwq80
------------------------------------------------------------------------------
Делаем ресайзер этого "чудо"
5 - в htaccess добавляем снизу



RewriteRule ^files/post/(.+) resize/resizepost.php?file=$1&token=%{QUERY_STRING}

 


6 - в config/config.php



post_images_dir = files/post/;

 

7 - Создаем в "files" папку "post" справами на запись
8 - В папке "resize" создаем файл "resizepost.php" с содержимым





<?php
chdir('..');
require_once('api/Simpla.php');

$filename = $_GET['file'];
$token = $_GET['token'];
$filename = str_replace('%2F', '/', $filename);

if(substr($filename, 0, 6) == 'http:/')
    $filename = 'http://'.substr($filename, 6);
    
$simpla = new Simpla();
if(!$simpla->config->check_token($filename, $token))
    exit('bad token');        

if(is_readable($simpla->config->post_images_dir.$filename))
    $resized_filename = $simpla->config->post_images_dir.$filename;
else
    $resized_filename = $simpla->image->resizepost($filename);
    
if(is_readable($resized_filename))
{
    header('Content-type: image');
    print file_get_contents($resized_filename);
}

 


9 - В файле "api/Design.php" добавляем плагин для смарти в __construct (там где и остальные)



$this->smarty->registerPlugin('modifier', 'resizepost', array($this, 'resize_modifier_post'));                        


    
10 - В файле "api/Images.php" добавляем резсайзер для постов в любое место класса



    function resizepost($filename)
    {
        list($source_file, $width , $height, $set_watermark) = $this->get_resize_params($filename);

        // Если вайл удаленный (http://), зальем его себе
        if(substr($source_file, 0, 7) == 'http://')
        {    
            // Имя оригинального файла
            if(!$original_file = $this->download_image($source_file))
                return false;
            
            $resized_file = $this->add_resize_params($original_file, $width, $height, $set_watermark);            
        }    
        else
        {
            $original_file = $source_file;
        }
        
        $resized_file = $this->add_resize_params($original_file, $width, $height, $set_watermark);                    
    
        // Пути к папкам с картинками
        $originals_dir = $this->config->root_dir.$this->config->original_images_dir;
        $preview_dir = $this->config->root_dir.$this->config->post_images_dir;
        
        // Убрал водяные знаки намерено, кто захочет вернет сам 
        if(class_exists('Imagick') && $this->config->use_imagick)
            $this->image_constrain_imagick($originals_dir.$original_file, $preview_dir.$resized_file, $width, $height);
        else
            $this->image_constrain_gd($originals_dir.$original_file, $preview_dir.$resized_file, $width, $height);
        
        return $preview_dir.$resized_file;
    }    

 


------------------------------------------------------------------------------
Шаблоны клиентской части
11 - В blog.tpl там где хотите поставить миниятюру



{if $post->image}<a href="blog/{$post->url}"><img src="{$post->image|resizepost:100:100}" alt="{$post->name|escape}" /></a>{/if}

    С размером и местом определитесь http://awesomescreenshot.com/07020gx35c

12 - post.tpl вставляем картинку с увеличением



{if $post->image}<a href="{$post->image|resizepost:800:800}" class="zoom" data-rel="group"><img src="{$post->image|resizepost:100:100}" alt="{$post->name|escape}" /></a>{/if}

 

    и подключаем скрипт внизу шаблона



{literal}
<script>
$(function() {
    // Зум картинок
    $("a.zoom").fancybox({ 'hideOnContentClick' : true });
});
</script>
{/literal}    

http://awesomescreenshot.com/00820gx844

 

13 - Наслаждаемся

Благодарности приветствуются !

P.S. Данный мануал не претендует ни на что т.к. беслатное :)

Ссылка на сообщение
Поделиться на другие сайты

я писал мануал на чистом 2.2.4 и дал скрины. Должно получиться

Ещё раз большое спасибо.

На 2.1.5 поставить пока не удалось. заковыка в пункте 4. не хочет сохранять картинки и после сохранения всё как-то в шаблоне post.tpl плывёт и едет. разбираемся дальше.

знаний в пхп и муськуэл - нет. приобретаю по ходу дела :)

 

добавлю для расшифровки, а то непонятно написал:  после всех манипуляций по Вашему мануалу, при попытке сохранить картинка в момент создания записи в блоге, выкидывает на недоступную страницу. если потом вернуться в раздел "Блог", то созданная новость существует, но картинка не сохранена. вот. Если не пытаться вставить картинку - то всё нормально.

 

ещё одно добавление: сделаны все предыдущие пункты и не обращаю внимания на предыдущую проблему, делаю дальше. как только выполняю пункт 11, всё, при переходе с главной страницы в раздел блог - белый экран.

вот куда я встаавил пункт 11:

<!-- Статьи /-->

<ul id="blog">

    {foreach $posts as $post}

    <li>

         <p><h5>{$post->date|date}</h5></p>

                {if $post->image}<a href="blog/{$post->url}"><img src="{$post->image|resizepost:100:100}" alt="{$post->name|escape}" /></a>{/if}

                <h3><a data-post="{$post->id}" href="blog/{$post->url}">{$post->name|escape}</a></h3>

        <p>{$post->annotation}</p>

    </li>

    {/foreach}

</ul>

<!-- Статьи #End /-->

Ссылка на сообщение
Поделиться на другие сайты

скорее всего Вы так и не создали поле image в таблице s_blog

или напишите в личку - разберемся

Ссылка на сообщение
Поделиться на другие сайты

скорее всего Вы так и не создали поле image в таблице s_blog

или напишите в личку - разберемся

вставил. проверял несколько раз. вот структура таблицы s-blog

 

буду смотреть на ваши изменения и сравнивать с тем, что у меня получилось. похоже я где-то не то сделал.

 

 

 

s_blog.doc

Ссылка на сообщение
Поделиться на другие сайты

А скажите пожалуйста а если данный модуль для статей переписать, то кроме значения blog на articles ещё нужно что нибудь поменять?

Ссылка на сообщение
Поделиться на другие сайты

Добрый вечер. Делал все по инструкции, но ничего не вышло, не работало. Когда скачал архив (перезалил), то все заработало. Спасибо.

Вопрос: а для блока "Станицы" по такому принципу делать или нет? Может есть у кого готовое решение. Заранее спасибо!

 

п.с.: Пробовал удалить фото с админке... не удаляется. А после удаления новости целиком, на сервере файлы в папке "post" остаются. В чем может быть проблема?

Ссылка на сообщение
Поделиться на другие сайты

1 - для страниц так же делать (реализовывал)

2 - видимо Я не правильно указал путь в api/Blog.php на удаление картинок

Ссылка на сообщение
Поделиться на другие сайты

1 - для страниц так же делать (реализовывал)

2 - видимо Я не правильно указал путь в api/Blog.php на удаление картинок

Добрый день. Для страниц - получилось по вашему методу. Спасибо.

А в api/Blog.php - я переделал строку с 

@unlink($this->config->root_dir.$this->config->original_images_dir.$filename);

на 

@unlink($this->config->root_dir.$this->config->post_images_dir.$filename);

и все равно не работает. :(

Ссылка на сообщение
Поделиться на другие сайты

там нужно смотреть по примеру удаления картинок товаров. Я чуть позже обновлю архив с исправлениями

Ссылка на сообщение
Поделиться на другие сайты
  • 7 месяцев спустя...

Не получилось (чуть -чуть) посоветуйте плиз

 

Закинул выше приведенные файлы к себе и вот что имеем:

1. Картинка загружается в originals

2. Папка files/post/ пустая

3. На странице сайта (где выводятся список постов) изображения не имеют пути до папки files/post/ ...

то есть в коде они как-будто в главной директории сайта, но их и там нетp

Вот что показывает firebag:  mysite.ru/image_name.100x100.jpg

Нужно так: mysite.ru/files/post/image_name.100x100.jpg

4. В админке соответсвенно также!

5. Картинки не удаляются из админки

 

------

Подскажите пожалуйста в чем может быть дело?! Я так понимаю проблема в путях.... Или в загрузке/ресайзе изображений?

 

 

upd: Все сам нашел -  не исправил  config.php

Изменено пользователем Maksclub
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...