HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Shopping Grid layout

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#106560 (In Topic #20779)
Avatar

Fan in action

grid layout - not working

I have a number(6) of items/products defined in a category as a sub category (no items/entries/products in the parent category for both) and have the category display type set as Grid of images (in the default tpl set the 2nd catalogue field must be an image)

In one ocPortal implementation the items/products are displayed correctly as a grid. Yet in the other they are not they are a list of images. The items are the same as are the images, although the one that is not displaying the items/products with a grid layout does have one extra image that was created in the same way as the others and as such is the same size.

I find the "in the default tpl set the 2nd catalogue field must be an image" very confusing. I thought that you shouldn't really touch default tpl's and why would you.

In the implementation that does display a grid I have done nothing special although I did have issues at first; no grid, go into cart and return to shopping and grid would be displayed. This was resolved by changing the linking (I think to the upper category).

I've looked at the catalogues and there is no image field as the 2nd field (1st field title, 2nd field description, 3rd field Catalogue Display Type).
If it means the field types attached then they are predefined (Product Title, Product Code ....).
If it means 2nd field of the first field then that's a description field).
I've added images to both of the categories, a number of times as the image field (Representative Image) doesn't indicate whether an image exists or not (it is blank even after having added an image), the implementation with the working grid is the same.

I've tried changing the linking on the implementation that doesn't show the grid, nothing changes. I've changed display types but none of the others are acceptable (the non grid grid layout is better), the rows and columns options doesn't have add to cart.

As an aside is there an optimum image size or range? The images currently use are all in the range 62-90 x 80 and are png's (these are for rank images) and lose a lot of quality when increased. I assume that using larger images would result in enhanced quality (the actual rank images used would remain as they are).

Regards, Mike.
Back to the top
 
Posted
Rating:
#106574
Avatar

Hi,

Assuming it is your FLWG site that isn't working right, Salman's themeing probably broke it. Changes in that theme have gone right across many of the default templates. I've asked him to take a look.

I find the "in the default tpl set the 2nd catalogue field must be an image" very confusing. I thought that you shouldn't really touch default tpl's and why would you.

Yeah, that's very confusing. It's accurate, but even I had to check the code to disambiguate it.

We will change it to say:
"The default tpl set assumes the 2nd catalogue field is an image"

It's trying to say in very concise terms that you either need your 2nd catalogue field an image, or you need to make a custom template set for the catalogue. In actual fact, the products catalogue doesn't even use the default tpl set and already has this handled.

I'll update the docs to explain these particular details.

I've added images to both of the categories, a number of times as the image field (Representative Image) doesn't indicate whether an image exists or not (it is blank even after having added an image), the implementation with the working grid is the same.

The stuff about grids is not in reference to the representative image, however when you go back to edit the category it should be possible to see it. I just ran a test on a stock v9 site, going back to edit it says:
"Remove your existing file (N/A if you're uploading a new file anyway)". You can preview the image in a tooltip by hovering the mouse over the word existing, which has a dotted underline.

As an aside is there an optimum image size or range? The images currently use are all in the range 62-90 x 80 and are png's (these are for rank images) and lose a lot of quality when increased. I assume that using larger images would result in enhanced quality (the actual rank images used would remain as they are).

