Our little Content module is an essential in any CMS. It’s a simple, fool-proof way to publish static pages such as “about us”, “copyright information” or stuff like that. You put a title, you have a big box for text and you’re done.
Now imagine you want to spice some of your pages with an image. You can add them to the text, using the included image manager. You insert the image, place it where you want, resize them when needed. Repeat for every page.
Now imagine you want to add images to several pages, and you want them to have the same style: same border, same size, same position... this sounds like a task that could be automated. You just have a field to upload your image, and the system places it at the appropiate place, at the right size.
Sounds good.
Let’s go for it.
Open the file that defines the "content" class: /modules/content/class/content.php
Go around line 50, you’ll see lots of “quickInitVar” lines, one after another. Add the following, after the last “quickInitVar":
$this->quickInitVar('content_image', XOBJ_DTYPE_IMAGE,
false, 'Page image', 'An image to be included in this page');This is telling the module “every content element has an image”.
Now, move around line 90, you’ll see lots of “setControl”. Add your own “setControl" for our image right there:
$this->setControl('content_image', 'image');You’re telling the module “you should show us an image field in the admin form”.
Now, go around line 460, look for this:
public function __construct(& $db)
Inside this function, you’ll find this line:
icms_loadLanguageFile('content', 'common');Just before this line, you’ll insert this code:
$mimetypes = array('image/jpeg', 'image/png', 'image/gif');
$this->enableUpload($mimetypes, 10240000, 5000, 5000);This code means: “you’ll accept uploaded images provided they fulfill some conditions: smaller than 10 Mbytes, less than 5000 pixels wide and 5000 pixels high. You’ll only accept JPG, GIF or PNG images”.
And that’s it. Your module will accept images as soon as you update it. The "update module" action is on top left of the module's admin page.
Your images won’t appear in your website until you add the image tag somewhere in the template. ImpressCMS has created a new Smarty variable you can use:
$content_content.content_image
You should now edit your template “content_single_content.html” and add some HTML and Smarty where you want the image to appear. Something like this:
<img src="<{$icms_url}>/uploads/content/content/<{$image_path}>" />And that’s it. You did it.
Haven't we finished yet? Well, we're finished, but what about an extra quality detail?
The image appears where you want, at its original size. Wouldn’t it be cool if the image automatically resized itself to an specified size? For example, resize it to 250 pixels wide, and automatically calculate height and add the CSS class “content-image”.
Replace the HTML you just inserted in your template by this:
<{assign var="image_path" value=$content_content.content_image}>
<{resized_image width=250 height=5000
file="$icms_url/uploads/content/content/$image_path"
class="content-image" }>You’re done. ImpressCMS will resize the image for you.
Note: Height = 5000? Yes, this is a workaround for the resizer plugin. It happens that you must specify width and height, even when one of them is not needed. Specifying such a high number guarantees the image will be fit to the smallest dimension, that is, width, which has a much more reasonable value of 250 pixels.
Sure! Just visit this website:
http://www.qlabgroup.com/modules/content/content.php?page=members
Then click on any member’s name and you’ll see this little modification in action. Enjoy!
