Arranging images dynamically in a page

  • Using an API to get an array with contain image an description.I need to arrange it side by side inside a page such a way that it adjusts with width.

    
foreach($value as $key1 => $value1) {
 echo '<img src="' . $image_link .  '" />'; ?>
 echo '<strong>' . $heading .  '</strong>';
}

    How should i proceed.Thamks in advance

    • This topic was modified 6 years, 4 months ago by vijayj.
    • This topic was modified 6 years, 4 months ago by vijayj.
    • This topic was modified 6 years, 4 months ago by Jan Dembowski.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter vijayj

    (@vijayj)

    I tried to do something like this But since the image URL is from the array,I got stuck

    

<div>
 <img alt="" />
 <div id="content" align="center"> 
 <img alt="" />
 </div>
 <img alt="" />
 </div>

 <style type="text/css">
 #content {

 width:50%;
 margin-left: auto ;
 margin-right:auto ;

 }
    • This reply was modified 6 years, 4 months ago by Jan Dembowski.
    Moderator bcworkz

    (@bcworkz)

    How to handle an array depends on how the array is structured. Using foreach on the array is very likely a good approach. Exactly how to address the array data depends on the array organization. Can you post an array example with only 2-3 elements?

    It’s best to output each image and any associated heading and captions within their own container. Then set the CSS width of those containers to a percentage like 50%, 33.3%, 25%, etc. and float them left. Set the image’s width within to 100%. This will be responsive within a range of screen sizes. With smaller screens, do media queries to alter the fractional width to one that’s appropriate for the screen size. Eventually 100% for the smallest screens.

    The widths may need slight adjustment for padding, margins, border, etc., but that’s the basic approach. The container height is also an issue. Ideally, it’s a fixed height, but you can end up with clipped content. If the content is widely varied in size and cannot be clipped, you might consider using the jQuery Masonry plugin to fit it all together.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Arranging images dynamically in a page’ is closed to new replies.

Tags