v9.02 Image at top of each product page

[Decswitch]

Hi,

I have my product pages setup so that they are in 3 columns.

Is there any way to have a big image at the top of every product page so I can show some product close-ups and introductory text? The same way ReelFishing use an image at the top of each section page like this:

http://www.reelfishing.co.uk/game-fishing-tackle.html (good actinic site by the way)

At the moment I'm using a fragment and putting an image in there but that means it falls in line with the other products, as it is using the same layout, rather than up at the top of the page.

Has anyone got an example of how to do it?

Best Regards,
Rob.

[Duncan Rounding]

You can use a fragment to do this by setting the column count for the first row to 1 and subsequent rows to 3.

Also set the Top subsection layout to None and the Bottom subsection layout to the layout you want - this will then force the fragment to the top.

[Decswitch]

Hi Duncan,

Thanks a lot for the info. I can see this works for the section layout but is there any way to filter this down one level further so that you can do the same on your product pages? i.e. can you have a fragment at the top of each of your product pages and then have your products listed out below this fragment?

At the moment I have the fragment falling in line with the products as per the attached screenshot.


Regards, Rob.

[leehack]

You have 2 options, either create a product list layout setting that enables you to specify the first column count and then all others, the list layout needs changing and you need a new variable mimicing the product column count one, so you'd have 'first product column count' as you do with section columns currently.

Or as these are just images have the image added directly into the list layout via a section/product variable and if you set a blockif around the code you can set the image to show if you have one defined or leave things blank if you don't. This then gives you global chance to add an image wherever you want and avoid using fragments. You could have a variable where you specify the filename of the image to use on that particular page and the blockif runs on whether it is null or not.

Some great blockif tutorials in the layouts forum, well worth learning. The inbuilt help will teach you how to create variables if you need to learn that too.

[NormanRouxel]

Here's a kludgy way to get a single fragment across the top of a 3 column product page.

Create a new Fragment Layout "Start 3 Cols Across". In it put only

 </td><td></td><td></td></tr><tr><td colspan=3><table width=100%><tr><td>

Create a new Fragment Layout "End 3 Cols Across". In it put only

</td></tr></table>

Put 3 fragments at the top of your page.
1) Dummy fragment using layout "Start 3 Cols Across"
2) The real Fragment that you want to see full width using any layout
3) Dummy fragment using layout "End 3 Cols Across"

I tested this on Corporation layout and got valid HTML.

[TraceyHand]

I tested this on Corporation layout and got valid HTML.

that almost sounded like a disclaimer, Norman

[Decswitch]

Thanks for the pointers Lee, it is much appreciated. I shall get reading up on Actinic variables and block if's. I do have some programming background so not too bad there.

Thanks also Norman. Will give that one a go as well. A workaround would be great at the moment as got a lot of plates to spin!

I will prob. get in touch with one of you guys in the next couple of weeks to see about paying for a couple of days to give my shop a final polish before it goes live.

Regards, Rob.

[leehack]

Robert, please don't waste time on kludges unless you are going bald and have given up completely. With a programming background you will literally be up to speed in an hour on blockifs, they are a really key thing to learn in V8/V9, opening up so many windows of opportunity. Tables galore is not the way forward to display one single image .

[Duncan Rounding]

What was that - did Lee say Norman was going bald?...

[NormanRouxel]

Actually, I first looked at doing this programmatically and gave up because the inner workings of the variable width lists that set out products and fragments is not an easy place to tinker.

The table code isn't mine. It's what Actinic generates anyway. All I'm doing is cleanly breaking out of it displaying something and restarting a new row and all the time keeping the listcount correct.

I know the pain too well 'cos I've been there quite a bit and found several anomilies in the validity of the ListIndex and ListCount variables.

[NormanRouxel]

Here's an alternative way.

Go to Design / Library / Variables / Section and create a few variables PageIntroTitle, PageIntroText and PageIntroImage (this one of type filename). Set Allow Empty Value on these.

In the Product List layout / Start of List, before any code add something like

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageIntroTitle%22%20%2f%3e%20%21%3d%20%22%22">
 <h3><actinic:variable name="PageIntroTitle"></h3>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageIntroImage%22%20%2f%3e%20%21%3d%20%22%22">
 <img src="<actinic:variable name="PageIntroImage">" alt="<actinic:variable name="PageIntroTitle">" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageIntroText%22%20%2f%3e%20%21%3d%20%22%22">
 <p><actinic:variable name="PageIntroText"></p>
</actinic:block>

Add a bit style and formatting to suit.

[leehack]

As the image you want to add needs to go directly above the table used for the list layout, there is no need for a table to be involved at all. A simple <img> tag above the list layout table wrapped in a blockif which works out whether the filename variable you setup is empty or not is all that is needed. A <br/> or 2 after the image tag is the only other thing you might need to add some space in between them.

The problem with using fragments is that the fragment layouts themselves also use tables, even the image only one, so we end up with a table inside a table to show an image which generally needs nothing to display itself anyway.

It may be a purists view, maybe not, I guess I just disagree with 2 pointless tables doing absolutely nothing useful.

[Decswitch]

Haha, Lee there is no chance of me losing my hair! That started a few years ago so I'm a shaven raver now

I'm all for the healthy debate though. At the risk of getting a crossbow bolt through the head from Lee I'm favouring Norman's way as it is easier to get up and running. I'm from the 'if it looks right and works then it is right' school.

Regards, Rob.

[leehack]

It's more steps to do what you call the easy way so I am really confused now. My way involves adding an image tag, creating a variable and adding a blockif, which you have to create the other way anyway?

You can only lead the horse to water as they say.

[NormanRouxel]

Personally, I'd go with my post #11. It does everything that Lee describes in his #12. And implementing it will get you used to tinkering with adding new elements to the design.

My original post was intended for someone who wanted to get a quick result on one or two pages. It doesn't need any other coding skills as the 3 column item is just a normal Fragment layout, so can incorporate image, links, whatever a Fragment allows. If you want this on every page, then amending the start of list would be a lot cleaner.