Any CSS experts care to help?

Discussion in 'Web Design and Development' started by kevindosi, Nov 14, 2011.

  1. kevindosi, Nov 14, 2011
    Last edited by a moderator: Nov 17, 2011

    kevindosi macrumors regular

    Joined:
    Mar 16, 2006
    #1
    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!

    [​IMG]
     

    Attached Files:

  2. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #2
    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.
     
  3. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #3
    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.
     
  4. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #4
    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.
     
  5. kevindosi thread starter macrumors regular

    Joined:
    Mar 16, 2006
    #5
    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; ?>
     
  6. kevindosi thread starter macrumors regular

    Joined:
    Mar 16, 2006
    #6
    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?
     
  7. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #7
    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");
     
  8. kevindosi thread starter macrumors regular

    Joined:
    Mar 16, 2006
    #8
    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!
     
  9. jared_kipe, Nov 15, 2011
    Last edited: Nov 15, 2011

    jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #9
    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]
    
     
  10. Caleb531 macrumors 6502

    Caleb531

    Joined:
    Oct 17, 2009
    #10
    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 */
    }
    
     
  11. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #11
    Internet Explorer doesn't support the nth-child pseudo class
     
  12. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #12
    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.
     
  13. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #13
    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.
     
  14. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #14
    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.
     
  15. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #15
    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.
     

Share This Page