Custom Image Size

  • Resolved michelia

    (@michelia)


    8 years, 1 month ago

    I have tried to follow your instruction by adding the following codes in function.php

    function change_timeline_express_announcement_image_size( $image_size ) {
    $image_size = ‘full’;
    return $image_size;
    }
    add_filter( ‘timeline-express-announcement-img-size’ , ‘change_timeline_express_announcement_image_size’ );

    But then, the image enlarged. What I want is when the image is smaller than the designed size, then place it centre and keep the original image size. If the image is larger than the designed size, then scale down according to the width and need not crop the height.

    This is the page:
    https://www.themichelia.com/about/know-me-more/

    Thanks!

    • This topic was modified 8 years, 1 month ago by michelia.
    • This topic was modified 8 years, 1 month ago by michelia.
    • This topic was modified 8 years, 1 month ago by michelia.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Code Parrots

    (@codeparrots)

    Hi there @michelia,

    You were correct in using the ‘full’ image size, but you’ll also want to adjust the image width within the announcement container on the timeline. The width of the image is set to 100% by default, so regardless of the actual thumbnail size, the width extends to 100% (This is something we can address in a future release, so only the custom timeline express announcement image size is set to 100% while others remain at the original width.

    For now, you just need to tweak the width CSS attribute on the image element.

    Try adding the following to your themes ‘Additional CSS’ section of the customizer or within your themes style.css file:

    
.cd-timeline-title-container+img {
    width: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: .75em;
    max-width: 100%;
}

    Let us know how that works for you.

    Thread Starter michelia

    (@michelia)

    I am not sure if I still need to keep the customized codes in the function.php, so I tried both ways. However, it doesn’t take any effect at all.

    I used “my custom style plugin” and you can see my captured screen Style

    https://www.themichelia.com/style/

    Thanks!

    • This reply was modified 8 years, 1 month ago by michelia.
    • This reply was modified 8 years, 1 month ago by michelia.
    Plugin Contributor Code Parrots

    (@codeparrots)

    You may have to add !important tags to the end of them, depending on what is going on over on your site.

    Try the following:

    
.cd-timeline-title-container+img {
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
    margin-bottom: .75em !important;
    max-width: 100% !important;
}
    Thread Starter michelia

    (@michelia)

    Great!!! It worked perfectly!

    Thanks a lot!

    Plugin Contributor Code Parrots

    (@codeparrots)

    Awesome! No problem at all. Glad we could help out!

    Have a great rest of your day!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom Image Size’ is closed to new replies.