Any CSS experts care to help?

[kevindosi]

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!

https://forums.macrumors.com/attachment.php?attachmentid=312194&stc=1&d=1321341302

 

[jared_kipe]

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.

 

[jsm4182]

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.

 

[jared_kipe]

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.

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.

 

[kevindosi]

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:

<!-- 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; ?>

 

[kevindosi]

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?

 

[jsm4182]

Like jared_kipe suggested you could use jQuery to add a class to every third.

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

 

[kevindosi]

Like jared_kipe suggested you could use jQuery to add a class to every third.

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

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!

 

[jared_kipe]

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:

<!-- 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; ?>

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...

<!-- 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.

[COLOR="Red"]class="ngg-gallery-thumbnail-box <?php $class = ((($image->pid - 1) % 4) < 2 ) ? 'left' : 'right'; echo($class); ?>"[/COLOR]

 

[Caleb531]

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!

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:

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

 

[jsm4182]

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:

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

Internet Explorer doesn't support the nth-child pseudo class

 

[jared_kipe]

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)

<!-- 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.

 

[jsm4182]

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)

<!-- 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.

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.

 

[jared_kipe]

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.

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.

 

[jared_kipe]

Also, just to tout SilverStripe a little more, this template written in the ss_viewer parsed templating language would be:

<% 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.