Post Carousel Customization

  • Resolved freedealsandoffer

    (@freedealsandoffer)


    5 years, 11 months ago

    Hi Team,

    Thanks for the lovely add-on. I am a big fan of this.
    Recently I have started using ‘Post Carousel’ widget and I found it quite useful as per my requirement. But I need to tweak it so that it looks good as per my site theme.
    But doing so I broke my site and I reverted back to normal. Need your help in doing the customization.
    Here is the test page I’ve created for your reference –
    https://freedealsandoffers.com/post-carousel-test/

    Could you please help me achieve following things –
    1. On image hover, no text should be displayed and image should have some other hover animation. On clicking, it should open the page in new tab.
    2. Title should not be trimmed and display full text instead of … at the end.
    3. Can we display post title in vertically same line? Currently it is getting displayed up and down as per image height and size.

    Thank you in advance for your help on this.
    Awaiting your expert reply on this.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author livemesh

    (@livemesh)

    5 years, 11 months ago

    You can use the following custom CSS – 

    .lae-posts-carousel .lae-posts-carousel-item .lae-project-image .lae-image-info { display: none; }

.lae-posts-carousel .lae-posts-carousel-item .lae-entry-text-wrap .entry-title a { white-space: normal;}

    For opening the link in a new tab, we need to customize the addon a bit by using one of the WP hooks/filters provided by the plugin. Have this in your child theme functions.php – 

    function mytheme_modify_posts_carousel_entry_title($title, $post_id, $settings) {

    $entry_title = '<' . $settings['entry_title_tag']
        . ' class="entry-title"><a href="' . get_permalink($post_id)
        . '" title="' . get_the_title($post_id)
        . '" rel="bookmark" target="_blank">' . get_the_title($post_id)
        . '</a></' . $settings['entry_title_tag'] . '>';

    return $title;

}

add_filter('lae_posts_carousel_entry_title', 'mytheme_modify_posts_carousel_entry_title', 10, 3);

    We will add the option to hide the thumbnail text and also open link in new window in the upcoming update so that this custom code would no longer be required then.

    Thread Starter freedealsandoffer

    (@freedealsandoffer)

    5 years, 11 months ago

    Thanks. Some of the points really worked
    Few points which are still missing and need your guidance:
    1. After clicking on image, it is not opening in new tab. (I’ve copy pasted your function as it is in my child theme)
    2. Can we display post title in vertically same line? Currently it is getting displayed up and down as per image height and size.

    Awaiting your inputs.

    Thread Starter freedealsandoffer

    (@freedealsandoffer)

    5 years, 11 months ago

    One more question –
    Can we control the transparency of the image on hover?

    Plugin Author livemesh

    (@livemesh)

    5 years, 11 months ago

    Sorry there was a slight mistake in my earlier posted code. Can you try this – 

    function mytheme_modify_posts_carousel_entry_title($title, $post_id, $settings) {

    $entry_title = '<' . $settings['entry_title_tag']
        . ' class="entry-title"><a href="' . get_permalink($post_id)
        . '" title="' . get_the_title($post_id)
        . '" rel="bookmark" target="_blank">' . get_the_title($post_id)
        . '</a></' . $settings['entry_title_tag'] . '>';

    return $entry_title;

}

add_filter('lae_posts_carousel_entry_title', 'mytheme_modify_posts_carousel_entry_title', 10, 3);

    If you need the items to align well, you need to set the image height to be the same across all items using the image size option as seen here – https://imgur.com/cXtwTjM.

    To control background hover transparency, pls modify the percentage below in custom CSS to your needs. For some reason, the background hover color/opacity customization option available in the Style tab isn’t working at present. Will get the same fixed. 

    .lae-posts-carousel .lae-posts-carousel-item .lae-project-image:hover img {
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}
    Thread Starter freedealsandoffer

    (@freedealsandoffer)

    5 years, 11 months ago

    Hi,

    Thanks for your updated code. But it has below issues after updating the function as it is-
    1. Title of the post is changed to postname by default.
    2. New tab is opening by clicking the Title below, but not by clicking on the image.

    Awaiting your expert support.

    Plugin Author livemesh

    (@livemesh)

    5 years, 11 months ago

    Not sure what you mean by title of the post changed to post name by default. Should be any different than the post title? The behavior should be same as before since we use the existing code and slightly tweaked the link target to open in a new window. Nothing else was changed.

    Thread Starter freedealsandoffer

    (@freedealsandoffer)

    5 years, 11 months ago

    Hi,

    1. I mean that the title in the carousel has been changed to the page name. You can check the issue in below image –
    https://drive.google.com/file/d/1blRo-ROsOq47GKi_2LqGEBJjla1iVxJX/view?usp=sharing

    I’ve to revert the code due to this issue. Hence you may not see this on the test page I’ve shared previously.

    2. New tab is opening by clicking the Title below, but not by clicking on the image. Can you also suggest the probable code to implement this?

    Plugin Author livemesh

    (@livemesh)

    5 years, 11 months ago

    You just helped uncover a minor bug that had escaped everyone’s attention so far. Thank you.

    Here is the modified code which will meet both your needs while we issue an update with the fix. The code below works without the update and you are good to go. 

    function mytheme_modify_posts_carousel_entry_title($title, $post_id, $settings) {

    $entry_title = '<' . $settings['entry_title_tag']
        . ' class="entry-title"><a href="' . get_permalink()
        . '" title="' . get_the_title()
        . '" rel="bookmark" target="_blank">' . get_the_title()
        . '</a></' . $settings['entry_title_tag'] . '>';

    return $entry_title;

}

add_filter('lae_posts_carousel_entry_title', 'mytheme_modify_posts_carousel_entry_title', 10, 3);

    To help open the image in a new tab/window, pls have this in your child theme functions.php – 

    function mytheme_modify_posts_carousel_thumbnail_html($thumbnail_html, $image_setting, $settings) {

    $image_setting = ['id' => get_post_thumbnail_id()];

    $thumbnail_html = lae_get_image_html($image_setting, 'thumbnail_size', $settings);

    if ($settings['image_linkable'] == 'yes'):

        $thumbnail_html = '<a href="' . get_the_permalink() . '" target="_blank">' . $thumbnail_html . '</a>';

    endif;

    return $thumbnail_html;

}

add_filter('lae_posts_carousel_thumbnail_html', 'mytheme_modify_posts_carousel_thumbnail_html', 10, 3);
    • This reply was modified 5 years, 11 months ago by livemesh.
    Plugin Author livemesh

    (@livemesh)

    5 years, 11 months ago

    We just released an update with many of the options you were looking for in the plugin. You don’t need majority of the code posted above if you upgrade.

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

The topic ‘Post Carousel Customization’ is closed to new replies.