Best practices to create multiple pages with different layouts and content?

By 4toddt on 8 Nov 2012 at 19:15 UTC

I am trying to build a site using an HTML theme from templatemonster.com (theme #34503). It has five pages that our client wants to reuse for their content. While there are some similarities between pages, there are significant differences as well. As you will see from my questions, I am new to Drupal and this is the first web site I've built. I have watched and read tutorial and tried to research the issues, but I still have some questions.

How do I make additional pages? Content > Add Content > Basic Page doesn't seem to have what I need to make additional dynamic pages.
What is the best way to theme those pages? Page.tpl.php would apply the same theme to all page, right?

Thanks,
Todd

Edit: After using Drupal for 9 months, I have some insight that I hope can help someone else. Think of Drupal as a tool to create your own CMS. There are many good solutions depending on what kind of sites you want to make and how you want to make them. Here is the solution with which I've become familiar.

First, Content Types are your database tables. They could be a table of articles or gallery photos or testimonials or slides or whatever.

Views allow you to query those tables to pull back one or more entries to use on your site. Views controls what fields you display and the html surrounding those fields. Semantic Views module gives you even more control (I always use this). You can eliminate a lot of bulk and include just the HTML and styles you want to be styled by your CSS. Views also lets you output the results of your query as a page or a block (or Views content panes if using Panels) to put on another page.

For a simple site, I would do the page layout using just the template files. You can create some variation between pages by having extra regions, because regions only show up when there is content in them.

For a more complex site, I would use Panels. I found it helpful to make my own Panels templates so I could remove the built-in CSS and some of the extra HTML. For example, I have a two-column layout called "two column sidebar right." It's just the necessary html containers with styles like "content-left" and "sidebar-right." Then I control the layout from my main CSS stylesheet(s).

A key component of all this is that Views outputs the content with the html and styles to control how the content looks, and Panels output the container html and styles for layout. The actual styling and layout happen in my CSS. It is easy to complicate things by blurring the lines of what does what.

Another key idea is that Drupal includes a lot of html that you either don't need or just don't understand. Don't sweat it. It's not worth the trouble to totally clean up the output. Just focus on what you can control easily.

There is lots more to learn, but if I had understood this from the start, I would have saved countless hours of trial and error.

Comments

It depends on what those

nevets commented 8 November 2012 at 19:25

It depends on what those differences are. If the differences are all in the content area it will depend what needs to be there but some combination of panels, views, display suite and maybe context will help.

A lot of the time it is simply the presence/absence of some element. If the elements can be represented by blocks you can control block visibility on each blocks configuration page and for even more control use the context module.

It seems common for people to make different versions of page.tpl.php, but I find it is rarely needed.

Here is the static site that

4toddt commented 8 November 2012 at 19:51

Here is the static site that I am using:
http://wizwidget.com/tmp/site/index.html

I'm sure there is some

4toddt commented 13 November 2012 at 16:21

I'm sure there is some complicated way to programmatically shuffle things around to make the different layouts from one template, and that seems to be what people are suggesting I do. Would it not be easier to just use the five different templates via template suggestions? Are there unforeseen problems with that approach?

Hi If you want different

TechnoTim2010 commented 8 November 2012 at 19:36

If you want different types of page layouts, the easiest way is to create a new content type. This gives you the option to add fields such as dates and images as you may want.

You then have two content types each of which can have it's own tpl.php So all you then need to do is use content-add content- choose content type and add the content in each page
Then use menus to glue them together (in Drupal terms this is called routing)

You can make them all look the same using the theme and use blooks to hide/show blocks on each page. The content will show up in the main content area but you can do lots more. Use Views to show teasers of each page for example, taxonomy to categorise content and create menus These can all be in blocks. Remember to install backup and migrate and backup as you go (in case you want to revert)

More complex designs may require panels but this may not be compatible with your bought in theme. Drupal is almost infinitely configurable but get a good book my fave is The definitive Drupal 7 for the advanced stuff.

Above all, Have Fun

Regards

Tim

Oh and what Nevets said as

TechnoTim2010 commented 8 November 2012 at 19:37

Oh and what Nevets said as well,

So to make a page like

4toddt commented 8 November 2012 at 20:15

So to make a page like http://wizwidget.com/tmp/site/index-1.html I would make a content type called "services page." Then how would you recommend getting the dynamic content to look like the entries on this page? Would you put that in the content type or the template?

You have a steep learning curve

TechnoTim2010 commented 8 November 2012 at 21:16

You need more than one new content type

each Services block (the grid) needs to be a content type with title, body and an entity reference call it panel type
The entity reference links to the content type of each page through the read more (can be a new page or js overlay or colorbox etc

But each page is a different layout and a needs either blocks being hidden or shown (which can get messy) so look at context as well (triggered by path) or panels and maybe min-panels and I would suggest page manager to manage it all.

Err good luck, this can be done (and for an experienced Drupaller) fairly easily but for a newbie it will take time. Use the documentation and read the module README's

You really should read the documentation but

NexusStar commented 8 November 2012 at 21:58

Sorry if my title sounds rude but you should really grasp some general concepts on building with Drupal.

I'll try to make some short summary how should I process with this html you have. (I'm sure it's not the best but it's a start)
1. I will look into what content I should represent

Home page -> there is Slide show (Content type "Slide show" with fields - Image Slide, Text, Link OR VIew), Some call out text with Read more (Content type "SomeName" with teaser display of chosen fields OR View), Some text with picture (Content type "SomeName" with teaser display of chosen fields OR View) Some ad (Custom Block for sure).

Services page -> grid with Name Icon and some Description(I think my best bet will be Custom Vocabulary with description of terms and when clicking on the name or read more you're taken on term page = category page with yet another content)

3. Creation of needed Content type and Vocabulary - based on above you can go with no more than three Content type and lot of Views or look closely on what you've got and make few more Content type based on what you need and Views :-)(e.g. Services content type will need Title Description Image, Video / Project Content type will need Title, Description, Image, File field [download project] and so on and so on )

4. Populate the content, Vocabulary terms and made the needed Views

5. Create theme from scratch or I will recommend sub-theme of Omega or Zen - lot of customization and more than needed regions and can be made to look just like your html for no time.

And on my initial ruddiness :-) look on Drupal like LEGO you've got the blocks and can make the Millennium Falcon in no time but from the same blocks you can make Empire State Building by just rearranging them differently and that's the beauty and dread of it

Entering The Dip and trying to win over it.

Thank you for the thorough response.

4toddt commented 12 November 2012 at 17:52

Thank you for the thorough response. It wasn't rude at all, just the truth. I have been doing my best to read the documentation and watch tutorial videos. Unfortunately, I have a deadline approaching and need to quit studying and start coding.

Is there a reason why I shouldn't or can't just make a node for each main page and use template suggestions to implement the custom layout?

As I see it you already started on your project

NexusStar commented 14 November 2012 at 15:30

As I see on the link you provided early you already started on your project. So I'll would like to wish you happy codding and success on the project.

Is there a reason why I shouldn't or can't just make a node for each main page and use template suggestions to implement the custom layout?

-
As I remember it the HTML mock up every page (if we call the page node) of your project is collection of other pages (nodes) which is perfectly reasonable and in order to achieve your goal you should start from bottom up. What I mean is you need to create first your pages building blocks containers (content types with desired fields, taxonomy vocabularies for categorising) and after you've got that from them to construct your pages and when you've got all elements desired on page to style it to look as you wish.

For example here how will look simple How-To of building Slide Show on Home page:

Create Content type named "Slide Show"
Create fields in it for image, tagline, link
Create some example content in the "Slide Show" content type
Create View block "Content Slide Show View" with fields from "Slide Show" content type
Put the block "Content Slide Show View" to be shown only on front page

This are only the basic steps bear in mind that I omit all the configuration and settings you should do in order the final result to be working Nivo like slide show.

Entering The Dip and trying to win over it.

I'm sorry to hijack this thread but...

drplNemesis commented 17 November 2012 at 02:04

I'm sorry to hijack this thread but I've been looking for the answer to this question also. What has been mentioned so far makes a lot of sense, though I'm still unsure about final page layout.

Starting from the bottom up, I create content types, blocks and views. These are then arranged on the page via Structure > Blocks. As an example, I would put my menu in the menu region, a content slider in the slider region, welcome text in the content region, some quick links in the postscript region under the content, a custom view of blog teasers in content2 region under that and footer content in the footer region at the bottom of the page.
But on inner pages, I would like the same view of blog teasers in the second sidebar, next to the content - not at the bottom of the page above the footer.

The only way I can think to do this is either a) create 2 identical views and add one as a block to the content2 region, set only to display on and the other block added to the sidebar region set to display on all except ; or b) as I'm using Omega subtheme with Delta, create a Delta theme for inner pages and move the regions around to suit my needs. I would then have to rename the regions and zones as they won't make sense as sidebar or postscript or header etc if they're not always in those positions. They then become a description of what is in it, rather than its position.

