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

  • 4 years ago
Simon Clay

Simon Clay 127 points

4 years ago

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.
Jade Marling

Jade Marling 0 points

4 years ago

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>
Jonathan Elliman

Jonathan Elliman 27 points

4 years ago

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

4 years ago

We need to see your Diagnostics Report.
Simon Clay

Simon Clay 127 points

4 years ago

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

Jade Marling 0 points

4 years ago

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
Jade Marling

Jade Marling 0 points

4 years ago

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

Jonathan Elliman 27 points

4 years ago

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