Posted by isaachorton on February 5, 2011 at 12:33am
Im trying to create a simple view that assigns #a-#z ID's to list items.
also does anyone know if its possible to load every 2nd and 3rd list item with an alternate (bigger) image?
Does anybody know how to make that happen?
Comments
use classes
use classes; changing the ID is not easy.
Option 1: If your a coder you can take this module apart; it adds classes to each item. http://drupal.org/project/views_javascript_random. In short use the correct hook_preprocess for that view.
Option 2: Use a tpl file.
i was going the tpl file route
but I cant figure out the right way to list 7 items separately (as an array?) in my tpl file.
this is my proof of concept html design:
http://sidecha.in/fluidgrid1.html
this is part of bit of html im trying to templatize.
<div class="wrap"><div class="a3" id="c">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<div class="a4" id="d">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something2 ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<!-- end wrap --></div>
<div class="wrap">
<div class="a3" id="e">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<div class="a4" id="f">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something2 ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<!-- end wrap --></div>
<div class="wrap">
<div class="a3" id="g">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<div class="a3" id="h">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<div class="a5" id="i">
<div class="maphomeimage">
<div class="maphomeoverlay">
<div class="img-content" style="background-image:url(<?php print $something ?> )"></div>
<p><?php print $something ?></p>
</div>
</div>
</div>
<!-- end wrap --></div>
You want to install Themer + Devel
You will have an easier time theming the View if you have Themer and Devel installed to help show what the view field names, results and rows are called. Sometimes you want to solve this type of problem in views-view-fields, other times in the template for the actual field itself, and sometimes in in the style template for that view.
It is worth a small diversion to play around with Themer and Devel. I also use Admin Menu, which has a nice shortcut in the menu to turn on/off all "developer" modules. Keep a second type of browser or a second PC nearby for testing the output outside of developer modules (sometimes things do not display as expected under Themer, because it wraps up a lot of your content with extra divs, etc.).
Know that an element can only have ONE ID, so (per CSS spec) so if you want the selection target to be an ID, you'll need to override what Views is printing (by default, probably no ID... but use Themer + Devel to be sure what's being sent to the template). You could just as easily make this a class target, and in your .css files you'll have some rules targeting generic classes like a3, a5 etc. and then your individualized class rules for g, h, i. For your purpose stated so far, there would be no difference between using class and ID, and class may be easier overall.
For whichever template you use to solve this, Themer will give you a nice expandable list of variables coming from the view. For example, you can use the rows counter variable views provides and use that with (example) your own $alphabet[$row_number] array. Not every helpful variable will be available in each views template, and sometimes the problem is easier to solve in "one template layer up (or down)". You'll understand quickly once you try Themer.