Template issue help

[zimmo]

Hi All,

I am learning so much with the cms system and it just blows me away with how good it is and how much you can extend things. I am after some advice on how best to do this, please see below.

I have tabs within my content pages in the admin section for adding things to the website. As well as the normal content tab I created a product info tab, here the user can select and do a few different things.

One thing is the ability to select 3 product images using the gbfilepicker. This is great, but what I am struggling to do or work out is how I can then link each of these images to a larger image.

So basically giving the user an option to browse and select a link from the image.

Is this possible? as I know you can do it through the wysiwyg editor with text and images in there, but what about as content block?

My code for the 3 images is:


{content_module block="main_product_image" label="Main Product Image (490px width)" description='Please choose your main product image at 490 pixels wide' module="GBFilePicker" tab='Product Information' assign=mainproductimage mode="browser"}
{content_module block="second_product_image" label="Second Product Image (240px width)" description='Please choose your second product image at 240 pixels wide' module="GBFilePicker" tab='Product Information' assign=secondproductimage mode="browser"}
{content_module block="third_product_image" label="Third Product Image (240px width)" description='Please choose your third product image at 240 pixels wide' module="GBFilePicker" tab='Product Information' assign=thirdproductimage mode="browser"}

Code: Select all

{content_module block="main_product_image" label="Main Product Image (490px width)" description='Please choose your main product image at 490 pixels wide' module="GBFilePicker" tab='Product Information' assign=mainproductimage mode="browser"}
{content_module block="second_product_image" label="Second Product Image (240px width)" description='Please choose your second product image at 240 pixels wide' module="GBFilePicker" tab='Product Information' assign=secondproductimage mode="browser"}
{content_module block="third_product_image" label="Third Product Image (240px width)" description='Please choose your third product image at 240 pixels wide' module="GBFilePicker" tab='Product Information' assign=thirdproductimage mode="browser"}

{if $mainproductimage}<img class="mainimage gallery" src="uploads/{$mainproductimage}" width="490" height="490" border="0" alt="{$mainproductimage}" />{/if}
{if $secondproductimage}<img class="imgbdr gallery" src="uploads/{$secondproductimage}" width="240" height="240" border="0" alt="{$secondproductimage}" />{/if}
{if $thirdproductimage}<img class="gallery" src="uploads/{$thirdproductimage}" width="240" height="240" border="0" alt="{$thirdproductimage}" />{/if}

Thanks Zimmo

[zimmo]

Well I managed to do a workaround as I still dont know how you get this internal linking working within a module block.

I created 3 new image selection options, these options were the big images that were being linked to, then in the html just applied the link to the a href so its worked out, just a different way.

Cheers

[velden]

I would suggest to let the user select the large images and use CGSmartImage module to generate the small ones.

Not tested example, read the CGSmartImage module help for syntax and examples:

Code: Select all

{content_module block="main_product_image" label="Main Product Image (490px width)" description='Please choose your main product image at 490 pixels wide' module="GBFilePicker" tab='Product Information' assign=mainproductimage mode="browser"}

{if $mainproductimage}
  <a href="{uploads_url}/{$mainproductimage}">
     <img class="mainimage gallery" src="{CGSmartImage src=$mainproductimage filter_croptofit='490,490' notag=1}" width="490" height="490" border="0" alt="{$mainproductimage}" />
  </a>
{/if}

This will only work if the small images and the large images are the same (except size).

If not, you'll have to make 6 content blocks, 3 for the small images and 3 for the large images.

[Dr.CSS]

Close, but I would have used the same image call twice and use CSS, note: width="240", to make it smaller for the link to pop up...

{if $mainproductimage}
<a href="uploads/{$mainproductimage}" rel="lightbox[linked]">
<img class="mainimage gallery" src="uploads/{$mainproductimage}" width="240" alt="{$mainproductimage}" />
</a>
{/if}