2 Replies Latest reply on Sep 19, 2015 3:20 AM by osgood_

    How to change pictures resolution in dynamic database according to device resolution

    F. Fsto

      I made this responsive dynamic database with Dreamweaver CC, MySQL and PHP MyAdmin. In the page it show images that will link to the information. The desktop resolution is ok but the tablet and the cell phone the image is cutting. I want to know how to make the image adapt to its limit in each device.

       

       

      html/php:

      <section id="category">

          <?php do { ?>

           <article id="galery" style="background-image: url(europe/<?php echo $row_europa['photo']; ?>);"> </article>

           <?php } while ($row_europe = mysql_fetch_assoc($europe)); ?>

          </section>

       

       

      css for desktop:

      #category{

        position:relative;

        height:auto ;

        width:868px;

        left: 106px;

        padding-bottom: 1px;

      }

      #galery{

        width: 388px;

        height:205px;

        margin-right: 35px;

        margin-bottom: 30px;

        position:relative;

        float:left;

      }

       

       

      css for cell phone:

      #category{

        position:relative;

        background-color:#0F0;

        height:auto ;

        width:306px;

        left: 14px;

        padding-bottom: 1px;

      }

      #galery{

        width: 292px;

        height:156px;

        background-color:#F0F;

        margin-right: 14px;

        margin-bottom: 12px;

      }

       

       

      Someone told that to make all images shows properly it should come from different folder that contains the same file name but different sizes, one for each device...How do I do that?

        • 1. Re: How to change pictures resolution in dynamic database according to device resolution
          Nancy OShea Adobe Community Professional & MVP

          See this article on serving @2X images to Hi-Res devices using PHP code.

          Retina Images

           

          Nancy O.

          • 2. Re: How to change pictures resolution in dynamic database according to device resolution
            osgood_ Level 8

            F. Fsto wrote:

             

            I made this responsive dynamic database with Dreamweaver CC, MySQL and PHP MyAdmin. In the page it show images that will link to the information. The desktop resolution is ok but the tablet and the cell phone the image is cutting. I want to know how to make the image adapt to its limit in each device.

             

             

            html/php:

            <section id="category">

                <?php do { ?>

                 <article id="galery" style="background-image: url(europe/<?php echo $row_europa['photo']; ?>);"> </article>

                 <?php } while ($row_europe = mysql_fetch_assoc($europe)); ?>

                </section>

             

            Someone told that to make all images shows properly it should come from different folder that contains the same file name but different sizes, one for each device...How do I do that?

             

             

            For a start DON'T set the background image as inline css set it in in the css selector/s and media queries:

             

            Asign the $row_europa['photo']; to a variable named $image (you can name the variable anything suitably descriptive). This variable must obviously come before your css selectors/media queries.

             

            <?php do { ?>

            $image = $row_europa['photo'];

            <?php } while ($row_europe = mysql_fetch_assoc($europe)); ?>

             

             

             

            <article id="galery"> </article>

             

             

            Then echo out the background-image variable in the css selector. (Note the different folder names 'europe_dt_image', 'europe_tablet_image' and 'europe_smartphone_image'. The 3 variations of the background image can be named the same, stored in 3 different folders.

             

            #galery{

              width: 388px;

              height:205px;

              margin-right: 35px;

              margin-bottom: 30px;

              position:relative;

              float:left;

            background-image: url(europe_dt_image/<?php echo $image; ?>);

            }

             

             

            Then just change the attributes in the media queries appropriate to the device - the height/width you want the 'galery' container to be, the position of the background image etc: Dont forget the css styles are inherited so you don't need to duplicate the css styling (below is just for example).

             

            @media screen and (max-width: 768px){

            #galery{

            float: none;

            width: 100%;

            height: 300px;

            background-size: auto 100%;

            background-repeat:no-repeat;

            background-position: center, center;

            background-image: url(europe_tablet_image<?php echo $image; ?>);

            }

            }

             

             

            @media screen and (max-width: 480px){

            #galery{

            float: none;

            width: 100%;

            height: 150px;

            background-size: auto 100%;

            background-repeat:no-repeat;

            background-position: center, center;

            background-image: url(europe_smart_phone_image<?php echo $image; ?>);

            }

            }

             

             

            So you end up with three background-images named the same but in different folders: (The images can obviously be different sizes/dimensions served to the appropriate device via the media query)

             

            background-image: url(europe_dt_image/europe.jpg);

             

            background-image: url(europe_tablet_image/europe.jpg);

             

            background-image: url(europe_smart_phone_image/europe.jpg);

            1 person found this helpful