Forum

Thread tagged as: Configuration

images will not show on the page

Hello

I have installed perch and when I upload an image it appears in the Assets but will not appear in the dashboard. I am using repeated regions as it is a profiles page. The text displays alright even when I save the work The image dose not appear.

I am using the following .html template:


<perch:repeater id="marvellous_profiles" label="Marvellous Profile" max="15"> <table width="961" border="0" cellspacing="0" cellpadding="0"> <perch:before><tr></perch:before> <td><span class="C-5"><strong><perch:content type="text" id="Name" label="Full Name" /></strong></span></td> <td width="245" rowspan="3" valign="top"><perch:content type="image" id="image" label="Image" crop="true" width="245" height="330"/></td> </tr> <tr> <td><span class="C-5"><strong><perch:content type="text" id="qualification" label="Qualification" /></strong></span></td> </tr> <tr> <td style="padding-right:10px;"><p class="C-13"><perch:content type="textarea" id="biography" label="Biography" /></p></td> <perch:after></tr></perch:after> </table> </perch:repeater>

Can you help please.

Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Where in the dashboard are you expecting to see the image?

Where is says Select or upload upload an image. It is between name and Qualification

Paul

Hi I have reinstalled the perch files from fresh.

It seems to be adding the image in the correct section in the admin now. I save the new entered details, but on the page perch has added "-w245h330.jpg to the image file. I think that is why the image is not showing. Can you throw any light as to why it added this?

Thanks

Drew McLellan

Drew McLellan 2638 points
Perch Support

We add a suffix to the file name when it's resized. That file is the version resized to fit width="245" height="330".

If we didn't rename the file, you'd only ever be able to have one size of image.

Hello

That is very interesting but why is the image not appearing on the page rendered by Perch?

Rachel Andrew

Rachel Andrew 394 points
Perch Support

You haven't given us enough information to say. What else can you tell us about this?

Paul. The image isn't showing because there isn't a complete image tag. Add this...

<img src="<perch:content ... />" />

And you'll be fine.

Sorry working on iPhone in forum makes it tough to give complete example

Robert Ketter

Hello Robert

I have changed the image tag to:


<img src="<perch:content type="text" id="qualification" label="Qualification" />"/>

but I am still getting displayed on the live page: https://www.marvellousminds.co.uk/profiles2.php

/marvelbev/resources/beverlymorris-w245h330.jpg

What are you expecting to be output? Please give example of expected html.

Hello Robert

I was hoping to reproduce the section shown below which is on the page using plain HTML. I had put the <img src " .....

round the wrong section of htlm in the template. The code on the template is now:


<perch:repeater id="marvellous_profiles" label="Marvellous Profile" max="15"> <table width="961" border="0" cellspacing="0" cellpadding="0"> <perch:before><tr></perch:before> <td><span class="C-5"><strong><perch:content type="text" id="Name" label="Full Name" /></strong></span></td> <td width="245" rowspan="3" valign="top"><img src="<perch:content type="image" id="image" label="Image" crop="true" width="245" height="330"/>" /></td> </tr> <tr> <td><span class="C-5"><strong><perch:content type="text" id="qualification" label="Qualification" /></strong></span></td> </tr> <tr> <td style="padding-right:10px;"><p class="C-13"><perch:content type="textarea" id="biography" label="Biography" /></p></td> <perch:after></tr></perch:after> </table> </perch:repeater>

I am hoping to enable multiple profiles as seen on the page.

The out put I was hoping to create was a tabled HTML like the code below:


<table width="961" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="C-5"><strong>DR. BEV MORRIS - Principle</strong></span></td> <td width="245" rowspan="3" valign="top"><img src="images/personnel/bev-morris.jpg" width="245" height="330" alt="Bev Morris"></td> </tr> <tr> <td><span class="C-5"><strong>EdD, MA, PGCE, BA, Cert ADS, Fellow of the Institute for Learning and AMED</strong></span></td> </tr> <tr> <td style="padding-right:10px;"> <p class="C-13">Bev has had a diverse public and private sector career both as an operational and strategic manager. This work includes ministerial briefings, drafting legislation and project management of large refurbishment and new building projects across the UK. She has managed teams of up to 150 people and budgets of several million pounds and has been recruited to troubleshoot failing projects.</p> <p class="C-13">Whilst working in Whitehall, Bev trained as a person-centred counsellor, specialising in sexual harassment work, and studied for a BA in Arts and Social Sciences through the Open University culminating in a secondment to York University to complete a Masters in Public Sector Management. At the same time, she began learning British Sign Language to be able to communicate with deaf colleagues. This led to a career change in 1996 when she qualified as a tutor working with adults. She specialised in teaching disabled adults and qualified as a signlanguage communicator and deaf-blind communicator guide whilst teaching in several colleges in Essex. Within a few months of starting this work, Bev was recruited as a manager and quickly worked her way up to the position of Vice Principal. She then established a project to support soldiers in the East of England to improve their literacy, numeracy and ICT skills. This has subsequently led to work with the Royal College of Defence Medicine to provide counselling skills training to front-line medics.<br><br> Bev is now Director of Marvellous Minds Training and Consultancy which works across the UK. This company supports voluntary, public and private sector education providers to develop quality improvement processes, inclusive practices, staff development and financial probity. She teaches on a range of teacher-training and management courses including a Foundation Degree in Teaching. As a qualified dyslexia assessor, Bev also supports a variety of organisations to make their services accessible to all users.<br><br> Most recently, Bev has completed a doctoral thesis in mentoring models for trainee teachers in the voluntary sector, has written several research papers with a colleague at the University of Nova Scotia and supervises mentors in education.<br><br> Bev has found time to sing with the band Kwajesima and enjoys success as a writer of women’s fiction, academic articles and training materials. Her latest works are a psychological thriller and a sitcom.</p></td> </tr> </table>
Rachel Andrew

Rachel Andrew 394 points
Perch Support

If you want an image you need to use a perch image tag.

It will, as Robert has explained, output the path to the image. If you want to output an image tag, do that in your HTML as normal.

This is all detailed in the documentation:

https://docs.grabaperch.com/docs/templates/attributes/type/image/

Paul, This part of your code is working perfectly for me...

<perch:repeater id="marvellous_profiles" label="Marvellous Profile" max="15"> 
<table width="961" border="0" cellspacing="0" cellpadding="0">
    <perch:before><tr></perch:before>    
    <td><span class="C-5"><strong><perch:content type="text" id="Name" label="Full Name" /></strong></span></td>
    <td width="245" rowspan="3" valign="top"><img src="<perch:content type="image" id="image" label="Image" crop="true" width="245" height="330"/>" /></td>
  </tr>
  <tr>
    <td><span class="C-5"><strong><perch:content type="text" id="qualification" label="Qualification" /></strong></span></td>
  </tr>
  <tr>
    <td style="padding-right:10px;"><p class="C-13"><perch:content type="textarea" id="biography" label="Biography" /></p></td>  
    <perch:after></tr></perch:after>  
</table>
</perch:repeater> 

it produced this output for me...

<table width="961" border="0" cellspacing="0" cellpadding="0">
    <tr>    
    <td><span class="C-5"><strong>Robert Ketter</strong></span></td>
    <td width="245" rowspan="3" valign="top"><img src="/perch/resources/koala-w245h330.jpg" /></td>
  </tr>
  <tr>
    <td><span class="C-5"><strong>Super Guy</strong></span></td>
  </tr>
  <tr>
    <td style="padding-right:10px;"><p class="C-13">Man... I have a lot to say here.</p></td>  
    </tr>  
</table>

Is this not working for you?

Hello Robert

It is outputting it correctly now.

Many Thanks,

Paul

Awesome, Your welcome. Glad to be able to sort it out. :)