1. 

   wcamp
   

   offline

   Member

   I've built a photo album using Flex Grid Magic. While it was easy to create attractive instances of framed/shadowed grid boxes, I see a visual problem that I cannot correct.

   In the fourth and fifth rows of thumbnail photos, although each thumbnail is 240 pixels high, their rendered heights are not consistent; each row appears to need tweaking to gain uniformity of image height.

   Fourth row: I removed the "fgm-vertical-center" class citing, as follows:
   <div class="fgm-section" data-fgm-basis="23,%">

   Fifth row: I kept the "fgm-vertical-center" class citing, as follows:
   <div class="fgm-section fgm-vertical-center" data-fgm-basis="23,%">

   Nevertheless, neither row renders the thumbs to have the same 240px height.

   https://www.warrencampdesign.com/peter/peterMasterpieces.php

   Is there something I can add to the FGM script to retain the image heights without distorting the thumbs' consistent renderings?

   Or must I manipulate the thumbs by creating .png files with transparent background widths that make all three images in a row the same width and height?

   Wondering Warren

   Posted 1 year ago
2. 

   wcamp
   

   offline

   Member

   Hello, again:

   Not hearing back, I wonder if I should presume that there is NOT a script-tweaking exercise or a user class that I could assign my page's image grids so that the width and height proportions of each thumbnail could be retained when the page opens and when it gets narrowed.

   Please advise so I'll know what to do next to the thumbnails.

   Thanks very much.

   Warren

   Posted 1 year ago
3. 

   Gerry
   

   offline

   PVII Team

   Sorry for the late response Warren, I overlooked this initially.

   Actually it's all rendering as expected. With responsive images the rendered size is mainly governed by the available width. Your thumbnail images all have different widths, sometimes large differences.

   For example, in the fourth row there are three images, all with a natural height of 240px:

   381px wide, 308px wide, 247px wide

   The each will stretch or contract to fit the available width in the column. As the stretch or contract each of their heights will also be adjusted to maintain the images natural aspect ratio (to prevent pix elation). So the 381px wide image will contract to a greater degree than the 247px wide image. That is, the 381px wide image must shrink more to fit in the available width than the 247px wide image. The 381px wide image will thus appear much smaller than the other image. This is what account for the different heights of the images.

   If you are looking for each thumb image to be rendered with the same height then you must assure that the natural width of each image is the same. If tit is not the images will scale down according to their natural aspect ratio and appear with different heights.

   Hope that helps :-)

   Posted 1 year ago
4. 

   wcamp
   

   offline

   Member

   Thanks, Gerry, for confirming that the FGM grids are rendering as intended.

   Following up on your closing comment, I've now made the six thumbnails (in rows 3 and 4) all the same width and height: 210 pixels, by adding transparent sides and tops to make the thumbs consistent in dimensions.

   Alas, I don't see an improvement. In fact, the bordering/shadowing styling gets compromised.

   Incidentally, might it help if I changed the "data-fgm-basis=23,%" since my thumbs have diminished in size??? Perhaps four thumbs per row would look better and take less real estate, yes?

   In the event that I misunderstood your suggested action, please clarify what you recommend I do to make all the thumbs look attractive when the page opens and when its size changes.

   Here's the markup for easy reference.
   . . .
   <div class="fgm-section fgm-vertical-center" data-fgm-basis="23,%">
   <div class="fgm-content fgm-cnt-top fgm-center">"Saints Prodosdocimus and Peter"
   </div>
   <div class="fgm-img"><img src="images/saintsProdosdocimusAndPeter_sm.jpg" alt="'Saints Prodosdocimus and Peter' by il Pordenone" title="'Saints Prodosdocimus and Peter' by il Pordenone"></div>
   <div class="fgm-content fgm-cnt-bottom fgm-center">
   <p>Click to enlarge.</p>
   <br>
   <p>il Pordenone — 1515 painting</p>
   </div>
   </div>
   <div class="fgm-section fgm-vertical-center" data-fgm-basis="23,%">
   <div class="fgm-content fgm-cnt-top fgm-center">"The Incarnation of Jesus"
   </div>
   <div class="fgm-img"><img src="images/incarnationOfJesus_sm.jpg" alt="'The Incarnation of Jesus' by de Cosimo" title="'The Incarnation of Jesus' by de Cosimo"></div>
   <div class="fgm-content fgm-cnt-bottom fgm-center">
   <p>Click to enlarge.</p>
   <br>
   <p>di Cosimo — 1485–1505 oil on panel</p>
   </div>
   </div>
   <div class="fgm-section fgm-vertical-center" data-fgm-basis="23,%">
   <div class="fgm-content fgm-cnt-top fgm-center">"The Apostles Paul and Peter"
   </div>
   <div class="fgm-img"><img src="images/apostlesPaulAndPeter_sm.jpg" alt="'The Apostles Paul and Peter' by Correggio" title="'The Apostles Paul and Peter' by Correggio"></div>
   <div class="fgm-content fgm-cnt-bottom fgm-center">
   <p>Click to enlarge.</p>
   <br>
   <p>Correggio — 1520–1524 cupola fresco</p>
   </div>
   </div>
   <div class="fgm-section" data-fgm-basis="23,%">
   <div class="fgm-content fgm-cnt-top fgm-center">"Agony in the Garden" </div>
   <div class="fgm-img"><img src="images/agonyInTheGarden2_sm.jpg"></div>
   <div class="fgm-content fgm-cnt-bottom fgm-center">
   <p>Click to enlarge.</p>
   <br>
   <p>Bellini — 1459–1465 tempera</p>
   </div>
   </div>
   <div class="fgm-section" data-fgm-basis="23,%">
   <div class="fgm-content fgm-cnt-top fgm-center">"Agony in the Garden" </div>
   <div class="fgm-img"><img src="images/agonyInTheGarden1_sm.jpg"></div>
   <div class="fgm-content fgm-cnt-bottom fgm-center">
   <p>Click to enlarge.</p>
   <br>
   <p>Mantegna — 1458–1460 oil on panel </p>
   </div>
   </div>
   <div class="fgm-section" data-fgm-basis="23,%">
   <div class="fgm-content fgm-cnt-top fgm-center">"Agony in the Garden" </div>
   <div class="fgm-img"><img src="images/agonyInTheGarden3_sm.jpg"></div>
   <div class="fgm-content fgm-cnt-bottom fgm-center">
   <p>Click to enlarge.</p>
   <br>
   <p>Perugino — 1483–1493 oil on panel </p>
   </div>
   </div>
   . . .

   Thanks, pal. I'll appreciate receiving your recommendations.

   Warren

   Posted 1 year ago
5. 

   Gerry
   

   offline

   PVII Team

   Hi Warren,

   I would revert back to the previous version, it looked a lot better. With your source images it is impossible to get them all with similar width and height... adding transparent space on the sides just makes it worse, visually.

   There really is nothing you can do to improve the display that you had before. The boxes in each row are all the same height and the images are sized automatically to display as large as they can within those boxes... I would leave it at that. My comments were more about providing a reason for the way they were displaying, I really wasn't suggesting your do anything since I can think of nothing that would improve the display given the images you are working with.

   Posted 1 year ago
6. 

   wcamp
   

   offline

   Member

   I understand. Thanks for clarifying your previous comment.

   I'll resort to the original formatting, tweaking it here and there, as best I can when needed.

   Many thanks, Gerry.

   Warren

   Posted 1 year ago

RSS feed for this topic

Reply

You must log in to post.