I believe by default it fits the image to a maximum width as specified by the "Thumbnail width" option (that's a site-wide config option, not specific to the catalogue). I don't think it stretched up, only down.

Templates can actually customise thumbnail sizing, but it gets complicated.


These are the changes I've just made for the catalogues tutorial (not uploaded yet):

Code (diff)

@@ -65,7 +65,7 @@ You may also specify which fields may be used to search the catalogue (searching
 
 [exp_thumb="A non-tree catalogue uses an index" float="right"]catalogues_view_index[/exp_thumb]
 There are two options to set how a catalogue may display:
- - 'Display type' -- you can display entries in categories as lists, "field-maps" or in a table (full customisation is possible via templating).
+ - 'Display type' -- you can display entries in categories as title lists, field-maps, tabular listings, or in a grid of images (full customisation is possible via templating).
  - 'Is tree' -- a tree catalogue has a full hierarchical category tree, much like the download system does; a non-tree catalogue just shows the categories from a single catalogue index.
 
 Note that if you set all fields of your catalogue to "Display in category-views" and disable comments and ratings and trackbacks, there will be no links to the entry view screen. This is due to there being little purpose in this screen because everything already displays on categories.
@@ -75,6 +75,32 @@ Note that if you set all fields of your catalogue to "Display in category-views"
 [exp_thumb="A catalogue without 'own pages' enabled" float="left"]catalogues_not_own_pages[/exp_thumb]
 [exp_thumb="Viewing a catalogue entry" float="right"]catalogues_view_entry[/exp_thumb]
 [/surround]
+
+[title="3"]Display type[/title]
+
+[title="4"]Title lists[/title]
+
+Title lists are very simple lists of links. Each link links through to the full entry screen.
+
+[title="4"]Field-maps[/title]
+
+Field-maps are the most flexible display type because they can easily and automatically expand to show as much field data within the category view as you want.
+
+[title="4"]Tabular listings[/title]
+
+Tabular listings will show your entries in columns. This works well if the data within any particular category-displayed field is short, and if there aren't too many of them.
+
+[title="4"]Grid of images[/title]
+
+This is probably the most attractive display, and works well if you only really need to show a title and a thumbnail on the category screen.
+
+The default template ([tt]CATALOGUE_DEFAULT_GRID_ENTRY_WRAP.tpl[/tt]) assumes the first field is the title and the second field is the picture.
+You therefore need to either:
+1) Follow this convention
+2) Create [tt]CATALOGUE_yournewcatalogue_GRID_ENTRY_WRAP.tpl[/tt] such that it references a different field sequence number (replace [tt]FIELD_1_THUMB[/tt], noting that we're counting field sequence numbers starting from zero)
+
+However there is an important exception to the above. The products catalogue already is bundled with a custom template set which is already referencing a different picture field. You also are not supposed to rearrange the first few fields in the products catalogue because they have a hard-coded meaning.
+
 [title="2"]Creating a tree catalogue, fast[/title]
 
 There is a special feature on the screen to add a catalogue with a category tree constructed automatically for it.
@@ -159,6 +185,14 @@ For a full table of fields you can use, put [samp]{+START,PARAM_INFO}{+END}[/sam
 With some file system manipulation, you may make use of the 'custom template sets' feature. You then need to go to the themes/default/templates directory in ocPortal and copy all the [tt]CATALOGUE_DEFAULT_*.tpl[/tt] files to [tt]CATALOGUE_<your-catalogue-codename>_*.tpl[/tt].
 You would then customise these templates.
 
+When we talk about default catalogue template set, we are referring to the [tt]CATALOGUE_DEFAULT_*.tpl[/tt] files rather than referring to the default theme or the default versions within that theme. It is possible for custom themes to have their own versions of the default catalogue template set, and also per-catalogue versions.
+We're using the word default in different contexts, so to clarify:
+ - [tt]themes/default/templates/CATALOGUE_DEFAULT_*.tpl[/tt] -- the default theme's default default template set
+ - [tt]themes/default/templates_custom/CATALOGUE_DEFAULT_*.tpl[/tt] -- the default theme's overridden default template set (i.e. a site's owner has decided to override it but not on a per-theme basis)
+ - [tt]themes/default/templates_custom/CATALOGUE_somecatalogue_*.tpl[/tt] -- the default theme's custom template set for the [tt]somecatalogue[/tt] catalogue
+ - [tt]themes/mytheme/templates_custom/CATALOGUE_DEFAULT_*.tpl[/tt] -- the [tt]mytheme[/tt] theme's overridden default template set
+ - [tt]themes/mytheme/templates_custom/CATALOGUE_somecatalogue_*.tpl[/tt] -- the [tt]mytheme[/tt] theme's custom template set for the [tt]somecatalogue[/tt] catalogue
+
 We intentionally did not provide a highly user-friendly interface for enabling custom template sets because the process of working with multiple sets of templates is inherently difficult, and by setting it up manually you will get a better feeling for what ocPortal does.
 
 [title="3"]Seamless catalogues[/title]
 


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#106575
Avatar

Catalogue templates are named as follows…

Title lists:
  • CATALOGUE_*_TITLELIST_ENTRY.tpl
  • CATALOGUE_*_TITLELIST_WRAP.tpl

Field-maps:
  • CATALOGUE_*_FIELDMAP_ENTRY_WRAP.tpl
  • CATALOGUE_*_FIELDMAP_ENTRY_FIELD.tpl

Tabular listings:
  • CATALOGUE_*_TABULAR_ENTRY_WRAP.tpl
  • CATALOGUE_*_TABULAR_ENTRY_FIELD.tpl
  • CATALOGUE_*_TABULAR_HEADCELL.tpl
  • CATALOGUE_*_TABULAR_WRAP.tpl

Grid of images:
  • CATALOGUE_*_GRID_ENTRY_WRAP.tpl
  • CATALOGUE_*_GRID_ENTRY_FIELD.tpl


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#106577
Avatar

Fan in action

Chris, thanks (I think I'm getting a better Idea now). Perhaps instead of saying:

Manual said

The default tpl set assumes the 2nd catalogue field is an image


It could take the emphasis of the "default tpl" is the wording were something like

Moaning Mike's manual says said

The 2nd field of the catalogue must be an image (the default tpl assumes this).


Yep it is the FLWG site.

Like the list of tpl's. I'll have a look at them (need to as investigating what we call emerging issues and using a catalog form them and I'm pretty sure I need something due to the number of fields and data the fields hold.

Regards, Mike.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: