close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

This is a combination of css and repeating regions

Thread began 7/07/2022 3:17 pm by Patrice | Last modified 7/11/2022 8:09 am by Ray Borduin | 162 views | 6 replies |

PatriceWebAssist

This is a combination of css and repeating regions

Scenario: A photographer client, has a zillion photos to display for sale. I created a database to put them in different categories. So far so good. I can get a page to display all the photos in a category. So far, so good.

But her photos are all different sizes, shapes. So I added a field to the database for vertical and horizontal. Then for testing, I changed the db entry for some to a v for vertical. I stumbled about and figured out query to put a set of horizontal on the top of the page and the verticals on the bottom. Still ok.

I opened all of the photos, and ran a PS action to make max height at 600 px.

I added a minheight css to div to 600 pixels hoping that would keep the display ok. Nope, not enough.

I tried some flex display but I didn't get it done, but then I'm not there yet with flex stuff.

So using repeat region, how can I get the photo displays not have HUGE white gaps, or without the minheight, huge spaces when all images are not consistent? It is probably something simple, but after 3 days with this, I'm out of ideas. I haven't changed all the images from h to v in the database yet, but this page should show what I am trying to do (not live yet, work in progress):

https://cj-photos-tunkhannock.com/photos-animals.php

Any ideas, so much appreciated.

Sign in to reply to this post

Ray BorduinWebAssist

Flex displays are usually the best for this.

Another good option is to use webassist image resizer and crop to a certain size. It may trim off edges or top or bottom of oddly shaped images, but it is still usually good enough and makes your page very uniform and clean.

Sign in to reply to this post
Did this help? Tips are appreciated...

PatriceWebAssist

Thanks Ray. Can you expound more on what to with flex code? I have no clue what do to yet.

I don't want to manage this photographer's photos by cropping her work but I do have image resizer, and I can explore.

Sign in to reply to this post

PatriceWebAssist

also, I used your file management uploader feature to the back end so when she has new photos. I'll revisit what the default sizes should be.

'UploadFolder' => "../webphotos/",
'FileName' => "[FileName]",
'DefaultFileName' => "",
'ResizeType' => "2",
'ResizeWidth' => "1000",
'ResizeHeight' => "600",
'ResizeFillColor' => "#FFFFFF" );
// WA_UploadResult1_1 End

Sign in to reply to this post

Ray BorduinWebAssist

I usually don't resize images during upload. It is more future proof to keep the full size image in the upload and use image resizer when displaying the image. That way if you ever re-do the display you can just re-do the resizing from the original image.

I don't have any tutorials on flex layouts I can provide. If you want to do an hour premier ticket we can do that and figure something out I'm sure.

Sign in to reply to this post
Did this help? Tips are appreciated...

PatriceWebAssist

Thanks for the tips. I'll keep digging...

Sign in to reply to this post

PatriceWebAssist

Solution:

.masonry {
display: flex;
flex-flow: row wrap;
width: 33%;
}

.masonry-item {
overflow: hidden;
margin: 10px;
background-color: #fff;
flex: auto;
}

applied to repeat region:

<?php
$wa_startindex = 0;
while(!$photos->atEnd()) {
$wa_startindex = $photos->Index;
?>
<div class="masonry">
<div class="masonry-item ">
<img src="webphotos/<?php echo($photos->getColumnVal("photo_name")); ?>" alt=""/>

<p><?php echo($photos->getColumnVal("photo_SKU")); ?></p>
<p><?php echo($photos->getColumnVal("photo_details")); ?></p>
</div></div>
<?php
$photos->moveNext();
}
$photos->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...