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

eZ debug

Timing: Jan 30 2025 21:43:11
Script start
Timing: Jan 30 2025 21:43:11
Module start 'content'
Timing: Jan 30 2025 21:43:11
Module end 'content'
Timing: Jan 30 2025 21:43:11
Script end

Main resources:

Total runtime0.3810 sec
Peak memory usage8,192.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0092 588.0469370.2891
Module start 'content' 0.00920.0146 958.33591,033.6719
Module end 'content' 0.02370.3571 1,992.00783,921.7422
Script end 0.3809  5,913.7500 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00501.3038200.0002
Check MTime0.00140.3599200.0001
Mysql Total
Database connection0.00070.177210.0007
Mysqli_queries0.277372.80131410.0020
Looping result0.00160.42131390.0000
Template Total0.356793.610.3567
Template load0.00080.213910.0008
Template processing0.355993.417310.3559
Override
Cache load0.00060.145910.0006
Sytem overhead
Fetch class attribute can translate value0.00220.577710.0022
XML
Image XML parsing0.00030.066410.0003
General
dbfile0.01213.1690200.0006
String conversion0.00000.001330.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs