Forum

Thread tagged as: Question, Problem, Configuration

Textile editor - Image width and height attributes

Hi everyone.

I am having an issue with the textile editor and inserting images. I have a CSS class assigned to wrap text around an image in-line, it is a responsive site but the source image height and width in pixels is being applied as attributes which is causing the image to become very skewed and causing havoc on different screen sizes. Is there anyway I can stop these attributes from being inserted automatically? I have tried a few things I thought were logical first steps but can't seem to crack it.

On the content template:

<perch:content id="body" type="textarea" label="Page content" editor="markitup" html="false" textile="true" imageclasses="image fit, image left, image right"/>

E.G If I upload a .jpg with a resolution of 1330x1500 pixels the code generated on page is:

<img alt="Food" class="image right" height="1330" src="/perch/resources/packagea1.jpg" title="Food" width="1500">

Where as I am looking for something to strip the height and width tags:

<img alt="Food" class="image right" src="/perch/resources/packagea1.jpg" title="Food">

Perch Diagnostic:

Perch: 2.8.31, PHP: 5.4.45, MySQL: mysqlnd 5.0.10 - 20111026 - $Id: c85105d7c6f7d70d609bb4c000257868a40840ab $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.31), assets (2.8.31), categories (2.8.31), perch_blog (5.0), perch_forms (1.8.3), perch_gallery (2.8.6)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_gallery', 'perch_forms', 'perch_blog', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/mfhealth/public_html/perch
PERCH_CORE: /home/mfhealth/public_html/perch/core
PERCH_RESFILEPATH: /home/mfhealth/public_html/perch/resources
Image manipulation: GD Imagick
PHP limits: Max upload 32M, Max POST 48M, Memory: 64M, Total max file upload: 32M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
REQUEST_URI: /perch/core/settings/diagnostics/
DOCUMENT_ROOT: /home/mfhealth/public_html
HTTP_HOST: www.mf-health.co.uk

Many thanks
Charles Plumb

Charles Plumb 0 points

  • 5 years ago
Martin Underhill

Martin Underhill 5 points

5 years ago

Try declaring the width and height attributes on the perch:content tag:

<perch:content id="body" type="textarea" label="Page content" editor="markitup" imagewidth="600" imageheight ="400" html="false" textile="true" imageclasses="image fit, image left, image right"/>

Obviously swap the values in the attributes out for whatever you want. Check this page out for all the available attributes: https://docs.grabaperch.com/docs/templates/attributes/type/textarea/
Charles Plumb

Charles Plumb 0 points

5 years ago

Hi Martin,

Thanks for the reply, I was hoping for a way that the height and width attributes could be excluded all together, is this possible?
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Make sure you set the following in your config file:

define('PERCH_RWD', true);
Charles Plumb

Charles Plumb 0 points

5 years ago

Hi Drew,

That fix it, thanks very much. Would you mind explaining what that parameter actually does?

Thanks again.
Rachel Andrew

Rachel Andrew 394 points
Perch Support

5 years ago

There is more information in the documentation here: https://solutions.grabaperch.com/html-and-css/how-do-i-use-responsive-images-in-perch

and also on the markup configuration page https://docs.grabaperch.com/docs/installing-perch/configuration/markup/

"True or false. Presume a Responsive Web Design layout and omit e.g. width and height attributes on images."
Charles Plumb

Charles Plumb 0 points

5 years ago

Many thanks Rachel, did not come across that article - much appreciated!