Neither seem ideal.

What I had hoped to achieve was essentially be able to see multiple versions of Structure > Blocks for each "template". To be able to put the same block in different places depending on the page - not just show/hide from the same location.

Is this possible? Hopefully this will help me, the OP and others.

That's just what I needed.

4toddt commented 28 November 2012 at 18:16

It took me a while to completely understand your explanation, but NexusStar's two posts are exactly what I needed. For the sake of other Drupal novices reading this, let me note that Views is the name of a module that you absolutely need to output data where and how you want (it's going to be included in Drupal 8 core).

Is there any reason not to

4toddt commented 14 November 2012 at 23:12

Is there any reason not to implement the five different page templates via template suggestions? Are there unforeseen problems with that approach?

It tends to increase

nevets commented 15 November 2012 at 01:57

It tends to increase maintenance efforts. The answer really lies it what makes the 5 pages different. One can achieve alot based on the presence/absence of blocks. There is also the context module, panels and others that can help. If you create a theme based of omega, the delta module plus context allows you to achieve different layouts without templates.

Let me narrow the question some.

4toddt commented 28 November 2012 at 16:04

I have a sidebar_left, content, and sidebar_right region in my template. I need some pages to hide the sidebar_left region, some to hide the sidebar_right region, and some to hide both regions. Any suggestions on how to do that other than separate templates for each page?

