Jump to content

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


Go to solution Solved by Виталий Анатольевич,

Recommended Posts

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

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

Link to post
Share on other sites

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

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

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

 

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

http://awesomescreenshot.com/09520b3m71

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

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

Link to post
Share on other sites
  • Solution

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

 

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

 

 

 

s_blog.doc

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites
  • 7 months later...

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

 

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

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 by Maksclub
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...