Tuesday 28 September 2010

Working on Alpha Friends site

Week before I,ve got new interesting challenge - to solve some old problems on Alpha Friends web sites.
Site owners were publishers too, and as fact they were using Issuu.com - service for publishing their online content. Issue com provides wide range of customization, including xml layout templates.
What they doo, if you follow the instructions on Issuu.com, you can see need of placing certain amount of files on your server, which finally points to some thing like..

http://issuu.com/jesper/docs/gan_issuu?mode=embed&documentId=080311154822-183d3d833
4a544518a0d5e324f2543d4&layout=http://example.com/issuu/basicBlue/layout.xml

Which actually tells that there is configured template for your publication on your site and displays full screen Flash page.
Well looked a bit like a mess, so I took and old saying that "More simple way is always better". I,ve managed to solve this issue, by creating a new view with block an page options.
First we will create custom content type with three fields - Title(default), Body for embedding our issuu code and image file field, I hope you know how to do that, otherwise kick me a comment, and I,ll give instructions for that too.
Then create content - put title of your node, paste embed code from your issuu library.
Create a small front page image of your news magazine and upload it. So our test node is ready, ehh no so fast, don,t forget to hide small image field under CCk field display options. Well actually I,ve added date field for better sorting purposes.
Ok, lets jump to creation of view
So since it is Drupal5 we go to >> admin/build/views, click on ADD tab.
  1. Don`t forget to give your blog a name
  2. Description too
  3. Tag
So what do we need, we need page with small icons to click and then redirecting to our embedded issuu nodes.
Scroll down to page option give your custom url path, check the provide page view. Use pager too if you thing you will need them. Select how many items per page or set actually. Select provide menu if you want this url appear on your menu sytem.
Ok, now we need to display our image field, scroll down to fields section, Under add field select box find your image flied, select and click "add field" Now since we,ve got our field to display we need to filter out our custom nodes, jump on filters. Under selection list select node:type, them you will be provide with all your custom content types, set to the one you need and click "add filter", this done.
Finally, you can use date field for nicer and better sorting.
Almost done, uhh forgot we need to set display type, scroll page back to page option, under view type I used List view, but you can select the other ones too.
Ok, it is ready to save, cool.
Whats left, if you browse to your newly created page you might find that (in case if you have added multiple nodes), looks like html list, yes that`s it, because we,ve selected it. No vories, find your custom view CSS class it is mostly .view-yourcustomviewname and do something like this.

.view-yourcustomviewname ul li {
float: left; /*this floats all items to left and sets it no view we would like to have*/
/* you may want to add additional css styling too*/
}
Hurahh our view is ready to look at HERE.

No comments:

Post a Comment