There are two parts to making

nevets commented 28 November 2012 at 17:26

There are two parts to making that work in a single template.

a) Conditionally print the regions in page.tpl.php

b) Have the css adjust widths based on the presence/absence of the sidebars. The body tag should have classes that reflect this.

What I've learned since I started

4toddt commented 22 July 2013 at 20:45

After using Drupal for a few months, I want to add to what others have said to help other Drupal beginners.

Building a dynamic Drupal site based on a static template you purchased is quite difficult and not suitable for beginners. I did it, but it took me months. Drupal does not give you easy control of the exact html you output. It is probably easier to rewrite your template's CSS and javascript than to make Drupal output the html you want. I haven't yet tried to make a subtheme of Zen or Omega, but that might be a better alternative.

You CAN have multiple layouts from a single page.tpl.php. The key is to use some PHP conditionals in your template. If there is content in the left sidebar region, then bla bla bla; else if there is content in the right sidebar region then bla bla bla; else bla bla bla. You get the idea. However, I DON'T recommend this approach. Take some time to learn the Panels and Mini Panels modules really well. Write your own Panels templates if you need. You will have more flexibility and better performance.

You will need to master the Views module. Views lets you query content and output the results as a formatted page or block. You can use this to create your main pages and the blocks that you add to those pages.

You'll probably want to use Display Suite. It can format the output of nodes. There is some overlap in functionality between these modules, but once you learn them, you'll know which to use when. Edit: I don't recommend this any more. Avoid the overlap of functionality by using only Views to output content with appropriate html and styles to be controlled by your CSS.

You will need other modules. Just search for them as your needs demand.

So here is the basic process: