Для любителей поломать голову. Как все таки уменьшить изображения?

#1 2 июля 2012 в 03:15

Работаю с модулем «Последние материалы (мод с сортировкой)» при его выводе возможен вывод случайных статей с ротацией, работает модуль замечательно, только столкнулся с одной проблемой — как заставить изображение в статье уменьшиться.
Статьи у меня выходят из папки /images/photos/small/{$article.image} т.е. их загружают достаточно большими, задача состоит в том чтоб уменьшить их например до 100px

Иллюстрация

Испробовал все стандартные варианты с тем, чтоб прописать для изображения определенный размер

<img src="/images/photos/small/{$article.image}" border="0" width="100" height="100" alt="{$article.title}"/>

<img src="/images/photos/small/{$article.image}" border="0" width="10%" height="10%" alt="{$article.title}"/>

<div style="width:50px; max-width:100px; max-height:100px;"><img src="/images/photos/small/{$article.image}" alt="{$article.title}" width="100%" height="100%" /></div>

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

Приведу на всякий полный фаил модуля mod_latestcontent.tpl

 
{$is_con}
{if $is_con}
{if $cfg.is_pag}<script type="text/javascript" src="/modules/mod_latestcontent/js/latest.js" ></script>{/if}
{if !$is_ajax}<div id="module_ajax_{$module_id}">{/if}
 
{foreach key=aid item=article from=$articles}
	<div class="mod_latest_entry">
        {if $article.image}
            <div class="mod_latest_image">
                <img src="/images/photos/small/{$article.image}" border="0" width="35" height="35" alt="{$article.title}"/>
            </div>
        {/if}
	    <a class="mod_latest_title" href="{$article.href}">{$article.title}</a>
		{if $cfg.showdate}
            <div class="mod_latest_date">
                {$article.date} - <a href="{$article.authorhref}">{$article.author}</a>{if $cfg.showcom} - <a href="{$article.href}" title="{$article.comments|spellcount:$LANG.COMMENT1:$LANG.COMMENT2:$LANG.COMMENT10}" class="mod_latest_comments">{$article.comments}</a> - <span class="mod_latest_hits">{$article.hits}</span>{/if}
            </div>
        {/if}
 
        {if $cfg.showdesc}
            <div class="mod_latest_desc" style="overflow:hidden">                
                {$article.description}
            </div>
        {/if}
 
        {if $cfg.showcom}
        {/if}
	</div>
{/foreach}
{if $cfg.showrss}
	<div class="mod_latest_rss">
		<a href="/rss/content/{$rssid}/feed.rss">{$LANG.LATEST_RSS}</a>
	</div>
{/if}
{if $pagebar}
    <div class="mod_latest_pagebar">{$pagebar}</div>
{/if}
{if !$is_ajax}</div>{/if}
{else}
    <p>{$LANG.LATEST_NOT_MATERIAL}</p>
{/if}

#2 2 июля 2012 в 17:24

Выложил модуль тут
slavyanskaya-kultura.ru/test.html

#3 2 июля 2012 в 17:49

попробуйте

<img src="/images/photos/small/{$article.image}" border="0" width="100px" height="100px" alt="{$article.title}"/>

Книга мастера, делаем своими руками.

Сегодня в 12:57

#4 2 июля 2012 в 18:12

у меня получилось как то так imm.io/uNc0

достаточно картинке прописать только размер width="100%"

Осуществляю все виды работ по разработке сайтов и веб приложении. Компоненты любой сложности и конфигурации. Телеграмм @instantcms_dev

#5 2 июля 2012 в 18:53

а что есть 100 — это 100px или 100%? я всегда указываю явное значение в px или задаю стилями.
в вашем случае лучше задать только ширину или высоту

Дизайн и разработка веб сайтов и мобильных приложений

#6 2 июля 2012 в 23:12

Заглянините, для разнообразия, в настройки компонента "Каталог статей".
Глядишь и знакомство с CSS не пригодится…

Украинский для инстант

#7 2 июля 2012 в 23:32

