2014-01-02 3 views
2

в моей миссии использовать ckEditor в качестве редактора BBCode. Я столкнулся с проблемой непосредственно для моего сайта.проверка размера изображения при преобразовании текста BBCode

У меня есть пользовательский контент, который может содержать теги [img].

Я действительно хочу, чтобы изображения имели ширину 100%, что хорошо. Я конвертирую любые теги [img] в html и применяю класс, который в стиле, как я хочу.

function basicbbcode($text) { 
$text = str_replace("[IMG]", "<img class='buildimage' src='", "$text"); 
$text = str_replace("[/IMG]", "'>", "$text"); 
$text = str_replace("[img]", "<img class='buildimage' src='", "$text"); 
$text = str_replace("[/img]", "'>", "$text"); 
} 

Проблема заключается в том, что кто-то использует изображение с низким/низким разрешением. Я не хочу растягивать этот образ, потому что он выглядит ужасно.

Моя цель состояла в том, чтобы найти порог, поэтому, если изображение имеет ширину более 800 пикселей, придайте ему класс buildimage. Если его меньше, придайте ему класс buildimage-small.

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

Итак, есть ли способ проверить размер изображения, когда он находится вне базы данных в виде текстовой переменной $, и затем действовать соответствующим образом. В идеале с php, но, может быть, jquery?

Понятия не имею.

+0

ли это в Javascript (Jquery). Скручивание процесса PHP для выполнения чего-то, что может сделать клиент, не является необходимым. –

+0

Я думал о javascript пути. Возможно, проверьте все элементы с идентификатором div buildimage и определите размер, а затем назначьте другой класс в зависимости? – Lovelock

ответ

2

Вы можете использовать getimagesize():

Функция getimagesize() будет определять размер любого заданного изображения файла и возвращает размеры вместе с типом файла и/ширина текстовой строки в высоты, чтобы использовать внутри обычного HTML-тега IMG и соответствует типу содержимого HTTP-корреспондента.

<?php 
    list($width, $height, $type, $attr) = getimagesize("img/flag.jpg"); 
?> 

Источник: http://us3.php.net/getimagesize

+0

, который выглядит как отличная функция благодаря! Будет ли это работать при конвертации? или мне нужно будет сделать какую-то предварительную работу. Потому что я не делаю foreach или что-то, что я не могу (в моей голове) проверять каждый, а затем действовать соответственно. – Lovelock

0

Чтобы сделать это в JQuery это может быть так просто, как:

var box = $("#boxWithImageInside"), 
    img = box.find("img.buildimage"); 
if (img.width() > box.width()) { 
    img.width("100%"); 
    img.height("auto"); 
} 

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

+0

будет ли это делать для каждого изображения на странице с классом изображения buildimage? – Lovelock

+0

Попробуйте, прежде чем спрашивать. –

0

Если вы хотите, чтобы решить вашу проблему на стороне клиента, может быть, это помогает: FIDDLE

$(function() { 
    isImgLargerThan800px = function (src) { 

     var img = new Image(); 

     img.onload = function() { 
      if (this.width < 800) { 
       alert('this image need SMALL class') 
      } else { 
       alert('this image need LARGE class') 
      } 
     }; 

     img.src = src; 
    }; 

//TEST 
    $('a').on('click', function() { 

     isImgLargerThan800px($(this).text()); 
     alert('Now checking for image size of URL : ' + $(this).text()) 

    }) 

}); 
Смежные вопросы