Оформление блог-постов плиткой

Kf Kidzfashion
30 августа 2017
1

Здравствуйте Владимир!

Есть ли возможность сдеалть , чтобы тексты в блоге распологались в таком порядке ??

8 ответов
  • Владимир Сергеев
    Разработчик
    Решение
    30 августа 2017 13:34

    Здравствуйте!

    Откройте приложение Блог - дизайн - proStore - шаблоны - файл stream_posts.html
    Выделите весь код, и замените его этим кодом:

    {* post stream (list): default view mode *}
    {strip}
    {if empty($theme_settings.theme_id)}
    	{$theme_id = 'prostore'}
    {else}
    	{$theme_id = waRequest::getTheme()}
    {/if}
    
    {* Для Schema.org *}
    {$logo_url = ''}
    {if $wa->block("`$theme_id`.social_logo")}
    	{$logo_url = $wa->block("`$theme_id`.social_logo")}
    {else}
    	{if !empty($theme_settings.logo_social)}
    		{$logo_url = $wa_parent_theme_url|cat:$theme_settings.logo_social}
    	{/if}
    {/if}
    
    {$logo_width = ''}
    {if !empty($theme_settings.logo_social_width)}
    	{$logo_width = $theme_settings.logo_social_width}
    {/if}
    
    {$logo_height = ''}
    {if !empty($theme_settings.logo_social_height)}
    	{$logo_height = $theme_settings.logo_social_height}
    {/if}
    
    {$company_name = ''}
    {if !empty($theme_settings.store_name)}
    	{$company_name = $theme_settings.store_name}
    {/if}
    
    {$company_phone = ''}
    {if !empty($theme_settings.store_telephone)}
    	{$company_phone = $theme_settings.store_telephone}
    {/if}
    
    {$company_address = ''}
    {if !empty($theme_settings.store_address)}
    	{$company_address = $theme_settings.store_address}
    {/if}
    
    
    {if !waRequest::isXMLHttpRequest()}{* Не отдаём по ajax *}
    	<h1 class="page-name {$theme_settings.tb_align}">
    		{if !empty($theme_settings.show_rss)}
    			{$rss=$wa->blog->rssUrl()}
    			<a href="{$rss}" target="_blank" title="[`Read RSS feed`]" style="color: #FD7902; float: right;"><i class="fa fa-rss"></i></a> 
    		{/if}
    		{if !$is_concrete_blog}
    			{$theme_settings.blog_title}
    		{else}
    			{$blogs = $wa->blog->blogs()}
    			{foreach $blogs as $blog}
    				{if $wa->globals('blog_id') eq $blog.id && empty($is_search)}
    					{$blog.name}
    				{/if}
    			{/foreach}
    
    		{/if}
    		{if $wa->user()->isAdmin()}
    			 
    			<a href="{$wa_backend_url}blog" target="_blank" class="tooltip" title="[`Open blog app in backend`]">
    				  <i class="fa fa-edit" style="font-size: 16px;"></i>
    			</a>
    		{/if}
    	</h1>
    	{include file="breadcrumbs.html" place='blog_home' inline}
    {/if}
    
    {$count = 1}
    {$blog_cols = 3}
    
    {foreach $posts as $post}
        <section class="post col-md-4" id="post-{$post.id}" {if $wa->param('blog_url')}itemprop="blogPosts" {/if}itemscope itemtype="http://schema.org/BlogPosting" data-count="{$count++}">
        	<meta itemscope itemprop="mainEntityOfPage" itemType="http://schema.org/WebPage" itemid="{$post.link}" content="{$post.link}"/>
    
    
        	{if !empty($post.g_thumb)}
        		<a href="{$post.link}" class="thumblink" style="float: left;" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
        			{$post.g_thumb}
        			{* как должен выглядеть g_thumb:
        	    	g_thumb=<img itemprop="url" src="ссылка на изображение" class="post-thumb shadowed" style="max-width:100%;" alt="подпись к изображению"/><meta itemprop="width" content="ширина изображения"><meta itemprop="height" content="высота изображения">
        	    	*}
        	    </a>
        	{else}
        		<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject" style="display: none;">
        			<img itemprop="url" src="{$wa_theme_url}img/dummy200.png" alt="{$post.title}"/>
        			<meta itemprop="width" content="200">
        			<meta itemprop="height" content="200">
        		</div>
        	{/if}
    
            <h2 itemprop="headline">
                <a href="{$post.link}" itemprop="url">{$post.title}</a>
    
                {* @event prepare_posts_frontend.%plugin_id%.post_title *}
                {if !empty($post.plugins.post_title)}
                    {foreach $post.plugins.post_title as $plugin => $output}{$output}{/foreach}
                {/if}
    			{if $wa->user()->isAdmin()}
    				 
    				<a href="{$wa_backend_url}blog/?module=post&id={$post.id}&action=edit" target="_blank" class="tooltip" title="[s`Edit`]">
    					  <i class="fa fa-edit" style="font-size: 16px;"></i>
    				</a>
    			{/if}
            </h2>
            <div class="credentials">
            	{if !empty($logo_url)}
    	        	<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    	        	    <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
    	        	        <img itemprop="url" src="{$logo_url}?v{$wa_theme_version}" style="display:none;" alt="{$company_name}"/>
    	        	        <meta itemprop="width" content="{$logo_width}">
    	        	        <meta itemprop="height" content="{$logo_height}">
    	        	    </div>
    	        	    <meta itemprop="name" content="{$company_name}">
    	        	    <meta itemprop="telephone" content="{$company_phone}">
    	        	    <meta itemprop="address" content="{$company_address}">
    	        	</div>
            	{/if}
    
    
                <span itemprop="author">
    	            {if isset($post.user.photo_url_20)}
    	                {if $post.user.posts_link}
    	                    <a href="{$post.user.posts_link}">
    	                        <img src="{$post.user.photo_url_20}" class="userpic shadowed" alt="{$post.user.name}">
    	                    </a>
    	                {else}
    	                    <img src="{$post.user.photo_url_20}" class="userpic shadowed" alt="{$post.user.name}">
    	                {/if}
    	            {/if}
    	            {if $post.user.posts_link}
    	                <a href="{$post.user.posts_link}" class="username bold" itemprop="name">{$post.user.name}</a>
    	            {else }
    	                <span class="username bold" itemprop="name">{$post.user.name}</span>
    	            {/if}
    	        </span>
    
    	         
    
    	        <span class="hint date">
    	        	<meta itemprop="datePublished" content="{$post.datetime}"/>
    	        	<meta itemprop="dateModified" content="{$post.datetime}"/>
    	        	{$post.datetime|wa_datetime:"humandate"}
    	        </span>
    
                 
    
                {if $show_comments && $post.comments_allowed}
                    {if !empty($post.comment_count)}
                        <a href="{$post.link}#comments" class="float-right">
                            {if $post.comment_count > 1}
                            		<i class="fa fa-comments"></i>
                            {else}
                            		<i class="fa fa-comment"></i>
                            {/if} 
                            {_w('%d comment','%d comments',$post.comment_count)}
                        </a>
                    {else}
                        {*
                        <a href="{$post.link}#comments" class="hint">
                            [`no comments`]
                        </a>
                        *}
                    {/if}
                {/if}
    
            </div>
    
            {* @event prepare_posts_frontend.%plugin_id%.before *}
            {if !empty($post.plugins.before)}
                <div class="text_before editor_content">
                    {foreach $post.plugins.before as $plugin => $output}
                    <div class="blog-plugins">
    	                {$output}
    	            </div>
                    {/foreach}
                </div>
            {/if}
    
            <div class="text editor_content">
                <div itemprop="articleBody">{$post.text}</div>
                {if $post.cutted}
                    <a href="{$post.link}" class="button gray">{$post.cut_link_label|default:'[`Continue reading →`]'}</a>
                {/if}
            </div>
            {* attached album photo thumbs *}
            {if $post.album_id && $post.album.id && $post.album.photos && !$post.cutted}
                {$photos_loaded = 1} {* required for proper photo thumbs retinification *}
                <div class="stream-album album" data-re="{$post.id}" style="display: none;">
                    {foreach $post.album.photos as $p}
                        <a href="{$p.thumb_big.url}" class="album_gallery" data-rel="gallery_{$post.id}" {if $p.description}title="{$p.description|escape}"{/if}>
                        	<img src="{$p.thumb.url}" class="retinify" alt="{if $p.description}{$p.description|escape}{/if}"></a>
                    {/foreach}
                </div>
            {/if}
    
            {* @event prepare_posts_frontend.%plugin_id%.after *}
            {if !empty($post.plugins.after)}
                <div class="text_after editor_content padding-top10">
                    {foreach $post.plugins.after as $plugin => $output}
                    	<div class="blog-plugins">
    	                	{$output}
    	                </div>
                    {/foreach}
                </div>
            {/if}
    		<div class="clearfix"></div>
        </section>
    	{if $count > $blog_cols}
    		<div class="clearfix" data-count="{$count=1}"></div>
    	{/if}
    {foreachelse}
        {if $page lt 2}
            {_w('%d post','%d posts',0)}
        {/if}
    {/foreach}
    <div class="clearfix"></div>
    
    {if !empty($photos_loaded) && blogPhotosBridge::is2xEnabled()}
        <script src="{$wa_static_url}wa-content/js/jquery-plugins/jquery.retina.min.js"></script>
        <script>$(function() { "use strict";
            $.Retina && $('img.retinify').retina();
        });</script>
    {/if}
    {/strip}
    
    • Язаджи Вячеслав
      13 февраля 2018 01:21

      Владимир, подскажите пожалуйста, почему после 10 записи блога начинается все с новой строки (добавляется clearfix). Получается висячая строка. Я так понимаю это ленивая загрузка так работает. Каким образом сделать, чтобы количество записей в ней было кратно 3?

  • Kf Kidzfashion
    Решение
    30 августа 2017 15:33

    Здравствуйте Владимир!

    Большое Вам спасибо за быстрые ответы и такую классную поддержу!!!

    Вставил верний код, и получилось во что: https://kidzfashion.ru/b/

    Как это поправить?


    Заранее Вам спасибо!


    • Владимир Сергеев
      Разработчик
      Решение
      30 августа 2017 15:40

      Во вставленном коде найдите строку:

      <section class="post col-md-4" id="post-{$post.id}" {if $wa->param('blog_url')}itemprop="blogPosts" {/if}itemscope itemtype="http://schema.org/BlogPosting" data-count="{$count++}">

      После col-md-4 вставьте класс padding7, чтобы получилось так:

      <section class="post col-md-4 padding7" id="post-{$post.id}" {if $wa->param('blog_url')}itemprop="blogPosts" {/if}itemscope itemtype="http://schema.org/BlogPosting" data-count="{$count++}">

      И в вашем плагине картинок блога, отключите вывод самых маленьких миниатюр.

    • Владимир Сергеев
      Разработчик
      Решение
      30 августа 2017 16:01

      Аа.. и ещё в файле stream.html найдите код:

      {if $is_search}
          {include file="stream_search.html" inline}
      {else}
          {include file="stream_posts.html" inline}
      {/if}

      И сразу после него добавьте код:

      <div class="clearfix"></div>
  • Kf Kidzfashion
    Решение
    30 августа 2017 18:14

    Владимир а как шрифт помянть? Чтобы заголовки не показывались только прописными буквами. А нужно как в предложениях

  • Kf Kidzfashion
    Решение
    31 августа 2017 02:49

    Владимир ,

    у меня ещё вопрос. Как выравнить загoловки ?

    Сейчас так:

    Надо так:


    => И ещё !! Есть ли возможность убрать фамилию автора ??



    • Владимир Сергеев
      Разработчик
      Решение
      31 августа 2017 08:18

      В тот код:

      section.post h2 {
        text-transform: none;
        font-size:100%;
      }

      Добавьте ещё строки:

      height: 50px;
      overflow: hidden;

      50px замените на своё значение, нужно подобрать опытным путём

      section.post h2 {
        text-transform: none;
        font-size:100%;
        height: 50px;
        overflow: hidden;
      }


      Фамилию автора можно убрать только путём редактирования контакта в приложении Контакты.

  • Kf Kidzfashion
    Решение
    31 августа 2017 12:07

    Спасибо большое! Всё получилось :)

  • Гудин Евгений
    1 сентября 2017 09:49

    И от меня спасибо, как раз тоже задавался таким же вопросом)

  • Сергей
    Решение
    28 февраля 2018 00:28

    здравствуйте.

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

    отображение маленького блока с новостями в кратце,

    а не весь блок на всю статтью как у меня получилось :)

    • Владимир Сергеев
      Разработчик
      Решение
      28 февраля 2018 17:59

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

      • Ватный Матрас
        13 октября 2021 18:38

        Спасибо, Владимир! Чего только не перепробовал, пока про эту кнопку не прочитал у Вас!=)

  • Сергей
    Решение
    1 марта 2018 23:39

    Спасибо Большое !

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!