drupal_recipe-advanced ...

spongereasonInternet and Web Development

Nov 12, 2013 (3 years and 8 months ago)

56 views

Drupal

Recipe


Dynamic, mixed content
region using CCK, Views and Panels

Chris Neglia

Copyright 2009, Page 1 Solutions LLC

This is an Advanced Recipe


Please don’t attempt this recipe unless you have a fair understanding of
what Views is and how to use it.



This is a ‘
Drupally
’ way of building a site that is highly usable for a client
who doesn’t know HTML and really doesn’t care.



This assumes you have all the modules for CCK, Views, Panels, UI’s for
them and any related dependency modules like tokens,
ctools
, path AND
pathauto

(set up to use an understandable human
-
readable pattern) .


The ‘Designer’ / ‘Developer’ Way


As web developers, we
could

work in the content region with
straightup

HTML as
static pages.


Sometimes, this is appropriate. When? When making a page like this
once and
only once
.


If this type of content will be made multiple times, using static content
defeats the ‘management’ aspect (the purpose) of a CMS.

The ‘Designer’ / ‘Developer’ Way


So why do it? Laziness? No: Time. Static markup’s faster. We’re smart,
yet we have deadlines. But don’t fall into this trap!


What is the cost of taking the fast route?
1) Future content
-
manager
-
role
usability. 2) And an unforeseen time
-
sink in managing pages scattered all
over the system. 3) it’s just not cool, man.


Conclusion: Do it the right way first.

Two Perspectives on Usability


Think about who is managing and maintaining the site:


(You, the web developer or someone’s
grandad

who just got a
their first HP with a free 14.4k modem and AOL)


Remember,
your
drupal

deliverable is about them not you
.

Two Perspectives on Usability


On the one hand, don’t over
-
engineer for just yourself or crew of
superheroes.


On the other, don’t be frugal with the unskilled.
Drupal

was not made to
be easy for them; it’s made to be cogent enough for you to make it easy
for them.


Straight dope: The answer to ‘who will be managing the site?’ and ‘what
level of skill has this person?’ should be at the top of the requirements
analysis / discovery phase of your project!

The
Drupally

Way (overview)


1) Create a Custom Content type in
Drupal

using CCK


2) Create a View to get a list of this type of content.


3) Clone the view and adjust to get one instance of this content type.


4) Repeat 1
-
3 for each content type


5) Use Panels to create a layout with these new views created in step 3) and link them
to the list view you created in step 2).


6) Relax and enjoy yourself. Because you just used the CMS the
Drupally

way to hand
off to a client without any programming and / or minimal future fuss.


(or you could spend 2 yrs teaching the client HTML, CSS,
js
,
jquery
, and
Drupal
… or you could dump an unusable site on them
while dusting off your hands, making yourself and
drupal

look bad. ‘ah my job is done here’


what a dick)

DCA Example.


DCA website
http://www.comfortacademy.org


The home page is a panel.


The top part has static text. ‘Welcome to comfort blah..’


The bottom part is in 3 sections, ‘featured article’, ‘featured
interview’, ‘featured sponsor’

DCA (cont.)


Each section has the most recent of each content type.


For the Article and Interview there is a link, a picture that is a link, and
[Read More] link to the full node.


All have a short ‘teaser’ but it’s not a real teaser in the node sense but one
we created from the full body.


The Sponsor is the same but the link opens a new tab to the sponsor
home page.


Each section has a banner that says ‘Featured …’

Step 1) Create Content types in CCK


Content management > Content Types > Add Content Type.


Turn off or rename the body field. Turn off comments, in workflow, turn off file
attachments as this is just confusing.


Add new field, type ‘file’; call it thumbnail, widget type ‘image’


Add new field, type ‘file’, call it PDF, widget type ‘file download’.


Move the fields around as needed. Usually title, then uploads, then details works
well. Move the ‘extra’ or ‘less often set junk’ like menu settings to the bottom.
Note that only those with the permissions to change these
fieldsets

like menu,
meta will be able to see them.

Step 1) Create Content types in CCK


Set parameters for content fields such as upload file type restrictions. In the
example of images, set extensions to ‘
png

jpg gif’, for PDF, set to ‘
pdf



Where to save this upload (Path Settings
fieldset
)? For simplicity’s sake, make it
“articles
-
and
-
interviews” in the subdirectory ‘sites/default/files/’


this is a default
area set by upload /
imagecache

modules’ settings.


Best practice suggests naming the machine field names in a manner consistent
with the content type machine name, so that you can easily find these fields in
Views.


Save and create this new type to test.


Go to permissions, and enable the editing of these newly created fields for the
Role which will be maintaining them.

Repeat for every content type


Create Articles (as a downloadable PDF)


Create Interviews (as a title/body/thumbnail)


Create Sponsor (as a thumbnail, link, blurb)


Before
proceeding, go
to
Pathauto

