Forums / Setup & design / image in toolbar and article, size (width,height) problem

image in toolbar and article, size (width,height) problem

Author Message

Marcin N.

Monday 18 December 2006 3:03:11 am

Hi!

On my site user can add pictures for articles. I want to make size (width, height) restrictions for articles and toolbar. I mean when user add some large picture you allways see in tollbar max width 150, max height: 80 and in article: max width: 300, max height: 100.

<b>Simple version of this problem</b>
I want In Article you will see image in size choosen by User but in Toolbar you will see image in restriction size.

How is the best solution to set it? Template, CSS, INI ??
Thanks for any tips!

Marcin

Jon Staines

Monday 18 December 2006 5:25:09 am

How is the image added? Is it an object link from within the body of the article or does it have a separate image attribute?

If it is an image attribute then you can change the value in the listitem/article.tpl and full/article.tpl templates.

The listitem/article.tpl entry is already small.

The full/article.tpl will have a section like:

<div class="attribute-image">
  {attribute_view_gui attribute=$node.data_map.image align=right}
</div>

Change it to:

<div class="attribute-image">
  {attribute_view_gui attribute=$node.data_map.image.content.data_map.image align=right image_class=original}
</div>

If the images are object links then I don't know of a neat way of changing the size in one place but not the other.

Marcin N.

Monday 18 December 2006 6:21:37 am

OK! It's clear!
But how to change it in my right toolbar. I mean which code I have to modify?
Now I have this in pagelayout.tpl:

{tool_bar name=right view=full}

Marcin

Jon Staines

Monday 18 December 2006 6:43:04 am

Turn on the inline debugging to see which template shows each part. I think the article is displayed with the listitem/article.tpl template which is already in your design/<siteaccess>/overrides/template/ folder. This will have a line like:

{attribute_view_gui alignment=right image_class=small attribute=$node.data_map.image.content.data_map.image}

So its using whatever the dimensions of the site's small image type are. You can either change the small to another type, change the size of the site's small resizing, or make a new size type.

Marcin N.

Monday 18 December 2006 11:05:05 am

OK! It works!

But how to set image_class for code which I found in folder template:

{section var=child loop=$list_items sequence=array(bglight,bgdark)}
      {node_view_gui view=line content_node=$child}
{/section}

Marcin

Jon Staines

Tuesday 19 December 2006 3:55:46 am

That section of code just loops through the children and displays them using a separate template depending on where you are. Turn on inline debugging and you'll see what it does. If you had a folder with lots of articles in it, then that section would repeatedly call the override/template/line/article.tpl file to display a small part (the intro, image and title by default) of the article.

Marcin N.

Tuesday 19 December 2006 10:56:31 am

OK! I found all templates which I need :)
I found the main image template (embed/image.tpl) and there is code:

<div class="attribute-image">
<p> 
{section show=is_set($link_parameters.href)}
    {attribute_view_gui attribute=$object.data_map.image image_class=$object_parameters.size href=$link_parameters.href|ezurl target=$link_parameters.target link_class=$link_parameters.classification link_id=$link_parameters.id}
{section-else}
    {attribute_view_gui attribute=$object.data_map.image image_class=$object_parameters.size}
{/section}
</p>
</div>

..and I think here is problem, because I set <b>image_class</b> in my article.tpl and my image.tpl override my own <b>image_class</b>. It means that when my User Editor set <b>small</b> then my image.tpl allways use <b>image_class=small</b> and doesn't matter what I put in article.tpl

Do you have idea how to set it?

I mean that doesn't matter what User sets it always should be <b>image_size=large</b>
Of course I can put <b>image_size=large</b> in image.tpl but it's not solution because each image on my site (folder, toolbar everywhere) will be large. I want <b>large</b> for article and <b>small</b> for toolbar (just example)

Marcin

Marcin N.

Tuesday 19 December 2006 11:32:25 am

<b>My problem, other view:</b> User add new article and upload image into it using online editor, then choose some size for the image. Doesn't matter what size user choose because article template (article.tpl) resize down the image to (for example) 300x400px and toolbar template (listitem_article.tpl - show beginning of the article) resize down to 200x150px. It's the same picture.

Marcin

Jon Staines

Wednesday 20 December 2006 1:48:55 am

If you are adding images as objects either by hand or through the online editor, then you can ignore my previous posts which deal with the image attribute type. Objects will use the same size in both locations just as you have found.

While you might be able to edit the embed/image.tpl template to figure out where an image is being called from (article/toollist), it is not something I have done so you will need to test it out yourself. Sorry.

Marcin N.

Wednesday 20 December 2006 3:42:08 am

Jon, thanks again for help and tips!

<i>While you might be able to edit the embed/image.tpl template to figure out where an image is being called from (article/toollist), it is not something I have done so you will need to test it out yourself. Sorry.</i>

OK. I was afraid that't the only way.
Could you tell me which function/attribut I have to use to get info where my image is being called from (article, toollist)???
I'm reading docs but there is nothing about it :(

Marcin

Jon Staines

Wednesday 20 December 2006 8:18:42 am

No idea, sorry. I reckon your best bet is to have an image attribute in the class so that you can control the size better.