Image Alignment Issue
3 posts by 2 authors in: Forums > CMS Builder
Last Post: April 13, 2012 (RSS)
Hi
I have an issue with laying out of images in rows. The images layout perfectly when hard-coded in HTML, but when they're generated via the CMS they are not. There are 11 images in total laid out in rows of 3. The first 3 rows layout correctly, but the 10th image is floating to the right on a row of its own and the 11th image is also placed on a row of its own (the 10th and 11th images should be together on a row and floating to the left).
I think the issue is related to the spaces that are automatically output through the PHP code. I copied the HTML from the PHP output and pasted it back into my document as hard-coded HTML. When viewed, the copied hard-coded HTML outputted with the incorrect layout. When I removed the excess space, the HTML outputted correctly. However, I have amended the PHP code to try and remove the spaces. When the code outputs to HTML, the spaces are removed, but the layout is still incorrect.
I would be grateful for any assistance ... the problem has got me stumped! :(. Many thanks.
This is the hard-coded HTML I have inserted which is laying out correctly:
<div id="categoryselector" class="span-12 last">
<div id="categoryselectorwrapper" class="span-12 last">
<div id="categories" class="span-4 append-bottom turquoise last">
<a href="#"><img src="<?php echo $baseDirectory?>images/PLACEHOLDER-category.jpg" width="150" height="150" /></a>
<strong><a href="#">RS DISPENSERS</a></strong>
</div>
<!-- end of #categories -->
(ABOVE DIV IS REPEATED 11 TIMES)
</div>
<!-- end of #categoryselectorwrapper -->
</div>
<!-- end of #categoryselector -->
This is the PHP code which outputs incorrectly:
<div id="categoryselector" class="span-12 last">
<div id="categoryselectorwrapper" class="span-12 last">
<?php foreach ($dispensing_categoriesRecords as $record): ?><div id="categories" class="span-4 append-bottom turquoise last">
<?php foreach ($record['thumbnail'] as $upload):
if ($upload['isImage']): ?><a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /></a>
<?php endif;
endforeach ?><strong><a href="<?php echo $record['_link'] ?>"><?php echo $record['name'] ?></a></strong>
</div>
<!-- end of #categories -->
<?php endforeach ?>
</div>
<!-- end of #categoryselectorwrapper -->
</div>
<!-- end of #categoryselector -->
I have an issue with laying out of images in rows. The images layout perfectly when hard-coded in HTML, but when they're generated via the CMS they are not. There are 11 images in total laid out in rows of 3. The first 3 rows layout correctly, but the 10th image is floating to the right on a row of its own and the 11th image is also placed on a row of its own (the 10th and 11th images should be together on a row and floating to the left).
I think the issue is related to the spaces that are automatically output through the PHP code. I copied the HTML from the PHP output and pasted it back into my document as hard-coded HTML. When viewed, the copied hard-coded HTML outputted with the incorrect layout. When I removed the excess space, the HTML outputted correctly. However, I have amended the PHP code to try and remove the spaces. When the code outputs to HTML, the spaces are removed, but the layout is still incorrect.
I would be grateful for any assistance ... the problem has got me stumped! :(. Many thanks.
This is the hard-coded HTML I have inserted which is laying out correctly:
<div id="categoryselector" class="span-12 last">
<div id="categoryselectorwrapper" class="span-12 last">
<div id="categories" class="span-4 append-bottom turquoise last">
<a href="#"><img src="<?php echo $baseDirectory?>images/PLACEHOLDER-category.jpg" width="150" height="150" /></a>
<strong><a href="#">RS DISPENSERS</a></strong>
</div>
<!-- end of #categories -->
(ABOVE DIV IS REPEATED 11 TIMES)
</div>
<!-- end of #categoryselectorwrapper -->
</div>
<!-- end of #categoryselector -->
This is the PHP code which outputs incorrectly:
<div id="categoryselector" class="span-12 last">
<div id="categoryselectorwrapper" class="span-12 last">
<?php foreach ($dispensing_categoriesRecords as $record): ?><div id="categories" class="span-4 append-bottom turquoise last">
<?php foreach ($record['thumbnail'] as $upload):
if ($upload['isImage']): ?><a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /></a>
<?php endif;
endforeach ?><strong><a href="<?php echo $record['_link'] ?>"><?php echo $record['name'] ?></a></strong>
</div>
<!-- end of #categories -->
<?php endforeach ?>
</div>
<!-- end of #categoryselectorwrapper -->
</div>
<!-- end of #categoryselector -->
Re: [newmediachoice] Image Alignment Issue
By (Deleted User) - April 13, 2012
Hi newmediachoice,
The code you posted (below) should work fine - the whitespace is ignored when parsed so you don;t need to worry about it (unless it's in a text element or preceding/following an image tag that's wrapped in an anchor element).
My guess is that, since you have the height and width of each image being taken from the uploaded image, you might not be getting the 150x150 you want. With the code below, you're using the actual size of the image uploaded so if hasn't been re-sized (either during upload or before) to 150x150 then it would introduce issues.
Also, you have a lot of classes for each div - are you sure you're using the right classes at the right time (for example, there is a class 'last' in the div id 'categoryselectorwrapper')?
If this doesn't yield any results, send over a second level support request https://www.interactivetools.com/support/email_support_form.php and we'll have a quick look and see what's happening.
Cheers,
Tom
The code you posted (below) should work fine - the whitespace is ignored when parsed so you don;t need to worry about it (unless it's in a text element or preceding/following an image tag that's wrapped in an anchor element).
My guess is that, since you have the height and width of each image being taken from the uploaded image, you might not be getting the 150x150 you want. With the code below, you're using the actual size of the image uploaded so if hasn't been re-sized (either during upload or before) to 150x150 then it would introduce issues.
Also, you have a lot of classes for each div - are you sure you're using the right classes at the right time (for example, there is a class 'last' in the div id 'categoryselectorwrapper')?
If this doesn't yield any results, send over a second level support request https://www.interactivetools.com/support/email_support_form.php and we'll have a quick look and see what's happening.
Cheers,
Tom
<div id="categoryselector" class="span-12 last">
<div id="categoryselectorwrapper" class="span-12 last">
<?php foreach ($dispensing_categoriesRecords as $record): ?>
<div id="categories" class="span-4 append-bottom turquoise last">
<?php foreach ($record['thumbnail'] as $upload): ?>
<?php if ($upload['isImage']): ?>
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /></a>
<?php endif; ?>
<?php endforeach ?>
<strong><a href="<?php echo $record['_link'] ?>"><?php echo $record['name'] ?></a></strong>
</div>
<!-- end of #categories -->
<?php endforeach ?>
</div>
<!-- end of #categoryselectorwrapper -->
</div>
<!-- end of #categoryselector -->Re: [Tom P] Image Alignment Issue
Hi Tom
Many thanks for your response and for your advice.
The reason there are a lot of classes is that I use Blueprint CSS :).
I don't think this is an image issue because the images were 150 x 150 when I uploaded them to the CMS. They are also exactly the same size as the images I used for the static HTML example which is working fine.
I also can't think that its a CSS issue because the static HTML uses exactly the same classes and produces a spot on layout. It's only the CMS generated content that is wrong.
Its a puzzler that's for sure [:/].
I'll send over the second level support request as suggested. Probably turn out to be something really simple ... hopefully!
Many thanks once again.
Many thanks for your response and for your advice.
The reason there are a lot of classes is that I use Blueprint CSS :).
I don't think this is an image issue because the images were 150 x 150 when I uploaded them to the CMS. They are also exactly the same size as the images I used for the static HTML example which is working fine.
I also can't think that its a CSS issue because the static HTML uses exactly the same classes and produces a spot on layout. It's only the CMS generated content that is wrong.
Its a puzzler that's for sure [:/].
I'll send over the second level support request as suggested. Probably turn out to be something really simple ... hopefully!
Many thanks once again.