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

qwaszx · November 23, 2013

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

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

Виталий Анатольевич · November 23, 2013

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

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

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

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

qwaszx · November 23, 2013

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

Виталий Анатольевич · November 23, 2013

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

qwaszx · November 25, 2013

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

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

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

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

Виталий Анатольевич · November 26, 2013

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

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

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

http://awesomescreenshot.com/09520b3m71

qwaszx · November 26, 2013

Формируется? в редакторе
а так у тебя есть view/BlogView.php
Могу рассказать как сделать что то подобное этому
http://awesomescreenshot.com/09520b3m71

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

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

Виталий Анатольевич · November 26, 2013

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

Виталий Анатольевич · November 26, 2013

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

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. Данный мануал не претендует ни на что т.к. беслатное

Pacifik · November 26, 2013

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

Виталий Анатольевич · November 26, 2013

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

qwaszx · November 27, 2013

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

Виталий Анатольевич · November 27, 2013

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

qwaszx · November 27, 2013

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

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

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

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

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

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

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

{foreach $posts as $post}

<li>

{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>

Виталий Анатольевич · November 28, 2013

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

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

Виталий Анатольевич · November 28, 2013

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

http://hostresource.org/blog.rar

qwaszx · November 28, 2013

скорее всего Вы так и не создали поле image в таблице s_blog
или напишите в личку - разберемся

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

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

s_blog.doc

Виталий Анатольевич · November 28, 2013

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

FoXiGeN · December 5, 2013

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

desvit · December 5, 2013

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

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

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

Виталий Анатольевич · December 5, 2013

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

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

desvit · December 6, 2013

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);

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

Виталий Анатольевич · December 6, 2013

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

vitvvs · December 6, 2013

удалил не туда запостил

Maksclub · July 11, 2014

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

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

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

Edited July 11, 2014 by Maksclub

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

Recommended Posts

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Join the conversation