We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Question, Blog

Crop images

Hi,

I have used a template to show blog posts on the home page of a website. The client has had the the CMS for a few months but the images are not being cropped even though the have been set to specific dimensions. Fopr example, one image the size of the image is 1,536px × 2,048px but the crop has been set 245px x 164px. Code below, I'm assuming that I've done something wrong because the image is much larger than what the should be so the crop sohould work. Any help would would be appreciated, thanks! :)

<div class="col-md-4 nobottommargin">
                                <div class="ipost clearfix">
                                    <div class="entry-image">
                                        <a href="<perch:blog id="postURL" />"><img class="image_fade" src="<perch:blog id="image" type="image" width="245" height="164" crop="true" />" alt="<perch:blog id="postTitle" />"></a>
                                    </div>
                                    <div class="entry-title">
                                        <h3><a href="<perch:blog id="postURL" />"><perch:blog id="postTitle" /></a></h3>
                                    </div>
                                    <ul class="entry-meta clearfix">
                                        <li><i class="icon-calendar3"></i> <perch:blog id="postDateTime" format="%d %B %Y" /></li>

                                    </ul>
                                    <div class="entry-content">
                                        <p><perch:blog id="excerpt" type="textarea" textile="true" /></p>
                                    </div>
                                </div>
                            </div>
Jade Marling

Jade Marling 0 points

  • 2 years ago
Simon Clay

Simon Clay 127 points

Hi Jade,

Do you have

<perch:blog id="image" type="image" width="245" height="164" crop="true" suppress="true" />

In your main post.html template too?

You'll need it to be there so that Perch can crop it at edit time.

Hi Simon,

Yes I do, the post.html code is below

<perch:blog id="excerpt" type="textarea" label="Excerpt" markdown="true" order="3" suppress="true" size="s" />
<perch:blog id="image" type="image" label="Post Thumbnail" width="245" height="164" crop="true" suppress="true"  help="Maximum file upload: 2MB"/>




 <!-- Entry Title
                                ============================================= -->
                                <div class="entry-title">
                                    <h2 class="uppercase"><perch:blog id="postTitle" type="text" label="Title" required="true" size="xl autowidth" order="1" /></h2>
                                </div><!-- .entry-title end -->

                                <!-- Entry Meta
                                ============================================= -->
                                <ul class="entry-meta clearfix">
                                    <li><i class="icon-calendar3"></i> <perch:blog id="postDateTime" type="date" time="true" format="%d %B %Y" /> </li>
                                </ul><!-- .entry-meta end -->

                                <!-- Entry Image
                                ============================================= -->
                                <div class="entry-image">
                                  <perch:before>
                                   <section id="slider" class="boxed-slider">

            <div class="container clearfix">

                <div class="nivoSlider"></perch:before><perch:repeater id="Slider" label="slider">
                                    <img src="<perch:blog id="sliderimage" type="image" label="Image" order="2" help="Maximum width: 855px. Maximum file upload: 2MB"/>" alt="<perch:blog id="postTitle" />" />
                    </perch:repeater>
                              <perch:after>
                               </div>



                <script type="text/javascript">

                    jQuery(document).ready(function($) {

                        $('.nivoSlider').nivoSlider({
                            effect: 'random',
                            slices: 15,
                            boxCols: 12,
                            boxRows: 6,
                            animSpeed: 500,
                            pauseTime: 8000,
                            directionNav: true,
                            controlNav: true,
                            pauseOnHover: true,
                            prevText: '<i class="icon-angle-left"></i>',
                            nextText: '<i class="icon-angle-right"></i>',
                            afterLoad: function(){
                                $('#slider').find('.nivo-caption').addClass('slider-caption-bg');
                            }
                        });

                    });

                </script>

            </div>

        </section>
                                       </perch:after>
                                </div><!-- .entry-image end -->

                                <!-- Entry Content
                                ============================================= -->
                                <div class="entry-content notopmargin">
                                <perch:blog id="postDescHTML" type="textarea" label="Post" order="4" editor="ckeditor" html="true" size="xxl autowidth" required="true" />

                            <perch:blog id="excerpt" type="textarea" label="Excerpt" markdown="true" order="3" suppress="true" size="s" />

<perch:categories id="categories" set="blog" label="Categories" display-as="checkboxes" surpress="true">

        </perch:categories>

Is this the code for the section on your homepage or the blog post page itself?

You need to make sure this size is made at the time of uploading the image. i.e. When the blog post is created.

Ha - Beaten to it by Simon there!

Also you can constrain the width of the image with max-width in your css.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

We need to see your Diagnostics Report.

Simon Clay

Simon Clay 127 points

And you've re-saved the blog post since updating the template?

Diagnostics Report:


Perch: 2.8.34, PHP: 5.6.24, MySQL: 5.5.50-MariaDB, with PDO Server OS: Linux, cgi-fcgi Installed apps: content (2.8.34), assets (2.8.34), categories (2.8.34), perch_blog (5.0), perch_events (1.9.3), perch_forms (1.8.3), perch_shop_orders (1.0.10), perch_shop_products (1.0.10), perch_shop (1.0.10), perch_members (1.5) App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_events', 'perch_forms', 'perch_members', 'perch_shop', ); PERCH_LOGINPATH: /admin PERCH_PATH: /home/hp3-linc1-nfs1-x/094/391094/user/htdocs/admin PERCH_CORE: /home/hp3-linc1-nfs1-x/094/391094/user/htdocs/admin/core PERCH_RESFILEPATH: /home/hp3-linc1-nfs1-x/094/391094/user/htdocs/admin/resources Image manipulation: GD PHP limits: Max upload 20M, Max POST 20M, Memory: 64M, Total max file upload: 20M F1: 6a33f95eca3667f9e0c39bf5ca2980fe Resource folder writeable: Yes SCRIPT_NAME: /admin/core/settings/diagnostics/index.php REQUEST_URI: /admin/core/settings/diagnostics/ DOCUMENT_ROOT: /home/hp3-linc1-nfs1-x/094/391094/user/htdocs HTTP_HOST: www.tsm.web-design.wales

I haver reuploaded the image, and it worked. Thanks for your help everyone :)

Yeah, remember that if you've added the image before you changed the template it won't post process it. You'd need to re-upload the image. I find it easy to check what's going on just by looking in the resources folder at what gets churned out when you upload an image.

You need to update blog to 5.5.1