Forum

Thread tagged as: Question

Trying to upload a large image and smaller version of that image to resources

I have a template content file which outputs thumbnails to the page and, when clicked, displays a larger version of the image. I've included these lines of code:

<li><a href="<perch:content id="main_image" type="image" width="800" height="800" />" class="p7mbx-trigger" data-mbx="1" data-mbx-slide="<perch:content id="perch_item_index" type="hidden" /> "> <img src="<perch:content id="main_image" type="image" width="200" height="200" />" alt="Image"></a></li>

The 800x800 max version of the image is created but not the second. The page source shows:

<li><a href="/perch/resources/silenceafterthesong-w800h800.jpg" class="p7mbx-trigger" data-mbx="1" data-mbx-slide="1"><img src="/perch/resources/silenceafterthesong.jpg" alt="Image"></a></li>

If this is possible, what and I doing wrong? John
John Liston

John Liston 0 points

  • 5 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

5 years ago

Please can we see your Diagnostics Report?
John Liston

John Liston 0 points

5 years ago 
SUMMARY INFORMATION

Perch: 2.8.29, PHP: 5.4.42, MySQL: mysqlnd 5.0.10 - 20111026 - $Id: c85105d7c6f7d70d609bb4c000257868a40840ab $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.29), assets (2.8.29), categories (2.8.29), perch_blog (5.0), perch_kraken (1.0), perch_backup (1.2)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /var/sites/m/example.com/public_html/perch
PERCH_CORE: /var/sites/m/example.com/public_html/perch/core
PERCH_RESFILEPATH: /var/sites/m/example.com/public_html/perch/resources
Image manipulation: GD
PHP limits: Max upload 100M, Max POST 100M, Memory: 128M, Total max file upload: 100M
F1: 2edba60ed1f613d6dd804feb202456a2
Resource folder writeable: Yes
DOCUMENT_ROOT: /var/sites/w/example.com/public_html
HTTP_HOST: www.example.com
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Rachel Andrew

Rachel Andrew 394 points
Perch Support

5 years ago

Is this template the only template used for this content? You need to create all images used in the master template for the content.
John Liston

John Liston 0 points

5 years ago

The master template includes Perch layout elements plus two perch_content items. The content element for these images being one of them.

This is the whole of content template:


<h2 style="padding-top:0px;"><perch:content id="title" type="text" label="Page title" html="false" size="l" /></h2>

    <div id="p7MBXtmb_1" class="mbx-thumbs">
        <ul>
            <perch:repeater id="thumbs" label="Thumbnails" max="40">
            <li><a href="<perch:content id="main_image" type="image" width="800" height="800" />" class="p7mbx-trigger" data-mbx="1" data-mbx-slide="<perch:content id="perch_item_index" type="hidden" />"><img src="<perch:content id="main_image" type="image" width="200" height="200" />" alt="Image"></a></li>
                <perch:content id="desc1" type="text" label="Description" html="false" required="false" title="false" size="xxl" suppress="true" />
                <perch:content id="desc2" type="text" label="Line 2" html="false" required="false" title="false" size="xxl" suppress="true" />
                <perch:content id="desc3" type="text" label="Line 3" html="false" required="false" title="false" size="xxl" suppress="true" />
            </perch:repeater>
        </ul>
     </div>

    <div id="p7MBX_1" class="p7MBX-01 p7MBX p7MBXnoscript transparency matting border light">
        <ul id="p7MBXlist_1" class="p7mbx-list">
            <perch:repeater id="thumbs" label="Thumbnails" max="40">
            <li><a href="<perch:content id="main_image" type="image" width="800" height="800" />" class="mbx-image" title="" data-mbx-mode="fit">sea-lands-edge-680</a>
                <div class="mbx_desc"><perch:content id="desc1" type="text" label="Description" html="false" required="false" title="false" size="m" /><perch:if exists="desc2"><br /><perch:content id="desc2" type="text" label="Line 2" html="false" required="false" title="false" size="m" /></perch:if><perch:if exists="desc3"><br /><perch:content id="desc3" type="text" label="Line 3" html="false" required="false" title="false" size="m" /></perch:if><perch:content id="sold" type="checkbox" label="Sold" value="1" html="false" suppress="true" /><perch:if exists="sold"><br />Sold<span style='line-height:50%; font-size:150%; color:#B22222;'>&bull;</span></perch:if></div>
            </li>
                </perch:repeater>
            </ul>
    <script type="text/javascript">P7_MBXop('p7MBX_1',1,600,1,0,8,0,0,1,0,100,1,2,0,1,0,1,1);</script>
    </div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

That all looks ok to me. To be clear, there's only one template involved currently?
John Liston

John Liston 0 points

5 years ago

I think it's pretty straightforward. I have a file 2015.php as follows:

<?php include(str_replace('/', DIRECTORY_SEPARATOR, '../perch/templates/pages/work.php')); ?>

and /templates/pages/work.php :

<?php include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php'); ?>

<!doctype html> 

<html>
<head>

<meta id="p7DMM" name="viewport" content="width=device-width">
<meta charset="utf-8">

<title>Contemporary abstract landscape artist - <?php perch_pages_title(); ?></title>

<?php perch_layout('global.css'); ?>
<?php perch_layout('global.analytics'); ?>
</head>
<body>

<?php perch_layout('global.masthead'); ?>

<!-- CONTENT -->

  <div class="columns-container">

    <div class="column sidebar right-border">
      <div style="padding: 0px 0px 10px 4px;">
      <!--<img src="../images15/m15logo-trans.gif" width="168" height="90" alt=""/>-->
      <div style="font-weight:300; font-size: 1.85em; line-height:1.25em; color:#959595;">CLIENT <br />ARTIST</div>

    </div>
        <?php perch_content('left hand column'); ?>
    </div> 

    <!--<div class="column main-content left-border">-->
    <div class="column main-content">

        <?php perch_content('main body'); ?>

<p>&nbsp;</p>
    </div>
  </div>
</div>

<?php perch_layout('global.footer'); ?> 
<?php perch_layout('global.navigation'); ?>

</div>
</body>
</html>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

And you've re-saved your content since changing the image sizes?
John Liston

John Liston 0 points

5 years ago

Yes, by clicking Save Changes. And I've added a couple of new images.

And I've just added another image: there are three files in resources filename.jpeg [94KB]; filename-thumb@2x.jpeg [16KB] and filename-w800h800.jpeg [88KB] the last two files having been processed by Kraken.

Any help if I create a new page using the same templates?
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

That might be a good troubleshooting step. It has to be something simple!
John Liston

John Liston 0 points

5 years ago

Well, I've tried a new page; with fresh images: and the result is the same. Switched on Debug and, although the output is difficult for me to read, I can see

Resizing image... (gd, w800 h800 @1x )
Array
(
    [dev] => 
    [url] => https://www.example.com/perch/resources/adobestock104555995wm-w800h800.jpeg
    [callback_url] => https://www.example.com/perch/addons/apps/perch_kraken/callback/
    [wait] => 
)

but nothing for the 200x200 image.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

That's really odd. Are all your images .jpeg ? That's a more unusual file extension - is it any different with .jpg? (clutching at straws.)
John Liston

John Liston 0 points

5 years ago

No, they are mostly .jpg. I will try creating another page with a really simple template to output, to the page, the same image in two or three different sizes and see what happens.
John Liston

John Liston 0 points

5 years ago

I might have found an explanation for this. Here is a simplified template based on what I was tryin showing some Perch Content items within an <li>. The content is not output in the example I have done. It does output within a <ul> and elsewhere.

<ul>
<div>
<br />
Fields within ul:<br />

<perch:content id="desc1" type="text" label="Description" html="false" required="false" title="false" size="m" />

<perch:if exists="desc2"><br />
<perch:content id="desc2" type="text" label="Line 2" html="false" required="false" title="false" size="m" />
</perch:if>

<perch:if exists="desc3"><br />
<perch:content id="desc3" type="text" label="Line 3" html="false" required="false" title="false" size="m" />
</perch:if>

<perch:content id="sold" type="checkbox" label="Sold" value="1" html="false" suppress="true" />
<perch:if exists="sold"><br />
Sold<span style='line-height:50%; font-size:150%; color:#B22222;'>&bull;</span>
</perch:if>
</div>


            <perch:repeater id="thumbs" label="Thumbnails" max="40">

<div>
<br />
Fields within li:<br />

<perch:content id="desc1" type="text" label="Description" html="false" required="false" title="false" size="m" />

<perch:if exists="desc2"><br />
<perch:content id="desc2" type="text" label="Line 2" html="false" required="false" title="false" size="m" />
</perch:if>

<perch:if exists="desc3"><br />
<perch:content id="desc3" type="text" label="Line 3" html="false" required="false" title="false" size="m" />
</perch:if>

<perch:content id="sold" type="checkbox" label="Sold" value="1" html="false" suppress="true" />
<perch:if exists="sold"><br />
Sold<span style='line-height:50%; font-size:150%; color:#B22222;'>&bull;</span>
</perch:if>
</div>


<li>
<p>800 x 800 image:</p>
            <img src="<perch:content id="main_image" type="image" width="800" height="800" />" alt="image">

            <p>200 x 200 image with link:</p>


            <div><a href="<perch:content id="main_image" type="image" width="800" height="800" />"> <img src="<perch:content id="main_image" type="image" width="200" height="200" />" alt="Image"></a></div>



</li>



            </perch:repeater>
</ul>


<ul>
            <perch:repeater id="thumbs" label="Thumbnails" max="40">
<li>
            <p>400 x 400 image:</p>
            <img src="<perch:content id="main_image" type="image" width="400" height="400" />" alt="Image">

            <p>200 x 200 image with link:</p>
            <div><a href="<perch:content id="main_image" type="image" width="800" height="800" />"> <img src="<perch:content id="main_image" type="image" width="200" height="200" />" alt="Image"></a>



</div>

</li>
            </perch:repeater>
</ul>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok, there's a lot going on here. Are you intending to reuse the same repeater, or is it indented to be a different repeater?
John Liston

John Liston 0 points

5 years ago

It needs to be the same repeater. I repeated some of the code (this is just an example) to see what happens. In my working (live) page I need to output the description fields within the <li> pair. I can simplify my example if this helps.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

I'll run this example up and see if I can reproduce what you're seeing. It's an usual situation.
John Liston

John Liston 0 points

5 years ago

Thank you. It would be good to resolve this.