Forums / Setup & design / different images size on a single page

different images size on a single page

Author Message

Fabrice Girardot

Thursday 21 October 2004 2:00:30 am

Hi all,

I want to display on the same page three kind of image size; on this page I want to have a "big" article with a "big" photo, 2 "normal" articles with "small" pictures and then a list of articles' title with thumbnails.

any ideas to suggest me the best way to perform that ?

Thanks for your help.

--
Fabrice

Łukasz Serwatka

Thursday 21 October 2004 2:54:04 pm

Hi,

Use image_calss to change images size

{attribute_view_gui attribute=$node.object.data_map.image image_class=small} - small size
{attribute_view_gui attribute=$node.object.data_map.image image_class=medium} - medium size 
{attribute_view_gui attribute=$node.object.data_map.image image_class=oryginal} - oryginal size

And other parameters
image_class - Which image alias to show, default is large
css_class - Optional css class to wrap around the <img> tag, the
class will be placed in a <div> tag.
alignment - How to align the image, use 'left', 'right' or false().
link_to_image - boolean, if true the url_alias will be fetched and
used as link.
href - Optional string, if set it will create a <a> tag
around the image with href as the link.
border_size - Size of border around image, default is 0

Settings are in image.ini there you can define your images sizes

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 1:38:58 am

Thank you Luke,

I tried this before, but in my case, it seems to have no effect at all.
That code gives me 2 images at the size, aligned left...:

 
        {section show=$object.data_map.image.content}
            <div class="attribute-image">
                {attribute_view_gui attribute=$object.data_map.image
                                              align=right
                                              image_class=small}
            </div>
        {/section}
       {section show=$object.data_map.image.content}
            <div class="attribute-image">
                {attribute_view_gui attribute=$object.data_map.image 
                                    alignment=right
                                    image_class=medium}
            </div>
        {/section}

the image alignment have no effect too...
I am disappointing, I probably do something wrong... but what !?

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 1:54:41 am

Hi Fabrice,

Try use this xhtml code to view your image

<img src="{$node.object.data_map.image.content['original'].url|ezroot}" 
width="{$node.object.data_map.image.content['original'].width}" 
height="{$node.object.data_map.image.content['original'].height}" border="" 
alt="{$node.object.data_map.image.content['original'].text|wash(xhtml)}" 
title="{$node.object.data_map.image.content['original'].text|wash(xhtml)}" />

$node.object.data_map.image.content['original'] - original
$node.object.data_map.image.content['small'] - small
$node.object.data_map.image.content['medium'] - medium size

Just add css style or align to left, right, etc

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 2:34:50 am

hi Luke,

it returns empty code :(

<img src="" 
width="" 
height="" border="" 
alt="" 
title="" />

I think I probably forget something when I'm calling my 2 templates "big_line.tpl" and "line.tpl".

That is I do :

[...]
{let news_articles=fetch('content', 'node', hash( 'node_id', 108 ))
     relation_list=$news_articles.object.data_map.top_stories.content.relation_list
     top_story_id=array()
}
    {section loop=$relation_list max=$news_articles.object.data_map.num_articles.content}{* num_articles is usually set to 3*}
        {let related_object=fetch(content,object,hash(object_id,$:item.contentobject_id,
                                                      object_version,$:item.contentobject_version))}
            {section show=$:index|eq(0)}
                {* big_line*}
                {content_view_gui view=big_line content_object=$related_object}
            {section-else}
                 {* line*}
               {content_view_gui view=line content_object=$related_object}
            {/section}
        {set top_story_id=$top_story_id|append($related_object.id)}
        {/let}
    {/section}
[...]

I have not ideas about...

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 2:51:54 am

You ve right

This should work (i hope)

<img src="{$object.data_map.image.content['original'].url|ezroot}" 
width="{$object.data_map.image.content['original'].width}" 
height="{$object.data_map.image.content['original'].height}" border="" 
alt="{$object.data_map.image.content['original'].text|wash(xhtml)}" 
title="{$object.data_map.image.content['original'].text|wash(xhtml)}" />

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 3:13:33 am

Sorry Luke,

I would tell you that I had already test without "node". => Empty tags too :(

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 3:21:09 am

You can assign the css class to your imp tag

{section show=$object.data_map.image.content}

                {attribute_view_gui attribute=$object.data_map.image image_class=small css_class=align_right}

        {/section}

CSS

.align_right {
text-align: right
}

You have got en syntax error in align

{section show=$object.data_map.image.content}

                {attribute_view_gui attribute=$object.data_map.image image_class=small align=right}

        {/section}

should be 'alignment'

{section show=$object.data_map.image.content}

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

        {/section}

Try this

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 4:57:45 am

well... :(

this is the xhtml code resulting (always the same) :

<div class="attribute-image">
    <p class="box">
        <a href="/thepath/media/images/lorem_image1">
            <img src="/thepath/var/ywca/storage/images-versioned/932/1-eng-US/lorem_image11_small.jpg" 
            width="100" height="75"  border="0" alt="Lorem ipsum dolor sit amet alt txt"
            title="Lorem ipsum dolor sit amet alt txt" />
            <br/>
           Lorem image1
        </a>
     </p>
</div>

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 5:08:54 am

What is the result of this code?

{section show=$object.data_map.image.content}
                {$object.data_map.image.content['small'].url}
        {/section}

also try
{$object.data_map.image|attribute(show)}

to view all attributes

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 5:22:30 am

{$object.data_map.image.content['small'].text}

it returns nothing :(

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 5:27:38 am

So paste result of this

{$object.data_map.image|attribute(show)}

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 5:35:02 am

edit done, sorry !

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 5:46:51 am

could edit your post? :-) It`s hard to read.

Check this {$object.data_map.file.content|attribute(show)} for your attributes

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 6:16:30 am

sorry!!!, I'd thought it will be displayed as a table...

http://www.worldywca.info/output.html

and now, I can not edit my post !

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 6:31:06 am

Is possible get access to your page? This topic can be so long.

P.S Try edit your post again

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Fabrice Girardot

Friday 22 October 2004 6:53:09 am

the site is still in local access... I'm still waiting for a new server coming up in couple days

--
Fabrice

Łukasz Serwatka

Friday 22 October 2004 6:59:17 am

So write me eamail when you will be on-line. I try to help you.

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

Kåre Køhler Høvik

Monday 25 October 2004 4:40:48 am

Hi Fabrice

Guess you're using the object_relation for the image. That means the image attribute is available using :
$object.data_map.image.content.data_map.image

The reason for this is that <i>$object</i> contains the related object <i>Image</i>. The <i>Image</i> object is available using <i>$object.data_map.image.content</i>.

To get the <i>image</i> attribute from the Image object we need to add : <i>$object.data_map.image.content.data_map.image</i>

{section show=$object.data_map.image.content.image.content}
    {attribute_view_gui attribute=$object.data_map.image.content.data_map.image}
{/section}

If you want a simpler sollution I suggest you change the object_relation class attribute to an image attribute.

Kåre Høvik

Fabrice Girardot

Wednesday 27 October 2004 1:02:20 am

Thank you Kåre

It works fine :)

--
Fabrice