This customization will allow you to change the default layout of photos on the item page. The default photo layout in the Modern theme and similar themes (like BCute and Hierarchy), display the images on the right side of the page. This layout can be changed to allow you to show all the images horizontally.
Here’s an example of the “default” layout using the BCute theme:
Before
The Customization
Now, here is what this customization can do:
After
This is the code you’ll need. Place this into the file item.php, located within the theme folder. You can place this code anywhere you’d like. In the example above, the code was placed immediatly below the code <div id=”description”>. Now, here’s the code:
<?php if( osc_images_enabled_at_items() ) { ?>
<?php if( osc_count_item_resources() > 0 ) { ?>
<div id="photos">
<?php for ( $i = 0; osc_has_item_resources() ; $i++ ) { ?>
<a href="<?php echo osc_resource_url(); ?>" rel="image_group">
<img src="<?php echo osc_resource_thumbnail_url(); ?>" width="110" alt="" title=""/>
</a>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
Thumbnail size: You can change the size of the displayed thumbnail image by changing the width attribute in the code above.
Cleaning up the file
Lastly, you should remove the ‘old’ code for showing the photos, which is located below the tag <div id=”sidebar”>. The code looks like this:
<?php if( osc_images_enabled_at_items() ) { ?>
<?php if( osc_count_item_resources() > 0 ) { ?>
<div id="photos">
<?php for ( $i = 0; osc_has_item_resources() ; $i++ ) { ?>
<?php if( $i == 0 ) { ?>
<img src="<?php echo osc_resource_url(); ?>" width="315" alt="" title=""/>
<?php } else { ?>
<img src="<?php echo osc_resource_thumbnail_url(); ?>" width="75" alt="" title=""/>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
<?php } ?>