Solved

Images on front page

Posted on 2014-01-09
13
300 Views
Last Modified: 2014-01-16
Hi Guys,

On my website http://thedancingsoul.ie is there way of changing the css of  images below of all the different peoples faces so that they dont look so square and they dont look so oversized and fit properly??
0
Comment
Question by:jonathanduane2010
  • 8
  • 5
13 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39767561
How do you want them to look if not square?

All the images are the same size so to make them look better you'll need to retake the photos or add more background to the images via layering using photoshop etc
0
 

Author Comment

by:jonathanduane2010
ID: 39767578
Can i make them bigger on the front page, if you click on each image and it will bring you to a post and you will see they look fine there,
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 39767608
This will be to do with your template.. what are you using to display the front page?  more specifically the images?
0
 

Author Comment

by:jonathanduane2010
ID: 39767668
I am not too sure, i think is the single portfolio.php

<?php get_header(); ?>
		
		<?php
			
				if(have_posts()) 
					while(have_posts()): 
						the_post();
			?>	
		
		
		<div class="bread-crumbs"><?php echo of_get_option('bread_crumb'); ?> <a href="<?php echo site_url(); ?>"><?php _e('Home','progressionstudios'); ?></a> &rsaquo; <?php echo $post->post_title; ?></div>
		
		
		<div class="content-container">
			
			
			<div class="page-content">
				
				
				<?php if(of_get_option('portfolio_pagination_nav', 'yes') == 'yes'): ?>
				<ul class="sub-pagination">
					<li><?php previous_post_link( '%link', __( '&lsaquo; Previous', 'progressionstudios' ) ); ?></li>
					<li><?php next_post_link( '%link', __( 'Next &rsaquo;', 'progressionstudios' ) ); ?></li>
				</ul>
				<?php endif; ?>
					
					
					
				<h1 class="page-title"><?php the_title(); ?></h1>
				
				<div class="portfolio-single">
			
					<?php if(of_get_option('portfolio_single_style', 'full') == 'full'): ?>
					
					<!-- START AnythingSlider -->
					<ul id="slider">
						
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_2', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
								
								
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_2');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, 'height="510"', $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, 'width="900"', $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;
								?>
							

							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_3', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
								
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_3');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='510'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='900'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
								

							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_4', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
							
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_4');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='510'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='900'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_5', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
							
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_5');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='510'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='900'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						
						<?php if(get_post_meta(get_the_id(), 'pyre_remove_featured_image', true)): ?>
						
						<?php else: ?>
						
						<?php
						$args = array(
						    'post_type' => 'attachment',
						    'numberposts' => '-1',
						    'post_status' => null,
						    'post_parent' => $post->ID,
							'orderby' => 'menu_order',
							'order' => 'ASC'
						);
						$attachments = get_posts($args);
						if($attachments):
						    foreach($attachments as $attachment):
						?>
						
						<?php $image = wp_get_attachment_image_src($attachment->ID, 'full'); ?>
						<?php $image_2 = wp_get_attachment_image_src($attachment->ID, 'portfolio-single'); ?>
						
						<li>
							<a href="<?php echo $image[0]; ?>" rel="prettyPhoto[gallery1]" title=""><img src="<?php echo $image_2[0]; ?>" alt="<?php echo $attachment->post_title; ?>" /></a>
						</li>
						
						<?php endforeach; endif; ?>
						
						<?php endif; ?>
						
					</ul>
					
					<script type="text/javascript">
					jQuery(document).ready(function($) {
						$('#slider').anythingSlider({
							delay               : <?php echo of_get_option('portfolio_speed', '3500'); ?>,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
							animationTime       : <?php echo of_get_option('portfolio_transition', '400'); ?>,       // How long the slideshow transition takes (in milliseconds)
							buildArrows         : <?php echo of_get_option('portfolio_arrows', 'false'); ?>,      // If true, builds the forwards and backwards buttons
							buildNavigation     : true,      // If true, buildsa list of anchor links to link to each panel
							autoPlay            : <?php echo of_get_option('portfolio_timer', 'true'); ?>,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
							hashTags            : false,      // Should links change the hashtag in the URL?
							resizeContents      : true,
							addWmodeToObject    : 'transparent',
							startStopped        : false,     // If autoPlay is on, this can force it to start stopped
							pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
							resumeOnVideoEnd    : true      // If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video has completed
						});
					});
					</script>
					
					
					<div class="portfolio-details"><?php _e('by','progressionstudios'); ?> <?php echo  the_author_posts_link(); ?> <?php _e('on','progressionstudios'); ?> <?php the_time('F d, Y'); ?></div>

					<?php the_content(); ?>
					
					<?php else: ?>
					
					
					<div class="alignright">
					
					<!-- START AnythingSlider -->
					<ul id="slider-2">
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_2', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
								
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_2');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='280'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='500'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
								
								

							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_3', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
							
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_3');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='280'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='500'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_4', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
							
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_4');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='280'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='500'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						<?php if(get_post_meta(get_the_id(), 'pyre_video_embed_link_5', true)): ?>
							<!-- SLIDE OPEN -->
							<li>
							
								<?php
								$values = get_post_custom_values('pyre_video_embed_link_5');
								$pattern = "/height=\"[0-9]*\"/";
								$values = preg_replace($pattern, "height='280'", $values);
								$pattern = "/width=\"[0-9]*\"/";
								$values = preg_replace($pattern, "width='500'", $values);
								$shortcode_output = do_shortcode($values[0]);
								print $shortcode_output;										
								?>
							
							</li>
							<!-- END SLIDE -->
						<?php endif; ?>
						
						
						<?php if(get_post_meta(get_the_id(), 'pyre_remove_featured_image', true)): ?>
						
						<?php else: ?>
						
						<?php
						$args = array(
						    'post_type' => 'attachment',
						    'numberposts' => '-1',
						    'post_status' => null,
						    'post_parent' => $post->ID,
							'orderby' => 'menu_order',
							'order' => 'ASC'
						);
						$attachments = get_posts($args);
						if($attachments):
						    foreach($attachments as $attachment):
						?>
						
						<?php $image = wp_get_attachment_image_src($attachment->ID, 'full'); ?>
						<?php $image_2 = wp_get_attachment_image_src($attachment->ID, 'portfolio-single-2'); ?>
						
						<li>
							<a href="<?php echo $image[0]; ?>" rel="prettyPhoto[gallery1]" title=""><img src="<?php echo $image_2[0]; ?>" alt="<?php echo $attachment->post_title; ?>" /></a>
						</li>
						
						<?php endforeach; endif; ?>
						
						<?php endif; ?>
						
					</ul>
					
					
					<br/>
					<div class="clearfix"></div>
					</div><!-- close .alignright -->
				
					<script type="text/javascript">
					jQuery(document).ready(function($) {
						$('#slider-2').anythingSlider({
							delay               : <?php echo of_get_option('portfolio_speed', '3500'); ?>,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
							animationTime       : <?php echo of_get_option('portfolio_transition', '400'); ?>,       // How long the slideshow transition takes (in milliseconds)
							buildArrows         : <?php echo of_get_option('portfolio_arrows', 'false'); ?>,      // If true, builds the forwards and backwards buttons
							buildNavigation     : true,      // If true, buildsa list of anchor links to link to each panel
							autoPlay            : <?php echo of_get_option('portfolio_timer', 'true'); ?>,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
							hashTags            : false,      // Should links change the hashtag in the URL?
							resizeContents      : true,
							addWmodeToObject    : 'transparent',
							startStopped        : false,     // If autoPlay is on, this can force it to start stopped
							pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
							resumeOnVideoEnd    : true      // If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video has completed
						});
					});
					</script>
					
					
					
					<div class="portfolio-single-small-left">
					<div class="portfolio-details"><?php _e('by','progressionstudios'); ?> <?php echo  the_author_meta('user_nicename',$post->post_author); ?> <?php _e('on','progressionstudios'); ?> <?php the_time('F d, Y'); ?></div>
					
					<?php the_content(); ?>
					
					
					</div>
					
					<?php endif; ?>
					
					<div class="clearfix"></div>
					<hr/>
					
					<div class="portfolio-tags"> 
						
							<?php
								echo get_post_meta(get_the_id(), 'pyre_video_embed_link', true);
							 echo get_the_term_list( $post->ID, 'type', __( '<strong>Tags</strong>: ', 'progressionstudios' ), ', ', '' ); 
								// Fetch tags of this post, and show them one by one.
							/*	$posttags = get_the_tags(); 
								if($posttags) //to avoid errors when there are no tags for a post.
								$counterx=0;
								foreach($posttags as $tag)
								{
									echo '<a href="'.get_tag_link($tag->term_id).'" alt="'.$tag->name.'" title="'.$tag->name.'">'.$tag->name.'</a>';
									if(!$counterx)
										echo ', ';
									$counterx++;
								}	*/
							
							?>
					</div>
					
			
					
					<div class="social-networking-portfolio">
						<?php if(of_get_option('googeplus_icon', 'yes') == 'yes'): ?>
						<div class="google-plus">
							<!-- Place this tag where you want the +1 button to render -->
							<g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone>
							<!-- Place this render call where appropriate -->
							<script type="text/javascript">
							  (function() {
							    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
							    po.src = 'https://apis.google.com/js/plusone.js';
							    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
							  })();
							</script>
						</div>
						<?php endif; ?>
						
						<?php if(of_get_option('twitter_icon_button', 'yes') == 'yes'): ?>
						<div class="twitter-button"><a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="Check out this site" class="twitter-share-button" target="_blank">Share on Twitter</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
						<?php endif; ?>
						
						<?php if(of_get_option('facebook_icon_button', 'yes') == 'yes'): ?>
						<div><a name="fb_share" type="button_count"  share_url="<?php the_permalink(); ?>" target="_blank">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
						<?php endif; ?>
						
						<?php if(of_get_option('facebook_like_button', 'yes') == 'yes'): ?>
						<div><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=true&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=23" scrolling="no" allowtransparency="true" frameborder="0" style="border:none; overflow:hidden; width:85px; height:23px; background:transparent; margin-right:-15px;"></iframe></div>
						<?php endif; ?>
					</div><!-- close .social-networking-portfolio -->
					
					
					<div class="clearfix"></div>
					
					
					
					<?php if(of_get_option('portfolio_comments', 'yes') == 'yes'): ?>
					
					
					<!-- if comments for portfolio -->
					<hr>
					
					<div id="comments">
						
						<?php comments_template(); ?>
						

					</div><!-- #comments -->
					
					<?php endif; ?>
					
					
					
					
					
				</div><!-- close .portfolio-single -->
	
			</div><!-- close .page-content -->
			
			
			
			
			<div class="clearfix"></div>
				
			
		</div><!-- close .content-container -->
		
		<div class="content-container-base-pagination">
			
		</div><!-- close .content-container-base or .content-container-base-pagination -->
		
			<?php
				endwhile;
			?>
	
<?php get_footer(); ?>

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39767735
Just looking at the markup, there seem to be multiple versions of the image at different resolutions.  Is this correct?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39767739
http://www.thedancingsoul.ie/wp-content/uploads/2013/11/

Shows there are multiple versions of the same image at different resolutions
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:jonathanduane2010
ID: 39768225
so how can i make the ones on that page show at a diff resolution??
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39769355
It's the grid Plugin your using on that front page to display them. I'll also look through your template
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39775717
Looks like you've fixed it?
0
 

Author Comment

by:jonathanduane2010
ID: 39783809
yes! thank you for your help!
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39783825
Did any of the comments help? otherwise please post how you got your solution and accept that as the answer. I'd like to know how you got there! :-)
0
 

Author Comment

by:jonathanduane2010
ID: 39783845
Hi Rob, there seemed to be a setting in the template buried away, that let me adjust the images set on that page so seeing as you mentioned it looked like a template issue, i think you deserve the points :)
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39784037
Thanks Jonathon
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now