maxisoft, width="100%" пробовал это стандартное решение которым воспользовался первым делом, оно не помогает, в данном случае если вставлять через firebug то конечно да, но в самом фаиле при добавлении

 <img src="/images/photos/small/{$article.image}" width="100%" alt="{$article.title}"/>

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

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

Олег Васильевич я, настройки компонента "Каталог статей" тут непричем, как уже говорил на сайте загрузка главной картинки новости идет через редактор а не через загрузку фаила.

В этом все и дело что среднего и маленького изображения нет, т.к. на портале люди закачивают напрямую через редактор а не через вставить мал.изображение.
Пример
Иллюстрация

Тут в этом вся и проблема что надо принудительно как то заставить изображение уменьшаться.

Олег, тоже самое предложил maxisoft я это пробовал и в пикселях и в процентах и в стилях

#8 2 июля 2012 в 23:57

Олег Васильевич я, настройки компонента "Каталог статей" тут непричем, как уже говорил на сайте загрузка главной картинки новости идет через редактор а не через загрузку фаила.
В этом все и дело что среднего и маленького изображения нет, т.к. на портале люди закачивают напрямую через редактор а не через вставить мал.изображение.
Пример

Тут в этом вся и проблема что надо принудительно как то заставить изображение уменьшаться.

arianfinist

Только теперь понял, что изображение из краткого содежания.
С удовольствием поиграюсь…

Украинский для инстант

#9 2 июля 2012 в 23:57

'\editor\filemanager\connectors\php commands.php'

найти

move_uploaded_file( $oFile['tmp_name'], $sFilePath ) ;

заменить

Спойлер

if($sExtension == 'jpg' || $sExtension == 'jpeg' || $sExtension == 'gif' )
{
$uploadedfile = $_FILES['NewFile']['tmp_name'];

// Create an Image from it so we can do the resize
if($sExtension == "jpg" || $sExtension == "jpeg"){
$src = imagecreatefromjpeg($uploadedfile);
}elseif($sExtension == "gif"){
$src = imagecreatefromgif($uploadedfile);
}

// Capture the original size of the uploaded image
list($width,$height)=getimagesize($uploadedfile);

// For my purposes, I have resized the image to be
// 300 pixels wide, and maintain the original aspect
// ratio. This prevents the image from being "stretched"
// or "squashed". If you prefer some max width other than
// 300, simply change the $newwidth variable
$newwidth=300;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

// this line actually does the image resizing, copying from the original
// image into the $tmp image
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);

// now write the resized image to disk. I have assumed that you want the
// resized, uploaded image file to reside in the ./images subdirectory.
$filename = $_FILES['NewFile']['tmp_name'];
if($sExtension == "jpg" || $sExtension == "jpeg"){
imagejpeg($tmp,$filename,100);
}elseif($sExtension == "gif"){
imagegif($tmp,$filename,100);
}
move_uploaded_file( $filename, $sFilePath );
imagedestroy($src);
imagedestroy($tmp);
}
else
{
move_uploaded_file( $oFile['tmp_name'], $sFilePath );
}

#10 2 июля 2012 в 23:59

если я правильно понял

#11 3 июля 2012 в 00:11

Благодарю всех но решение нашел AtlantisWeb за что ему огромная благодарность.
Все окозалось намного проще
в библиотеку стилей добовляем

.mod_latest_entry .mod_latest_desc img {  width:80px !important;  height: auto !important;  }

если нужно чтобы фото были квадратные
height: auto
меняем на
height: 100px
но фото будет искажено

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

Сейчас еще на всякий случай опробую и интереснейший вариант krz

#12 3 июля 2012 в 00:16

Сейчас еще на всякий случай опробую и интереснейший вариант krz

arianfinist

этот метод подходит для загрузки фото в самом редакторе для статей для fckeditor

Как удалить город из списка в

cms-body на внутренних

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Для любителей поломать голову. Как все таки уменьшить изображения?

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Как поднять версию PHP и не поломать сайт?

Как подкрутить звездную оценку?

Как уменьшить кол-во новостей на главной?

Помогите разобраться с размером изображения в списке

Тип контента, комментарии, изображения

OWL-слайдер набора изображений отображение

InstantCMS Team

О проекте

Поддержка

Дополнения