Hi,

I am looking for some help regarding the image display in COUCH CMS.

I have a page where admin(from the back end) can upload the picture and that picture will be displayed on the front end screen when changes done. When admin does not upload the image and leave the <div> blank then every browser is showing the blank screen on the page. But, in firebox it is showing broken image icon on the screen.

When I looked from the firebug in the firefox browser I can see the code as <img src=""> whereas in other browser it is <img src> only.

Is there any sort of fix for this issue.

I am just beginning the COUCH CMS and trying to get my head around.

[KK]

Hi,

The problem actually is not how FireFox displays the empty IMG tag (this will vary from browser to browser) - the problem is that you are outputting an empty IMG.

Ideally when there is no image to show, you should skip outputting the IMG tag altogether.
It is pretty simple to do. Suppose the image region is named 'my_image' and you are using it in your template like this -

Code: Select all

<img src="<cms:show my_image />">

Wrap the statement above with a conditional that first checks if there is indeed an image to show before outputting the <img> like this -

Code: Select all

<cms:if my_image >
    <img src="<cms:show my_image />">
</cms:if>

Hope it helps.

Hi,

Thanks for your help.

But, still the issue exists.

I need to allow the image upload as well and when I use the if condition the image upload feature is removed, I need to have editable property as well. Can I make it editable, tried to make the condition like below but its not looking good.

<cms:if prop_image >
<img src="<cms:editable name='prop_image' label='Image' desc='Upload main image of property here' show_preview='1' preview_width='150' type='image' />" />
</cms:if>

@Rabin
To make this work, you'll need to take the editable region out of the html and put it in the template tag at the top of the page.

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>

<cms:template title='My Template' >
   <cms:editable name='prop_image'
    label='Image'
    desc='Upload main image of property here'
    show_preview='1'
    preview_width='150'
    type='image' />
    
</cms:template>

Notice that there is an opening and a closing cms:template tag and the editable region is defined inside them.

Now in the html code, you can refer to that editable region by name.

Code: Select all

<cms:if prop_image >
    <img src="<cms:show prop_image />" />
</cms:if>