settings
, remove the
‘default’ node pattern and add a pattern for your content type
named in a consistent manner!

Create a List View for a content type


Go to
Views > Add


Name the view all lowercase with underscores


In the View Description, type the same in uppercase with
spaces.


Ex(s):
pdf_articles
; PDF Articles. interviews, Interviews.
dca_sponsors
; DCA Sponsors


Create Type
: Node


Next

View List : Articles (part 2)


Select ‘
Page
’, click ‘
Add display



Style
: grid. 1 column. Horizontal.


Items to display
: 5.


Use pager
: Yes. Mini pager


Filters [+]
| Node: Type=Articles; Node: Published= Yes


Sort Criteria [+]
| Node : Post date,
desc


View List : Articles (part 3) Overview


Fields|


Add these fields to this View [+]:


Content: Article (Generic files),


Content:Article

(image),


Node: Title,


Content: Article (default)


Node: Body,


Node:Title


----

Just keep clicking ‘update’ to add the above fields with the default settings. Then,
following the next couple slides, click on the links for each field under ‘Fields’ to go back
through and ‘edit’ the options per field. Click ‘update’ to save a field’s options.

View List : Articles (part 4)


The first (topmost) field (
field_article_pdf
), tick ‘exclude from display’


Label

: none


Format ‘Generic files’.


Update
.


Now you will create a thumbnail image that will download the PDF when
the user clicks on it. What you are doing here is tricky: you are outputting
the URL with the ‘hidden’ field ‘above’ it using TOKENS in views.


In order for content field Tokens to show up
as a choice in subsequent
fields
, you must first add the fields you want tokens from. Excluding these
fields from display is a way to access that info without showing it twice.


View List : Articles (part 5)


The 2nd field down on the list (the content:
article_thumbnail
) (
field_article_thumbnail
), tick
‘output this field as a link’


Link path
: ‘sites/default/files/articles
-
and
-
interviews/[
field_article_pdf_fid
]’


Difficult Concept Warning
: note that what you are doing is linking this
url

path (making a
reference) to the ID of the PDF field by using tokens in your view. It’s important to make sure
that the above ‘link path’ is matched to the Path Settings
fieldset’s

value in the Articles
content type mentioned earlier. Consistency / Uniformity is key.


(If you wish to have more granular
filespace

for user
-
generated content on the site (
ie
:
granting casual users ‘create’ and ‘edit own’ permissions to this content type), you may
consider configuring
each user to have their own
filespace

first
and then use the
node
-
author
based tokens to generate your path.
)


Alt text
: [
field_article_pdf_fid
]


Label

: none


Format

: Image

View List : Articles (part 6)


Now you will create title as a link to download the PDF


So the 3rd field down on the list (Node: Title) tick ‘output this field as a link’


Link path
: ‘sites/default/files/articles
-
and
-
interviews/[
field_article_pdf_fid
]’


Alt text
: [
field_article_pdf_fid
]


Label

: none

View List : Articles (part 7)


Node
: Body


Label

: None (leave blank or blank it out)


Update

View List : Articles (part 8)


Node
: Title (2
nd

one at bottom)


Tick ‘
Rewrite the output of this field



In the
Text
: field type ‘[Read More]’


Tick ‘
output this field as a link



Link path
: ‘sites/default/files/articles
-
and
-
interviews/[
field_article_pdf_fid
]’


Alt text
: [
field_article_pdf_fid
]

Test the view and add path


Change
Path

to ‘articles’


Click ‘Preview’; Select ‘Page’ display


If it looks OK, then save the View


Did you forget to Save the view
? Sorry just making sure.


Navigate to ‘
http://domain.com/articles
’ and check out your view.


Click
Theme: Information
for template information. Typically ‘views
-
view
--
articles.tpl.php
’ will be the specific, best one to style just this view in
‘Display Output’. You can get
much

more specific if you have to.

Duplicate the View and Modify


Click ‘
Clone
’ to create a duplicate view of the ‘articles’ view.


Name this view ‘
single_article
’ or something like that.


Click on ‘
Page
’ display,


Use pager
: No


Items to display
: 1


Path ‘
featured
-
article



Save the new View.


(Alternatively, you can ‘add a display’ and then modify it’)

Create Panel


Create Content > Panel


Choose ‘Single column’ Layout


Name the panel and Save.


Click the ‘
Panel Content
’ tab.


Click the [+] in the upper left corner of the column.


Create Panel


Choose ‘New custom content’ to add some static HTML. Click ‘Add
pane’


Add another pane, under views, add ‘single articles’; Page display.
Note in panels you could also add the ‘defaults’ display view.


Override the title with ‘Featured Article’


Repeat for the other content type views (interview and sponsors).


Click Save.


Edit the panel to have a path in the existing navigation or add it
under menu settings. (
ie
: home
-
panel). For the home page, set
your site’s home page to home
-
panel instead of node.