Forum

Thread tagged as: Problem

Template not laying out and displaying images

Hello

I am using the following template to recreate the bootstrap layout but it does not seem to put the image in the first and 4th 3 columns and the text in the 2nd and 4th 3 columns. The code for the template is below as is the link to see the page.

Many thanks if you can help.

<perch:repeater id="nude_images" label="Nude Images" max="6">

  <div class="row">

    </perch:before><div class="col-md-3"> <img class="img-responsive" alt="Daniel Stedman" src="<perch:content type="image" id="picture_1" label="Picture 1" crop="true" width="250" height="250" /> >  </div> <perch:before>
    <div class="col-md-3">
      <h3>
        <perch:content type="text" id="title_of_picture" label="Name of picture" />
        Nude One Title</h3>
      <h4>
        <perch:content type="text" id="picture_price" label="Price of picture" />
        Price</h4>
      <p>
        <perch:content type="text" id="discription_of_picture" label="Picture discription" />
        Discription of image. Medium used etc. 
        Nam viverra euismod odio, gravida pellentesque urna varius vitae. 
        Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. 
        Mauris ultricies, justo eu convallis placerat, felis enim. </p>
    </div>
    <div class="col-md-3"> <img class="img-responsive" alt="Daniel Stedman" src="<perch:content type="image" id="picture_2" label="Picture 2" crop="true" width="250" height="250" />> </div>
    <div class="col-md-3">
      <h3>
        <perch:content type="text" id="title_of_picture_2" label="Name of picture" />
        Nude One Title</h3>
      <h4>
        <perch:content type="text" id="picture_price_2" label="Price of picture" />
        Price</h4>
      <p>
        <perch:content type="text" id="discription_of_picture_2" label="Picture discription 2" />
        Discription of image. Medium used etc. 
        Nam viverra euismod odio, gravida pellentesque urna varius vitae. 
        Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. 
        Mauris ultricies, justo eu convallis placerat, felis enim. </p>
    </div>
  <perch:after></div></perch:after>
</perch:repeater>
      <hr />

link to page: https://www.danielstedman.gallery/daniel-stedman-nudes-landscapes.php

Paul

Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

The first thing to do is check for basic syntax errors.

For example, you have the </perch:before> appearing before the <perch:before>.

Thanks Drew

I also missed the " closing the src element. However the next and subsequent repeated regions just repeatedly squshes up on the right hand side and progressivley squshes the subsequent blocks. Also I am getting "" appearing before the repeating region, is this causing the problem?

https://www.danielstedman.gallery/daniel-stedman-nudes-landscapes.php

Best regards,

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

This looks like an HTML problem rather than a Perch problem.

Hello Drew

In my previous message I've managed to stop the squashing of the repeated regions. However when the region is repeated a second time the image that should be is displayed under image 1 dose not show and if it did it would be where he text is. if you look at the page the 4th image is where the text should be. Is the "" that appears before the perch block causing it.

The code on the template is as follows

<perch:repeater id="nude_images" label="Nude Images" max="6">
  <div class="class="container-fluid">
    <div class="row">
      <perch:before>
        <div class="col-md-3"> <img class="img-responsive" alt="Daniel Stedman" src="<perch:content type="image" id="picture_1" label="Picture 1" crop="true" width="200" height="200"/>"/> </div>
      </perch:before>
      <div class="col-md-3">
        <h3>
          <perch:content type="text" id="title_of_picture" label="Name of picture" />
        </h3>
        <h4>
          <perch:content type="text" id="picture_price" label="Price of picture" />
        </h4>
        <p>
          <perch:content type="text" id="discription_of_picture" label="Picture discription" />
        </p>
      </div>
      <div class="col-md-3"> <img class="img-responsive" alt="Daniel Stedman" src="<perch:content type="image" id="picture_2" label="Picture 2" crop="true" width="200" height="200"/>"/> </div>
      <div class="col-md-3">
        <h3>
          <perch:content type="text" id="title_of_picture_2" label="Name of picture" />
        </h3>
        <h4>
          <perch:content type="text" id="picture_price_2" label="Price of picture" />
        </h4>
        <p>
          <perch:content type="text" id="discription_of_picture_2" label="Picture discription 2" />
        </p>
        <perch:after>
      </div>
      </perch:after>
    </div>
  </div>
</perch:repeater>

Many thanks,

Paul

Drew McLellan

Drew McLellan 2638 points
Perch Support

For the encoding issue, make sure you're serving your page as UTF8.

Otherwise, have you validated the HTML output to see where it's going wrong?

Hello

Ive put the code in the head

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

and validated the code. it is showing an error for the 4th image which is not uploaded. Perch is not showing the 3rd image that is attributed with the text.

Regards,

Paul

Hi

I also forgot to say that I changed the code in line 2 to:

div class='container-fluid'>

I had repeated the class= twice and used " marks instead of ' in the mark up.

Sorry,

Paul

Hello

I note that the "" has now disappeared. Can you see or think of a reason why the template display the text only from the first part if the template and not the image when repeated and the 4th image and text shows correctly?

Best regards,

Paul