• Какой плагин позволяет вывести посты с таким видом?

    @Forxxx Автор вопроса
    В общем с плагином не получилось, взял код, чуть адаптировал под себя. На качество не претендую, может пригодится кому.

    php

    <?php
        $id = 1;
        $items = new WP_Query("cat=$id&showposts=5"); 
        $noimage150 = '/wp-content/uploads/noimage-150x150.png';
        $noimage750 = '/wp-content/uploads/noimage-750x350.jpg';
    ?>
        <div class="mega-slider-template">
            <div class="mega-slider" data-autoplay="1" data-delay="5">
                <div class="mega-slider__stage">
    <?php
                    $is_first = true;
                    while($items->have_posts()) : $items->the_post();
                        $images = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium');
                        if ($images) $image = $images[0]; else $image = $noimage750;
    ?>
                        <a href="<?php the_permalink() ?>" class="mega-slider__slide <? if ($is_first) echo 'mega-slider__slide--active'?>" style="background-image: url(&quot;<?= $image ?>&quot;); display: <? if ($is_first) echo 'block'; else echo 'none'; ?>; z-index: 0;">
                            <span class="mega-slider__slide__label" style="bottom: 0px;">
                                <span class="mega-slider__slide__date"><? the_date(); ?></span>
                                <span class="mega-slider__slide__title"><? the_title(); ?></span>
                            </span>
                        </a>
    <?php                    
                        $is_first = false;
                    endwhile;
    ?>
                </div>
                <div class="mega-slider__sidebar">
    <?php
                    $is_first = true;
                    while($items->have_posts()) : $items->the_post();
                        $images = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail');
                        if ($images) $image = $images[0]; else $image = $noimage150;
    ?>
                        <div class="mega-slider__row <? if ($is_first) echo 'mega-slider__row--active'?>">
                            <img width="150" height="150" src="<?= $image ?>" class="mega-slider__row__thumbnail wp-post-image" alt="">
                            <span class="mega-slider__row__label">
                                <span class="mega-slider__row__title"><? the_title(); ?></span>
                                <span class="mega-slider__row__date"><? the_date(); ?></span>
                                <a class="mega-slider__row__link" href="<?php the_permalink() ?>">Читать...</a>
                            </span>
                        </div>
    <?php
                        $is_first = false;
                    endwhile;
    ?>
                </div>
            </div>
        </div>


    javascript

    (function($) {
    	$('.mega-slider').each(function() {
    		// Define show and hide label triggers
    		$(this)
    			.find('.mega-slider__slide')
    			.on('showLabel', function(event) {
    				$(this)
    					.find('.mega-slider__slide__label')
    					.css('bottom', '-50px')
    					.animate({
    						bottom: 0
    					}, 400);
    			}).on('hideLabel', function(event) {
    				$(this)
    					.find('.mega-slider__slide__label')
    					.css('bottom', 0)
    					.animate({
    						bottom: '-50px'
    					}, 200);
    			});
    
    		// Define this slide trigger
    		$(this)
    			.find('.mega-slider__row')
    			.on('thisSlide', function(event) {
    				if($(event.target).hasClass('mega-slider__row__link') || $(this).hasClass('mega-slider__row--active')) return;
    				slide = $(this).index();
    				$(this)
    					.addClass('mega-slider__row--active')
    					.siblings()
    					.removeClass('mega-slider__row--active');
    				$(this)
    					.closest('.mega-slider')
    					.find('.mega-slider__slide--active')
    					.trigger('hideLabel')
    					.closest('.mega-slider__slide')
    					.siblings()
    					.andSelf()
    					.eq(slide)
    					.stop(true, true)
    					.css('pointer-events', '')
    					.css('z-index', 0)
    					.css('display', 'block')
    					.addClass('mega-slider__slide--active')
    					.siblings('.mega-slider__slide--active')
    					.css('pointer-events', 'none')
    					.css('z-index', '')
    					.removeClass('mega-slider__slide--active')
    					.fadeOut(400, function() {
    						$(this)
    							.siblings()
    							.andSelf()
    							.eq(slide)
    							.trigger('showLabel');
    					});
    			});
    
    		// Activate click trigger
    		$(this)
    			.find('.mega-slider__row')
    			.on('click', function(event) {
    				$(this).trigger('thisSlide');
    				$(this)
    					.closest('.mega-slider')
    					.trigger('resetInterval');
    			});
    
    		// Define next slide trigger
    		$(this)
    			.on('nextSlide', function(event) {
    				$row = $(this).find('.mega-slider__row--active').next();
    				if ( 0 == $row.length ) {
    					$row = $(this).find('.mega-slider__row');
    				}
    				$row.eq(0).trigger('thisSlide');
    			});
    
    		// Animate first label
    		$(this)
    			.closest('.mega-slider')
    			.find('.mega-slider__slide--active .mega-slider__slide__label')
    			.animate({
    				bottom: 0
    			}, 400);
    
    		// Define start, stop, and reset interval triggers
    		$(this)
    			.on('startInterval', function(event) {
    				if ( '1' == $(this).data('autoplay') ) {
    					var $slider = $(this);
    					$slider.data('interval', setInterval(function () {
    						$slider.trigger('nextSlide');
    					}, parseInt( $slider.data('delay') ) * 1000 ) );
    				}
    			}).on('stopInterval', function(event) {
    				clearInterval( $(this).data('interval') );
    			}).on('resetInterval', function(event) {
    				$(this).trigger('stopInterval').trigger('startInterval');
    			});
    
    		// Activate autoplay trigger
    		$(this).trigger('startInterval');
    
    	});
    })(jQuery);


    CSS

    .mega-slider {
    	overflow: hidden;
    	position: relative;
    	font-size: 14px;
    	line-height: 1.5;
    	margin-bottom: 1.5em;
    }
     
    .mega-slider__stage {
    	width: 100%;
    	height: 360px;
    	position: relative;
    	background: #000;
    }
    
    .mega-slider__slide {
    	display: block;
    	background-position: center center;
    	background-repeat: no-repeat;
    	background-size: cover;
    	z-index: 1;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    }
    
    .mega-slider__slide__label {
    	display: block;
    	color: #fff;
    	background: #000;
    	background: rgba(0, 0, 0, 0.6);
    	margin: 0;
    	padding: 10px 15px;
    	position: absolute;
    	bottom: -50px;
    	width: 100%;
    	box-sizing: border-box;
    }
    
    .mega-slider__slide__title {
    	font-size: 20px;
    }
    
    .mega-slider__slide__date {
    	float: right;
    	margin-left: 10px;
    	line-height: 30px;
    	opacity: 0.6;
    }
    
    .mega-slider__sidebar {
    	position: relative;
    	z-index: 1;
    }
    
    .mega-slider__row {
    	padding: 10px;
    	clear: both;
    	overflow: hidden;
    	background: #f5f5f5;
    	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    	cursor: pointer;
    	box-sizing: border-box;
    }
    
    .mega-slider__row:hover {
    	background: #fff;
    }
    
    .mega-slider__row--active,
    .mega-slider__row--active:hover {
    	background: #0073aa;
    	color: #fff;
    	cursor: default;
    }
    
    .mega-slider__row__thumbnail {
    	display: block;
    	width: 50px;
    	height: auto;
    	max-width: 100%;
    	float: left;
    	margin-right: 10px;
    }
    
    .mega-slider__row__label {
    	display: block;
    	overflow: hidden;
    }
    
    .mega-slider__row__title {
    	display: block;
    	margin: 4px 0;
    	font-weight: 500;
    	font-size: 15px;
    	line-height: 20px;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }
    
    span.mega-slider__row__date {
        font-size: 13px;
    }
    
    .mega-slider__row__link {
    	color: inherit;
    	text-decoration: none;
    	float: right;
    	margin-left: 10px;
    	font-size: 13px;
    }
    
    .mega-slider__row__link:hover {
    	color: inherit;
    	text-decoration: underline;
    }
    
    .mega-slider__row__link:focus {
    	outline: none;
    	border: none;
    	box-shadow: none;
    }
    
    @media screen and (min-width: 783px) {
    	.mega-slider__stage {
    		width: 66%;
    		height: 100%;
    		float: left;
    		position: absolute;
    	}
    	.mega-slider__sidebar {
    		width: 34%;
    		float: right;
    	}
    }

    Ответ написан
    Комментировать
  • С чего лучше начать перенос магазина на OcStore?

    @Forxxx
    имхо
    Сначала полностью настроить функционал. Может так оказаться, что будет проще взять готовый шаблон и не париться с переносом верстки
    Ответ написан
  • Цикл по элементам?

    @Forxxx
    Я бы посоветовал разобраться с is и as, и как выше сказали, использовать tag

    for i := 0 to Form1.ComponentCount - 1 do
        if (Form1.Components[i] is TButton) then
          if (Form1.Components[i] as TButton).Tag in [1,2,3] then
            (Form1.Components[i] as TButton).Enabled := false;
    Ответ написан
    Комментировать