Docs

[pkingco]

Hi guys,

So I couldn’t find exactly what I was looking for in the forums so here are my questions. Both are about my portfolio gallery page.

PORTFOLIO GALLERY PAGE
1. I’m Trying to get images to resize to be in a grid format (all images same size no matter the upload size), hiding overflow.

2. I’ve added a hover link to my portfolio gallery, to mimic what I have on the “recent posts” section on my home page.
A Transparent orange overlay with the title and icon appearing upon hover.
Currently the orange exceeds the image border on sides and bottom, almost like a thumbnail shape. And due to this the text is not vertically centered. I’ve included a screen shot.

I may be doing a poor job explaining this. Below are my specs and I’ll respond with login info.

Wordpress version: 4.7.3
X theme version: 4.6.4
Cornerstone version: 1.3.3

Thanks

Garet

[pkingco]

oops the screen shot was too big. I’ve included it here.

Garet

[pkingco]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

Please install force regenerate thumbnails plugin and regenerate your thumbnails. Once done and it didn’t fix the issue then let me know 🙂

Does this happen on newly upload images too?

Thanks!

[pkingco]

Hi Rad,

I have tried to upload a couple of new images but no luck. I’m a little leery about using the “Regenerate Thumbnails” Plug in. Most reviews are really good, but there are a few people that seem to have lost their images, or all the links to their images. That worries me.

The client has told me they can live with the different heights of the images, but I really need to figure out the hover issue.

Any thoughts on that one?

Cheers

Garet

[Rue Nel]

Hey Garet,

Thank you for the clarifications. Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

body #x-iso-container .hentry {
    margin: 0 !important;
    padding: 0 !important;
}

And by default, the portfolio item’s featured image is using an image dimension based on the site layout content width. If you want to use with the same image format which would mean a cropped version. I would highly recommend that you follow these steps:
#1] Please go to Settings > Media and change the “Thumbnail size” to 250 x 2550 and make sure its cropped.
#2] Please install the 3rd party plugin, Regenerate Thumbnails and run it. This is to make sure that your images will be resize to 250×250 in dimension. You do not have to worry because this plugin has been used a thousand times and it is safe.
#3] And finally, since the child theme is set up, please add the following code in your child theme’s functions.php file

function x_featured_image( $cropped = '' ) {

	$stack     = x_get_stack();
	$fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

	if ( has_post_thumbnail() ) {

	  if ( $cropped == 'cropped' ) {
	    if ( $fullwidth ) {
	      $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
	    } else {
	      $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
	    }
	  } else {
	    if ( $fullwidth ) {
	      $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
	    } else {
	      $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
	    }
	  }

	  if ( is_page('portfolio') || is_page_template('template-layout-portfolio.php') ) {
	  	$thumb = get_the_post_thumbnail( NULL, 'thumbnail', NULL );
	  }

	  switch ( is_singular() ) {
	    case true:
	      printf( '<div class="entry-thumb">%s</div>', $thumb );
	      break;
	    case false:
	      printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
	        esc_url( get_permalink() ),
	        esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
	        $thumb
	      );
	      break;
	  }

	}

}

We would loved to know if this has work for you. Thank you.

[pkingco]

Hi Rue,

Thanks for the in-depth response. I added the CSS code and I’ve gone through the steps below.

#1] Please go to Settings > Media and change the “Thumbnail size” to 250 x 2550 and make sure its cropped.
#2] Please install the 3rd party plugin, Regenerate Thumbnails and run it. This is to make sure that your images will be resize to 250×250 in dimension. You do not have to worry because this plugin has been used a thousand times and it is safe.
#3] And finally, since the child theme is set up, please add the following code in your child theme’s functions.php file

So the above steps did what you are showing me in your screen shot. It removed the white space between the images, and that brought the orange hover inline with the images. But my client has decided they would like white space between the images so the don’t touch, and if possible to make the image containers all the same size, height x width, with image overflow hidden. I’ve included a screen shot sample I did in Photoshop as an example (all images are placeholder).

I did attempt to add space between images by adjusting the css below. But the grid is aligned based on page size (I think), so the grid left aligns with three instead of four across. Anyway hope this isn’t confusing.

body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0 !important;
}

Any in-site would be great!

Thanks Rue

Garet

[Paul R]

Hi Garet,

You need to adjust the width to make it fit.

@media (min-width: 1200px) {
.x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 24%;
}

body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0 !important;
}
}

Hope that helps

[pkingco]

Hi Paul,

Thanks for the update. This is working great for the hover issue on my desktop.

