Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Any CSS experts care to help?

K

kevindosi

macrumors regular
Original poster
Mar 16, 2006
191
0
Hey everyone, I'm trying to get a little website going in wordpress and am having some trouble. I'm using nextgen gallery (a photo gallery plugin) to display photos on a page. My theme is made to look like an open book with polaroids glued onto the pages, but I need these images to somehow "float" around the center of the book where the pages meet to make it look realistic. The gallery is generated automatically, and each image is wrapped in a div.

Any idea how I might go about doing this? Could I somehow define two columns and have all the content automatically flow into the second column somehow? Or place an empty div in the middle and somehow have the content float around that? Any help would be appreciated.

See the attached screenshot to get an idea what I'm talking about.
Thanks!

attachment.php
 

Attachments

  • Screen-Shot-2011-11-15-at-1.08.42-AM.jpg
    Screen-Shot-2011-11-15-at-1.08.42-AM.jpg
    23.7 KB · Views: 375
Last edited by a moderator:
Only 4 images or will there be arbitrary number of rows?

I believe this will need to be addressed either in the php generation (by attaching classes like 'left' 'left' 'right' 'right')

Or using Javascript to basically do the same thing.
 
Can't really give an exact answer without seeing the code.

If the plugin generated code gives each column a unique class and sizes don't change all you would have to do is add a right margin to the second column.
 
jsm4182 said:
Can't really give an exact answer without seeing the code.

If the plugin generated code gives each column a unique class and sizes don't change all you would have to do is add a right margin to the second column.
Click to expand...

Thats true, as long as this is what you need you could use:
div.thumb:nth-child(4n+2) {
margin-right: 150px;
}

If you apply it with jQuery, it will work in IE. Also, this may only work with lists, but it would be much easier to convert the theme to a giant list than anything else.
 
thanks for your replies. that's what i figured, but can't figure out how to do it or if it's possible. it'll be an arbitrary amount of rows, depending on how many images i add. here's the code from the plugin that renders the page:


Code: 
<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
 
So looking at the code that is generated on the webpage, I realized that every image is wrapped in a unique div id (ngg-image1, ngg-image2, ngg-image3, etc). I could style CSS for every 3rd div to give it a left margin. Is there any way to do this other than writing a div for every multiple of 3 in my css file?
 
Like jared_kipe suggested you could use jQuery to add a class to every third.


Code: 
$("div.ngg-gallery-thumbnail-box:nth-child(4n+3)").addClass("third");
 
jsm4182 said:
Like jared_kipe suggested you could use jQuery to add a class to every third.


Code: 
$("div.ngg-gallery-thumbnail-box:nth-child(4n+3)").addClass("third");
Click to expand...

I know nothing about jquery, but I actually want the class to be added to every 4th, after the 3rd. I'm kind of curious about how to do that, but I've stylized every 4th div in my css and it produced the desired effect. Thanks a lot for everyone's help!
 
kevindosi said:
thanks for your replies. that's what i figured, but can't figure out how to do it or if it's possible. it'll be an arbitrary amount of rows, depending on how many images i add. here's the code from the plugin that renders the page:


Code: 
<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>
Click to expand...

Jesus, I've been programming in SilverStripe so long I have to wonder just who writes code like this.

Assuming that the unique id's are numbered as you suggest they are...
Code: 
<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($image->pid % 4) == 3 ) echo('third'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

This will make every third box have the class third so you can apply some css like .third {margin-left: 150px;}

EDIT: I usually prefer in situations like this to use float left or right, (as margins can be difficult cross browser if you're picky. As my original post mentioned, I would have written that class thing like this instead.
Code: 
[COLOR="Red"]class="ngg-gallery-thumbnail-box <?php $class = ((($image->pid - 1) % 4) < 2 ) ? 'left' : 'right'; echo($class); ?>"[/COLOR]
 
Last edited:
kevindosi said:
I know nothing about jquery, but I actually want the class to be added to every 4th, after the 3rd. I'm kind of curious about how to do that, but I've stylized every 4th div in my css and it produced the desired effect. Thanks a lot for everyone's help!
Click to expand...

You don't need jQuery to use the nth-child pseudo-class (even though you could). You can just add this CSS to your stylesheet:

Code: 
div.ngg-gallery-thumbnail-box:nth-child(4n+3) {
  /* your styling here */
}
 
Caleb531 said:
You don't need jQuery to use the nth-child pseudo-class (even though you could). You can just add this CSS to your stylesheet:

Code: 
div.ngg-gallery-thumbnail-box:nth-child(4n+3) {
  /* your styling here */
}
Click to expand...

Internet Explorer doesn't support the nth-child pseudo class
 
nth-child() is a great idea, but IE doesn't support it. jQuery does even in IE though.

But in this example it is actually much easier to 'fix' it in the PHP view. I also noticed that the loop already takes care of incrementing a variable, $i for you so that would be much safer than $image->pid (which I suspect is NOT a simple counting but the ID of the image in the database)

Code: 
<!-- Thumbnails -->
	[COLOR="Red"]<?php $i = 0; ?>[/COLOR]
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($i % $gallery->columns) == ($gallery->columns / 2) ) echo('middle'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

This will work better now for arbitrary $gallery->columns (assuming even number of columns) and using the css class .middle to give it some margin.
 
jared_kipe said:
nth-child() is a great idea, but IE doesn't support it. jQuery does even in IE though.

But in this example it is actually much easier to 'fix' it in the PHP view. I also noticed that the loop already takes care of incrementing a variable, $i for you so that would be much safer than $image->pid (which I suspect is NOT a simple counting but the ID of the image in the database)

Code: 
<!-- Thumbnails -->
	[COLOR="Red"]<?php $i = 0; ?>[/COLOR]
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($i % $gallery->columns) == ($gallery->columns / 2) ) echo('middle'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

This will work better now for arbitrary $gallery->columns (assuming even number of columns) and using the css class .middle to give it some margin.
Click to expand...

Though this solution works very feel, it's not a good practice to alter the code of a plugin. If an update to the plugin is installed the changes will be lost.
 
jsm4182 said:
Though this solution works very feel, it's not a good practice to alter the code of a plugin. If an update to the plugin is installed the changes will be lost.
Click to expand...

I may be off base because I'm used to working in SilverStripe and not Wordpress. But this doesn't have to do with the model or controller for the plugin, but merely the view or 'template'.

In silverstripe, 'themes' can have their own versions of the template, so installing a new version of a module or plugin will use the 'themed' version of the template. I would have to assume Wordpress 'theming' has similar options, else every plugin that generates HTML would need to be extremely generic and not allow 'theme' developers to customize them.
 
Also, just to tout SilverStripe a little more, this template written in the ss_viewer parsed templating language would be:
Code: 
<% control images %>
   <div id="ngg-image-{$pid}" class="nag-gallery-thumbnail-box column-{$Modulus(4)}" $style >
      <div class="nag-gallery-thumbnail">
         <a href="{$imageURL}" title="{$description}" $thumbcode >
         <% if !hidden %>
            <img title="{$alttext}" alt="{$alttext}" src="{$thumbnailURL}" $size />
         <% end_if %>
         </a>
      </div>
      <p align="left" class="imagecaption"><strong>{$alttext}</strong><br /></p>
   </div>
	
   <% if !hidden && MultipleOf(4) %>
      <br style="clear: both" />
   <% end_if %>
<% end_control %>
Note that I hard coded the "columns" attribute to 4 for this theme, as I don't really know what relationship the $gallery->columns variable has to the images variable, so I would probably abstract that away in the controller.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back