Перейти к содержимому


Фото
- - - - -

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


Best Answer Виталий Анатольевич , 26.11.2013 - 22:38

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

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://awesomescreen....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://awesomescreen....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://awesomescreen....com/00820gx844

 

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

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

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

Перейти к посту


  • Чтобы отвечать, сперва войдите на форум
35 ответов в теме

#1 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 23.11.2013 - 23:30

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

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



#2 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 23.11.2013 - 23:34

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

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

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

 

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



#3 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 23.11.2013 - 23:57

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



#4 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 24.11.2013 - 00:19

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



#5 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 25.11.2013 - 10:49

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

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

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

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



#6 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 26.11.2013 - 04:24

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

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

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

http://awesomescreen....com/09520b3m71



#7 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 26.11.2013 - 14:17

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

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

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

http://awesomescreen....com/09520b3m71

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

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



#8 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 26.11.2013 - 21:24

как у вас с php и mysql? 



#9 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 26.11.2013 - 22:38   Best Answer

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

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://awesomescreen....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://awesomescreen....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://awesomescreen....com/00820gx844

 

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

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

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



#10 Pacifik

Pacifik
  • Пользователь
  • 89 сообщений
  • Дизайн, Верстка, SEO, Заказчик, Пользователь
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 27.11.2013 - 00:11

Человек ушел в "Loading......" :)



#11 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 27.11.2013 - 00:19

тему можно переносить в "готовые решения"



#12 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 27.11.2013 - 09:57

Ушол в .....      буду пробовать. БОЛЬШОЕ СПАСИБО, заранее. если всё упадёт:)



#13 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 27.11.2013 - 19:58

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



#14 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 28.11.2013 - 00:28

я писал мануал на чистом 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 /-->



#15 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 28.11.2013 - 12:36

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

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



#16 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 28.11.2013 - 12:42

даю ссылку на архив с измененными файлами

http://hostresource.org/blog.rar



#17 qwaszx

qwaszx
  • Пользователь
  • 52 сообщений

Опубликовано 28.11.2013 - 14:39

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

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

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

 

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

 


 

Прикрепленные файлы:

  • Прикрепленный файл  s_blog.doc   46,5К   40 раз скачано


#18 Виталий Анатольевич

Виталий Анатольевич
  • Фрилансер
  • 309 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:Москва

Опубликовано 29.11.2013 - 00:53

структура как структура... если не разберешься - стукни



#19 FoXiGeN

FoXiGeN
  • Пользователь
  • 14 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 05.12.2013 - 18:41

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



#20 desvit

desvit
  • Пользователь
  • 3 сообщений

Опубликовано 05.12.2013 - 23:04

Добрый вечер. Делал все по инструкции, но ничего не вышло, не работало. Когда скачал архив (перезалил), то все заработало. Спасибо.
Вопрос: а для блока "Станицы" по такому принципу делать или нет? Может есть у кого готовое решение. Заранее спасибо!

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




0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых