Has anyone used multiple images in articles?

Friday 30 April 2004 3:22:55 am

I'd like to use multiple images in news articles, as some of the articles I'll be using on a specific site are rather long. I suppose I would need to support up to 4 images or so in each article.

I can create a suitable class, but I'm not too clear how to go about templating for it; or will I have to modify the eZ engine? Any suggestions welcome!

Conor Murray

Language is a virus - William S Burroughs

Friday 30 April 2004 3:56:39 am

Ideally I'd like to insert images right-aligned with the top of each 3rd or 4th paragraph in the main text of the article. I've looked through the stock eZ templates for something like this, but I couldn't find anything.

A layout similar to what I'm trying to achieve can be seen on: http://news.bbc.co.uk/2/hi/business/3672389.stm (not an eZ Publish site) - this example has just 2 pictures.

I supppose there are two ways this could be achieved:
1 - count the paragraphs outputted and use a modulus function to insert images (if available) in the correct locations.
or a more powerful solution:
2 - use some sort of tag embedded in the text to indicate where pictures should be inserted. I suspect this approach would be trickier to accomplish than 1.

Conor Murray.

Language is a virus - William S Burroughs

Friday 30 April 2004 7:23:09 am

I could probably override ezxmltext.tpl (a one-line template) with something a bit more complex that actually examines the data stream. I'm not sure how easy this will be, but that's what I'm looking at presently. It seems to be the most obvious place to attempt it!

As regards the admin approach, while adding related items is easy, I can't see how I can pull them into the text area. Am I missing something here?

Another aspect to the admin approach that is worrying is that it could raise the editorial complexity considerably - so I think I'll stick with the template-oriented approach for now.

Thanks for the help... I'll let the forum know how I get on if I can get it to work!

Conor Murray.

Language is a virus - William S Burroughs

Tuesday 04 May 2004 5:29:05 am

OOOpppsss ... I thought this would work. On my live site it created a link instead of the actual image. You may be able to take an idea from here that will get you closer. Or you might need to create a custom tag. Click here for the details

http://ez.no/ez_publish/documentation/customization/components/datatypes/ezxmltext/custom_tags

Yes it is already built into eZ Publish. I am not sure which version it was added, either 3.2 or 3.3.

Do you have a "Media" tab in your administration interface? Click on it and upload your image. If you do not have a "Media" tab in the Admin then you will need to upgrade to a more recent version of eZ Publish.

Once you have added the image to "Media" tab, click on it and take note of the "Object ID". You need the Object Id NOT the Node ID.

In your article you can insert this code directly into an XML text field - <object id="591" />

You may need to do some additional work to control the placement of the image.

You can also navigate to this image from the edit view of the article. When you are in the edit view of an article on the right hand side of the page you will notice "Related Objects". In that box you will see a magnifying glass. Click on it. This will take you to a page that looks like a modified version of your "Content" tab. The difference is that you can select objects that you want to add to your XML text fields. Now from this modified page you CAN NOT use the tabs at the top to navigate. Instead you will see a box on the right hand side titled: "Top Levels&#8221; and below the title: &#8220;Switch top levels by clicking one of these items." You have to click these links to navigate instead of the tabs at the top of the page. If you click the tab at the top you will lose the ability to select an object. Navigate to the object you would like to add to your article and select it.

Once you have clicked the "Select" button you will return to the Edit Article View. In the related objects box you will notice the image you selected and an html tag similar to: <object id="591" />. Paste this tag into your article and your image now appears in your article.

Wednesday 05 May 2004 2:35:18 am

Use related objects, as suggested above. However, since related <object> tags ar displayed as links, you have to override the content/view/embed.tpl template for image clas (5 by default):

-=-= settings/siteaccess/xxx/override.ini.append
### Embeded Images: embed_image.tpl displays the image itself, not the link
[embed_image]
Source=content/view/embed.tpl
MatchFile=embed_image.tpl
Subdir=templates
Match[class]=5
-=-=

Play with embed_image.tpl (use the original embed.tpl as a starting point) and make it suitable for your needs: use attribute_parameters array to pass parameters: alaignment, size, href, captions... anything related to proper image display and embeding into XML text field.

Usage: <object id="<your image OBJECT ID>" param1="blabla" param2="blabla" />

