[Michelle Forbes]

Hi, thanks for your plugin and template! Gridder… the images are not displaying correctly in the main grid, they are not being cropped to proportion as is on the single entry pages. Also, how do I go about adding some padding around each grid entry, and making the images smaller then the default.

I am assuming that there is no customization for the gridder template via the templates/customization as I do not get a customization option with gridder activated.

And lastly, how do I go about making the dropdown background a different color from the entry title? It seems like it might confuse some if the color is the same as other title areas in the same row above the dropdown info.

Again thank you for your work!

[Steven Zahm]

@ Michelle

re: the images are not displaying correctly in the main grid, they are not being cropped to proportion as is on the single entry pages.

The image crop mode for the grid will be center weighted since most profile shots are centered weighted.

The image crop for the single page is also center weighted perhaps the size difference make them look different.

re: Also, how do I go about adding some padding around each grid entry, and making the images smaller then the default.

There is no way to add more padding. Well, I suppose you could use CSS to add more, but I am not sure who that will affect the display since it was designed to look the way it does.

re: I am assuming that there is no customization for the gridder template via the templates/customization as I do not get a customization option with gridder activated.

Correct, not at this time. However, you still have a lot of configuration options available to you.

re: how do I go about making the dropdown background a different color from the entry title? It seems like it might confuse some if the color is the same as other title areas in the same row above the dropdown info.

Not sure I follow. The activate entry, the entry with the contact panel open, the tint of the color is lighted to highlight it, make it different from the others. Here’s a demo.

Hope I have answered your questions thoroughly!

[Michelle Forbes]

I see you resolved this but I am still not clear on how to get the actual size of the image to be proportionally correct per each image in the grid. This needs to be correct. Is there another template that handles this properly? The single page does keep the whole image to proportion regardless of the original image’s size. Thank you, I figured out the rest of my questions.

[Steven Zahm]

@ Michelle

re: I am still not clear on how to get the actual size of the image to be proportionally correct per each image in the grid. This needs to be correct. Is there another template that handles this properly?

Sorry, but there is no way to set or configure the crop per image. All images will be crop center weighted. This is by far the most common practice when images need to be scaled and cropped to fit a specific dimension. This is exactly how the images is auto scaled and cropped on the single page too. The image itself is a different dimension (width x height) but still cropped center weighted.

If you like the way the image appears on the single page, then adjust the Gridder image size to be the same as the default image size of the single page. Like so:

[connections image_width=300 image_height=225]

Now, that said, if you changed the image size option for the Large image on the Connections : Settings admin page under image, then match the height and width that was set on the Settings page to the shortcode option height and width.

On the Settings page, you can also adjust the crop mode, if you changed it from the default “Crop and resize proportionally to best fit the specified dimensions, maintaining the aspect ratio.” option then the images will be cropped differently, but the crop is still center weighted.

The crop mode can not be adjusted for Gridder thru a shortcode option. It can only be changed by applying a filter to change the core default crop mode applied to all images. To do this:

Install the Code Snippets plugin. Create a new snippet with the following:

function cn_image_atts( $atts ) {

    $atts['zc'] = 2;

    return $atts;
}

add_filter( 'cn_output_default_atts_image', 'cn_image_atts' );

The valid crop mode options are:

• 0 Resize to Fit specified dimensions (no cropping)
• 1 Crop and resize to best fit the dimensions (default behaviour)
• 2 Resize proportionally to fit entire image into specified dimensions, and add borders if required
• 3 Resize proportionally adjusting size of scaled image so there are no borders gaps

[Michelle Forbes]

thanks for taking the time to explain the options. Whereas the images are cropped to fit perfectly on the single page, nothing worked using the exact same settings for the large images. Your code snippet worked very well just by adding it to the functions. Yeah, happy enough here. whew.

Just 2 more questions…hopefully. And maybe I should open up a new thread… I need to have the detail-link “View Profile” at the top, before the excerpt or it can be before the telephone#, etc. I also would like less characters in the excerpt. I tried the shortcode, excerpt_length=0 and this did not work (I set it to 100).

Thanks again!!!

[Michelle Forbes]

Hi again, I figured out the excerpts, still trying to figure out how to move the detail-link.

[Steven Zahm]

@ Michelle

re: excerpt

More or less just an fyi, there will be a minor update to Gridder coming soon. This changes the logic of the excerpt to use the core excerpt function in Connections vs a custom one in Gridder.

Settings the value to 0 will display the entire bio, effectively turning off the excerpt.

re: view profile link

The only to to move this is to edit the template’s PHP file. If that is something you are comfortable doing, here’s how.

Edit the card.php file found in this folder:
../wp-content/plugins/connections-gridder/

Locate this block of code at the bottom of the file:

if ( $atts['show_profile_link'] ) {

    echo '<div class="cn-gridder-detail-link">';

    /** @todo Should use @see cnEntry::getPermalink() instead. */
    cnURL::permalink(
        array(
            'type' => 'name',
            'slug' => $entry->getSlug(),
            'text' => __( 'View Profile', 'cnt_gridder' ),
            'home_id' => $atts['home_id'],
            'force_home' => $atts['force_home'],
            )
        );

    echo '</div>';
}

Move it to right after this line:

if ( $atts['excerpt_length'] ) {

That will move it above the excerpt.

To make your change update safe, follow the tutorial on custom template override files.

Hope that helps!

[Michelle Forbes]

Thank you! Sigh, I did it, putting card.php into folder theme/child/connections-gridder
and there is no change.

I did not include the php tags around the detail link code. Here is how it is added:

        if ( $atts['excerpt_length'] ) {

if ( $atts['show_profile_link'] ) {

    echo '<div class="cn-gridder-detail-link">';

    cnURL::permalink(
        array(
            'type' => 'name',
            'slug' => $entry->getSlug(),
            'text' => __( 'Details', 'cnt_gridder' ),
            'home_id' => $atts['home_id'],
            )
        );

    echo '</div>';
}

I looked in 3 different browsers… what did I miss? thanks again, I really do appreciate you spending the time helping me.

[Steven Zahm]

@ Michelle

What is the exact path you put your override file in? The path you gave does not seem to be correct. So, I’d double check the file path against the paths outlined in the docs for an override file.

Base on what your said, Connections would expect to find your override files here:

../wp-content/theme/{child-theme}/connections-templates/gridder/card.php

Hope that helps!

ps. If you are using page caching, make sure to flush it otherwise you will likely just see the old cached version of the page.

[Michelle Forbes]

that was it! working well, and thank you!

[Author]

Posts