A couple of things of note.
1. Images are still not filling the boxes (200px high). I’ve left the black background for example.
2. Still having issues with the hover extending beyond the images on smaller screen size (different media).

Not sure if a @media would fix the issue, but I attempted to fix myself to no avail. Its a bit beyond my limited coding skills.

Thanks for all the help on this issue, you guys are awesome.

PS. looking forward to the upgrade, and all the new features 🙂

Cheers

Garet

[Rue Nel]

Hey Garet,

The code added only affect the screen size greater that 1200 pixel. To make sure that it also works for smaller devices, please also add this code:

@media(max-width: 1199px){
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0 !important;
  }
}

@media(max-width: 767px){
  body #x-iso-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

Hope this helps. Please let us know how it goes.

[pkingco]

Thanks Rue,

But still the same as before.

1. Images are still not filling the boxes (200px high). I’ve left the black background for example.
2. Still having issues with the hover extending beyond the images on smaller screen size (different media).

Maybe some of my other code is interfering?

Any other ides?

Cheers

Garet

[Rue Nel]

Hey Garet,

Please understand that the images has their own image dimension. Though we added a code so that each of the grid boxes will have 200 pixels in heght, that doesn’t mean that the images will follow. The height of the image is relative to the width. If you want to force the image to have a height of 200 pixel, it will have a different effect because there might be a possibility that the image will be stretched out. Please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

body #x-iso-container .hentry .entry-thumb img {
    min-height: 200px;
    min-width: 20%;
    width: auto !important;
}

You have inserted an invalid. Please update it and make use of this code:

@media (min-width: 1200px) {
  .x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 24%;
  }

  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0 !important;
  }
}

@media(max-width: 1199px){
  body #x-iso-container .hentry {
    margin: 5px !important;
    padding: 0 !important;
  }
}

@media(max-width: 767px){
  body #x-iso-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

Hope this helps. Kindly let us know.

[pkingco]

Hi Rue,

Thanks for all the assist on these issues. I know this is above and beyond so I really appreciate it. We are so close 🙂

So to the first issue:
1. Images are not filling the boxes (200px high) proportionally without stretching.

It still isn’t doing what I was hoping for. I wanted to mimic what happens to the images in the “Recent posts” feature. But after reviewing that code, it looks (I think) like those images are being pulled in as background images. Thereby allowing the image box to act like a window not a container, keeping the image proportional, no stretching.

So to that end lets just skip this question. It would seem to be a bigger deal that just adjusting the css, and it’s not crucial to the lunching of the website.

Second question:
2. Having issues with the hover extending beyond the images on smaller screen size (different media).

This is now fixed, but… the gallery alignment is off.

The code provided works very well when viewing in “customizer” and clicking the view size (small icons at bottom of window), but when manually resizing my browser window the gallery left aligns instead of shifting proportionally in the window.

We were able to fix this issue on a large viewing window by using this code.

@media (min-width: 1200px) {
.x-iso-container.x-iso-container-portfolio.cols-4>.hentry {
    width: 24%;
}

I’ve attached some screen shots.

Again thank you for all the help!!

Cheers

Garet

[Rue Nel]

Hello There,

Thank you for the clarifications. I have inspected your custom css and it seems that some blocks overrides the other blocks. I would highly recommend that you re arrange your custom css. The best css practice should be like this:

element {
  // your styling
}

#element-ID {
  // your styling
}

.element-class {
  // your styling
}

@media(min-width: ##px){
  element {
    // your styling
  }

  #element-ID {
    // your styling
  }

  .element-class {
    // your styling
  }
}

@media(max-width: ##px){
  element {
    // your styling
  }

  #element-ID {
    // your styling
  }

  .element-class {
    // your styling
  }
}

Take note that most of the @media blocks appears right after the other custom css. And also, indentation really helps the code in order and easy to spot any mistakes in the code.

Hope this helps. Please let us know how it goes.

[pkingco]

Hi Rue,

Yeah, I’m a bit slash a burn when it comes to entering the code. Thanks for this tip, it really helped clean everything up for when I turn this over to my client.

But sadly it didn’t fix the issue at hand.
Having issues with the hover extending beyond the images on smaller screen size (different media).

I might have misunderstood what I was supposed to do. I organized the code in two different ways and then tested both to be sure, but no change to the site with either version.

1. I Organized based on “Best Practice” above, but kept them organized by “category title” for ease or use later. ie. /* Footer */ or /* Image hover */

2. I removed all “category titles” and applied the “Best Practice” to all of the code.

I can’t figure out which blocks are doing the overriding.

Thanks for being patient with me!

Cheers

Garet

[Author]

Posts