At the time I write this it comes to my mind that, for backward comapatibility, there could be a parameter for whether the image is to be displayed or just the link to the object... Just another idea... Perhaps, by default, it must be set to "linkonly" (current eZ behavior)

-=-=-= this is my embed_image.tpl, uses the eZ core.css classes
{let image_variation="false"
align="center"
clearallbefore=false()
clearallafter=false()
href=""}

{*
New params:
clearallbefore, clearallafter: insert <br clear=all> before/after the image

New "align" type: pure : do not put the image in div, do not align, just display it
*}


{section show=is_set($attribute_parameters.size)}
{set image_variation=$object.data_map.image.content[$attribute_parameters.size]}
{section-else}
{set image_variation=$object.data_map.image.content["medium"]}
{/section}

{section show=is_set($attribute_parameters.align)}
{set align=$attribute_parameters.align}
{section-else}
{set align="center"}
{/section}

{section show=is_set($attribute_parameters.href)}
{set href=$attribute_parameters.href}
{section-else}
{set href=""}
{/section}


{section show=$attribute_parameters.clearallbefore}<br clear=all>{/section}


{switch match=$align}
{case match="left"}
<div class="imageleft">
{section show=$href}<a href={$href|ezurl}>{/section}
<img src={$image_variation.full_path|ezroot} />
{section show=$href}</a>{/section}
<div style="width: {$image_variation.width}px;">
{$object.data_map.caption.content.output.output_text}
</div>
</div>
{/case}
{case match="right"}
<div class="imageright">
{section show=$href}<a href={$href|ezurl}>{/section}
<img src={$image_variation.full_path|ezroot} />
{section show=$href}</a>{/section}
<div style="width: {$image_variation.width}px;">
{$object.data_map.caption.content.output.output_text}
</div>
</div>
{/case}
{case match="pure"}
{section show=$href}<a href={$href|ezurl}>{/section}
<img src={$image_variation.full_path|ezroot} />
{section show=$href}</a>{/section}
{/case}
{case}
<div class="imagecenter">

{section show=$href}<a href={$href|ezurl}>{/section}
<img src={$image_variation.full_path|ezroot} />
{section show=$href}</a>{/section}
<div style="width: {$image_variation.width}px;">
{$object.data_map.caption.content.output.output_text}
</div>
</div>
{/case}
{/switch}

{section show=$attribute_parameters.clearallafter}<br clear=all>{/section}

{/let}

Thursday 01 July 2004 6:20:46 pm

Hmm...in order to solve the fact that the caption text style is the same as the rest of the article text, couldn't you take the code that does this

<div style="width: {$image_variation.width}px;">
{$object.data_map.caption.content.output.output_text}
</div>

and add in a class'ed div for the caption

<div style="width: {$image_variation.width}px;">
<div class=captiontext>
{$object.data_map.caption.content.output.output_text}
</div>
</div>

and then define your caption text style changes via css:

.captiontext {
font-variant: small-caps;
text-transform: uppercase;
font-weight: bold;
font-size: smaller;
}

Terry

Tuesday 27 July 2004 11:34:09 pm

Does this happen regardless of what image/file you are embedding? Check the HTML for errors, maybe you have changed a vital template causing unbalanced tags.

Tuesday 21 September 2004 10:39:48 am

I am an EZP 2.2.x fan.
I am still frustrated with EZP 3.x because of this multiple image posting issue.

In EZP 2.2.x, I can just do:

<image 1 right medium #>
<image 2 center large #>
<image 3 float small #> <image 4 float small #> <image 5 float small #>

Is there a solution for EZP 3.x so that multiple image posting will be as easy as 2.2.x?

EZ Publish Loyalist since EZP 1.x
http://www.filipinowebservices.com

Thursday 23 September 2004 7:52:06 am

for some reason this doesnt work for me

i included

<object id="143" size="small" align="center" />

in the article (object 143 does exist)

in the html source i find some empty tags

<div class="object-center">
        <div class="content-view-embeddedmedia">
    <div class="class-image">

    <div class="attribute-image">

                            <p>
</p>
        </div>

    <div class="attribute-caption" style="width: px">
        
    </div>

    </div>

anybody know what is going wrong? (i use ezpubli 3.4)

Tuesday 28 September 2004 9:00:49 am

the problem has been solved. the image with id 123 wasn't correctly in the filesystem