Как изменить вид миниатюр

[Jager]

Вопрос такой: на одном форуме аккуратные миниатюры по умолчанию, а у меня с дополнительной информацией. Хочу чтоб была просто миниатюра без информации. Как на фото слева.

 

[anechkin]

Тоже интересно! Буду ждать ответа.

 

[Skaiman]

Использование условий может помочь. К примеру, для начала уберем информацию о изображениях и сделаем миниатюры больше не изменяя настроек. Для этого в шаблоне attached_files заменим все на это:

<xen:require css="attached_files.css" />

<div class="attachedFiles">
    <h4 class="attachedFilesHeader">{xen:phrase attached_files}:</h4>
    <ul class="attachmentList SquareThumbs"
        data-thumb-height="{xen:calc 'min(100, {$xenOptions.attachmentThumbnailDimensions} / 2)'}"
        data-thumb-selector="div.thumbnail > a">
        <xen:foreach loop="$post.attachments" value="$attachment">
            <li class="attachment{xen:if {$attachment.thumbnailUrl}, ' image'}" title="{$attachment.filename}">
            <xen:if is="in_array({$attachment.extension}, array('png', 'jpg', 'jpeg', 'jpe', 'gif', 'bmp'))">
                <div class="">
                    <div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl} AND {$canViewAttachments}">
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"
                                data-href="{xen:link misc/lightbox}"><img
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="LbImage" /></a>
                        <xen:elseif is="{$attachment.thumbnailUrl}" />
                            <a href="{xen:link attachments, $attachment}" target="_blank"><img
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" /></a>
                        <xen:else />
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="genericAttachment"></a>
                        </xen:if>
                    </div>
                </div>       
            <xen:else />
                <div class="boxModelFixer primaryContent">
                    
                    <div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl} AND {$canViewAttachments}">
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"
                                data-href="{xen:link misc/lightbox}"><img
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="LbImage" /></a>
                        <xen:elseif is="{$attachment.thumbnailUrl}" />
                            <a href="{xen:link attachments, $attachment}" target="_blank"><img
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" /></a>
                        <xen:else />
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="genericAttachment"></a>
                        </xen:if>
                    </div>
                    
                    <div class="attachmentInfo pairsJustified">
                        <h6 class="filename"><a href="{xen:link attachments, $attachment}" target="_blank">{$attachment.filename}</a></h6>
                        <dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_size, size}</dd></dl>
                        <dl><dt>{xen:phrase views}:</dt> <dd>{xen:number $attachment.view_count}</dd></dl>
                    </div>
                </div>
            </xen:if>   
            </li>
        </xen:foreach>
    </ul>
</div>

<xen:comment><xen:require css="xenforo.css" /></xen:comment>

в EXTRA.css

.attachment.image {
    width: 100px;
    margin: 5px;
}

.attachment.image .thumbnail {
    border-right: none!important;
    width: 100px!important;
    height: 100px!important;
}

.attachment.image .thumbnail .SquareThumb {
    border-right: none;
    width: 100px!important;
    height: 100px!important;
}

.attachment.image img {
    width: 100px!important;
    height: 100px!important;
    left: 0!important;
}

получим

Как видно из кода я отделил условием для изображений миниатюры от информации и немного изменил отображение стиля, я оставил пустым значение <div class="">, для полета вашей фантазии :)

 

[anechkin]

сработало! еще бы их сделать не квадратными как бы ) а чуть вытянутыми .... чтобы как фотография стандартная была) но уменьшенная!

СПАСИБО!

 

[Skaiman]

.attachment.image img {
    width: 100px!important;
    height: auto!important;
    left: 0!important;
}

тогда будет пропорциональное уменьшение

 

[Jager]

После замены кода получилась такая хрень из сдвоенных фоток:

 

[Skaiman]

После замены кода получилась такая хрень из сдвоенных фоток:

значит хрень у тебя уже была :) я смотрел не на одном стиле и человек выше написал

у тебя стили не применились в EXTRA.css что дал