Create a Gallery to Present groups of HTML objects

I need to be able to display a bunch of books that are on sale from Amazon that interest the site’s audience. Amazon’s Associate Program makes it easy to monetize your site by advertising their stuff. And since the product (if placed properly) can be a value add to your clients, it is a win win.

In the SS, you can see the book ads from Amazon. Each one of these ads is a small node from a custom content type

drupal css gallery

called Ads-Books. This type is nothing more than a piece of full, unfiltered HTML that allows you to create any kind of node that you want to. I have created buttons, help graphics, all sorts of things using these types of nodes. And by using Panels and CSS, they are easy to style and place.

The View uses the Grid display. This uses <TR> and <TD> tags so the tables are added easy and don’t require much in the way of styling. I know, TABLES… but they still have their uses at times.

In addition to the Grid display, I added three pieces of CSS to make things fit together properly:
.book-ads-cell-class > p {width: 25px; /* helps align indiv cells*/}

.panel-pane.pane-views.pane-all-books.no-title.block {left: -8px; position: relative; /* moves the whole panel pane content around inside the table rows/cells*/}

drupal images advertisements.book-ads-cell-class { /* more help for cells*/
position: relative;
left: -33px;
top: 23px;
}

the other SS shows what one of the individual book nodes looks like in code within CKEditor.

the nice thing about this view is that it is maintenance free. As long as I add book ads to that content type, they will appear properly in the view.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: