Thumbnails quality and size

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 8 replies, 2 voices, and was last updated 10 years by Kyle – SUPPORT.

Viewing 9 posts - 1 through 9 (of 9 total)

Back to forum

Posted in: Cardinal

September 22, 2014 at 7:25 am #113157

lublasco

Member

Post count: 16

1) (Page: Inicio)
Thumbnail images in this portofolio gallery are almost the same size and weight.
However three of them (the lower ones) are shown with a correct quality, but the upper ones
are shown in low quality. I regenerated thumbnails but nothing changed. How could I achieve
the correct quality in the 3 upper images?

2) (Page: Discografía > Sole Giménez)
Thumbnails appear in a 4:3 ratio, so album covers are shown cropped. In page builder, standard gallery is chosen. I would like the thumbnails to be square.

Thanks in advance for your support.

September 23, 2014 at 1:24 pm #113733

Kyle – SUPPORT

Moderator

Post count: 35880

There seems to be some issues in the backend of your site, please update all of your plugins, wordpress and the theme so that everything is up to date.

The page should show the page builder in the backend, then on your images you have selected ‘thumbnail’ for the size for the top 3, you need to select ‘full’ or ‘large’

– Kyle

September 23, 2014 at 2:49 pm #113786

lublasco

Member

Post count: 16

Thanks, Kyle.

Regarding issue 1: yours answer was perfect. Solved. Thank you.

Regarding issue 2: still waiting for your solution. I have chosen “standard gallery” and “ratio 1/1”, but the images are cropped. Annoying is that the English version of this page (with apparently the same settings show not cropped images.

Thanks for your help.

P.S: Back-end is now working correctly at my end.

September 23, 2014 at 2:52 pm #113788

lublasco

Member

Post count: 16

Forgot:

– I updated to Cardinal 1.80 before writing the above answer.
– Now the main menu in http://www.xxxxx.com/inicio is not shown correctly. The last option “Tienda” is dropped to a next line. Could you also have a look? Thanks.

September 23, 2014 at 3:17 pm #113799

Kyle – SUPPORT

Moderator

Post count: 35880

This reply has been marked as private.

September 23, 2014 at 3:59 pm #113814

lublasco

Member

Post count: 16

Thanks, Kyle.

– Menu issue just worked fine.

– Images issue: I don’t understand why it is not possible to use the standard gallery mode with normal images (the most usual mode I suppose). I don’t like masonry mode for portfolio showcases because yoy just don’t control the order of the items. That’s exactly what’s happening if I use it in other sister porfolio-pages like /discografia/colaboraciones/.

Would need a solution with the standard gallery mode.

September 23, 2014 at 4:21 pm #113823

Kyle – SUPPORT

Moderator

Post count: 35880

Ok for the standard gallery you would need to use a child theme and add this to your functions.php file:

/* PORTFOLIO THUMBNAIL
	================================================== */
	if (!function_exists('sf_portfolio_thumbnail')) { 
		function sf_portfolio_thumbnail($display_type = "gallery", $multi_size = "", $multi_size_ratio = "1/1", $columns = "2", $hover_show_excerpt = "no", $excerpt_length = 20, $gutters = "yes", $fullwidth = "no") {
			
			global $post, $sf_options;
			
			$portfolio_thumb = $thumb_image_id = $thumb_image = $thumb_gallery = $video = $item_class = $link_config = $port_hover_style = $port_hover_text_style = '';
			$thumb_width = 400;
			$thumb_height = 300;
			$video_height = 300;
			
			if ($columns == "1") {
				$thumb_width = 1200;
				$thumb_height = 900;
				$video_height = 900;  				    				
			} else if ($columns == "2") {
				$thumb_width = 800;
				$thumb_height = 600;
				$video_height = 600;
			} else if ($columns == "3" || $columns == "4") {
				if ($fullwidth == "yes") {
					$thumb_width = 500;
					$thumb_height = 375;
					$video_height = 375;			
				} else {
					$thumb_width = 400;
					$thumb_height = 300;
					$video_height = 300;
				}
			}
			
			if ($display_type == "multi-size-masonry") {	
				if ($multi_size_ratio == "4/3") {
					if ($multi_size == "wide-tall") {
						$thumb_width = 1000;
						$thumb_height = 750;
					} else if ($multi_size == "tall") {
						$thumb_width = 500;
						$thumb_height = 750;
					} else if ($multi_size == "wide") {
						$thumb_width = 1000;
						$thumb_height = 375;
					} else if ($multi_size == "standard") {
						$thumb_width = 500;
						$thumb_height = 375;
						$video_height = 375;
					}			
				} else {	
					if ($multi_size == "wide-tall") {
						$thumb_width = 900;
						$thumb_height = 900;
					} else if ($multi_size == "tall") {
						$thumb_width = 450;
						$thumb_height = 900;
					} else if ($multi_size == "wide") {
						$thumb_width = 900;
						$thumb_height = 450;
					} else if ($multi_size == "standard") {
						$thumb_width = 450;
						$thumb_height = 450;
						$video_height = 450;
					}
				}
				
				if ($gutters == "yes" && $multi_size == "tall") {
					$thumb_height = $thumb_height + 50;
				}
				if ($gutters == "yes" && $multi_size == "wide-tall") {
					$thumb_height = $thumb_height + 15;
				}
			}
			
			if ($display_type == "masonry" || $display_type == "masonry-gallery") {
				$thumb_height = NULL;
			}
			
			$thumb_type = sf_get_post_meta($post->ID, 'sf_thumbnail_type', true);
			$thumb_image = rwmb_meta('sf_thumbnail_image', 'type=image&size=full');
			$thumb_video = sf_get_post_meta($post->ID, 'sf_thumbnail_video_url', true);
			if ($display_type == "multi-size-masonry" && $multi_size != "") {
				$thumb_gallery = rwmb_meta( 'sf_thumbnail_gallery', 'type=image&size=large-square' );
			} else {
				if ($columns == "2") {
					$thumb_gallery = rwmb_meta( 'sf_thumbnail_gallery', 'type=image&size=thumb-image-twocol' );
				} else {
					$thumb_gallery = rwmb_meta( 'sf_thumbnail_gallery', 'type=image&size=thumb-image' );				
				}
			}
			$thumb_link_type = sf_get_post_meta($post->ID, 'sf_thumbnail_link_type', true);
			$thumb_link_url = sf_get_post_meta($post->ID, 'sf_thumbnail_link_url', true);
			$thumb_lightbox_thumb = rwmb_meta( 'sf_thumbnail_image', 'type=image&size=large' );
			$thumb_lightbox_image = rwmb_meta( 'sf_thumbnail_link_image', 'type=image&size=large' );
			$thumb_lightbox_video_url = sf_get_post_meta($post->ID, 'sf_thumbnail_link_video_url', true);
			$thumb_lightbox_video_url = sf_get_embed_src($thumb_lightbox_video_url);
			$port_hover_bg_color = sf_get_post_meta($post->ID, 'sf_port_hover_bg_color', true);
			$port_hover_text_color = sf_get_post_meta($post->ID, 'sf_port_hover_text_color', true);
			
			if ($port_hover_bg_color != "") {
				$overlay_opacity = $sf_options['overlay_opacity'];
				if ($overlay_opacity == 100) {
					$overlay_opacity = '1';
				} else {
					$overlay_opacity = '0.'.$overlay_opacity;
				}
				$port_hover_bg_rgb = sf_hex2rgb($port_hover_bg_color);
				$port_hover_style = 'style="background-color:rgba('.$port_hover_bg_rgb['red'].','.$port_hover_bg_rgb['green'].','.$port_hover_bg_rgb['blue'].','.$overlay_opacity.');"';
			} 
			
			if ($port_hover_text_color != "") {
				$port_hover_text_style = 'style="color: '.$port_hover_text_color.';"';
			}
			
			foreach ($thumb_image as $detail_image) {
				$thumb_image_id = $detail_image['ID'];
				$thumb_img_url = $detail_image['url'];
				break;
			}
											
			if (!$thumb_image) {
				$thumb_image = get_post_thumbnail_id();
				$thumb_image_id = $thumb_image;
				$thumb_img_url = wp_get_attachment_url( $thumb_image, 'full' );
			}
				
			$thumb_lightbox_img_url = wp_get_attachment_url( $thumb_lightbox_image, 'full' );
			$image_alt = esc_attr( sf_get_post_meta($thumb_image_id, '_wp_attachment_image_alt', true) );
			
			$item_title = get_the_title();
			$item_subtitle = sf_get_post_meta($post->ID, 'sf_portfolio_subtitle', true);
			$permalink = get_permalink();
			$item_link = sf_portfolio_item_link();	
			$custom_excerpt = sf_get_post_meta($post->ID, 'sf_custom_excerpt', true);
			$post_excerpt = '';
			if ($custom_excerpt != '') {
			$post_excerpt = sf_custom_excerpt($custom_excerpt, $excerpt_length);
			} else {
			$post_excerpt = sf_excerpt($excerpt_length);
			}
			
			if ($display_type == "gallery" || $display_type == "masonry-gallery" || $display_type == "multi-size-masonry") {
			$portfolio_thumb .= '<figure class="animated-overlay overlay-style">'. "\n";
			} else {
			$portfolio_thumb .= '<figure class="animated-overlay overlay-alt">'. "\n";				
			}
			
			if ($thumb_type == "video") {
				
				$video = sf_video_embed($thumb_video, $thumb_width, $video_height);
				$portfolio_thumb .= '<div class="video-thumb">'.$video.'</div>';
				
			} else if ($thumb_type == "slider") {
				
				$portfolio_thumb .= '<div class="flexslider thumb-slider"><ul class="slides">'. "\n";
							
				foreach ( $thumb_gallery as $image )
				{
				    $portfolio_thumb .= "<li><a ".$item_link['config']."><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$image['alt']}' /></a></li>". "\n";
				}
																
				$portfolio_thumb .= '</ul></div>'. "\n";
				
			} else {
				
				if ($thumb_type == "image" && $thumb_img_url == "") {
					$thumb_img_url = "default";
				}
			
				$image = sf_aq_resize( $thumb_img_url, $thumb_width, $thumb_height, true, false);
				
				if ($image) {

					$portfolio_thumb .= '<a '.$item_link['config'].'></a>';
					
					if ($display_type == "multi-size-masonry") {
						$portfolio_thumb .= '<div class="multi-masonry-img-wrap"><img itemprop="image" src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="'.$image_alt.'" /></div>'. "\n";	
					} else {
						$portfolio_thumb .= '<img itemprop="image" src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="'.$image_alt.'" />'. "\n";				
					}
																				
					$portfolio_thumb .= '<div class="figcaption-wrap"></div>';
					
					if ($item_subtitle != "" && $hover_show_excerpt == "no" && ($display_type == "gallery" || $display_type == "masonry-gallery" ||  $display_type == "multi-size-masonry")) {
					$portfolio_thumb .= '<figcaption '.$port_hover_style.'><div class="thumb-info">';
					} else if ($display_type == "standard" || $display_type == "masonry") {
					$portfolio_thumb .= '<figcaption '.$port_hover_style.'><div class="thumb-info thumb-info-alt">';						
					} else if ($hover_show_excerpt == "yes" && ($display_type == "gallery" || $display_type == "masonry-gallery")) {
					$portfolio_thumb .= '<figcaption '.$port_hover_style.'><div class="thumb-info thumb-info-excerpt">';						
					} else {
					$portfolio_thumb .= '<figcaption '.$port_hover_style.'><div class="thumb-info">';
					}
					if ($display_type == "gallery" || $display_type == "masonry-gallery" || $display_type == "multi-size-masonry") {
						if ($hover_show_excerpt == "yes") {
							$portfolio_thumb .= '<h4 itemprop="name headline" '.$port_hover_text_style.'>'.$item_title.'</h4>';
							if ($post_excerpt != "") {
								$portfolio_thumb .= '<div class="name-divide"></div>';
								$portfolio_thumb .= '<div itemprop="description" '.$port_hover_text_style.'>'.$post_excerpt.'</div>';
							}
						} else {
							$portfolio_thumb .= '<h4 itemprop="name headline" '.$port_hover_text_style.'>'.$item_title.'</h4>';
							if ($item_subtitle != "") {
								$portfolio_thumb .= '<div class="name-divide"></div>';
								$portfolio_thumb .= '<h5 itemprop="name alternativeHeadline" '.$port_hover_text_style.'>'.$item_subtitle.'</h5>';
							}
						}
					} else {
						$portfolio_thumb .= '<i class="'.$item_link['icon'].'"></i>';
					}
					$portfolio_thumb .= '</div></figcaption>';
				}
			}
			
			$portfolio_thumb .= '</figure>'. "\n";
			
			return $portfolio_thumb;
		}
	}

And change the values for:

else if ($columns == "3" || $columns == "4") {
				if ($fullwidth == "yes") {
					$thumb_width = 500;
					$thumb_height = 375;
					$video_height = 375;			
				} else {
					$thumb_width = 400;
					$thumb_height = 300;
					$video_height = 300;

– Kyle

September 24, 2014 at 8:20 am #113974

lublasco

Member

Post count: 16

This reply has been marked as private.

September 24, 2014 at 8:27 am #113977

Kyle – SUPPORT

Moderator

Post count: 35880

I’ve added the code for you and everything seems fine. You just need to change the values to the sizes you would like to use

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

Support Request

Support Policy

Privacy Policy