Announcement

Collapse
No announcement yet.

Serving Scaled Images - Resizing images

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Serving Scaled Images - Resizing images

    In July 2020 I wrote about resizing images using a php script called Simple Image (https://community.sellerdeck.com/for...830#post552830)

    I have been developing the concept and along with some valuable input from Norman regarding using the script with a Bootstrap site (Swift for example) am now using the following way of serving scaled images appropriate to viewport. It also gives the appropriate width and height for each image which also helps SEO.

    You need to download the simpleImage.php script from https://github.com/claviska/SimpleImage

    Please note, this is now version 3.6.3 and it differs from earlier versions in having the line

    Code:
    namespace claviska;
    So that when the script is called you need to use:

    Code:
    $image = new \claviska\SimpleImage();
    and not as previously:

    Code:
    $image = new SimpleImage();
    You need to create a folder in the Site folder called 'scaled'.

    The layouts that are modified are as follows:

    Before you start take a site snapshot!

    Then copy these layouts in the design library so you have backups:
    • Best Seller
    • Home Page Section List
    • New Product
    • Product Summary Image
    • Standard Product Image
    • Standard Promotional List Entry
    • Top Level Section
    The forum only lets you post 10 <img> tags thinking theu are images even though they are in code, so the layouts are on subsequent posts - sorry!

    Zipped txt files of the layouts here: https://www.graphicz.solutions/Simple-Image-Layouts.zip


    Finally take a look in the stylesheet for

    Code:
    img {
    max-width: 100%;
    max-height: 100%;
    }
    And edit it thus:

    Code:
    img {
    max-width: 100%;
    max-height: 100%;
    height:auto;
    
    }
    By all means use and develop as you wish but remember this is posted in good faith without any warranty or guarantee express or implied.

    Thank you.
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Any else tried this? I would like to give this a go.

    Phil Howell
    Director
    Intuition Un Ltd
    www.turmerlicious.com A range of delicious Turmeric Latte's #veryaddictive

    Also
    Awarding winning publishers of Natal Hypnotherapy™, the UK's leading provider of hypnosis for conception, pregnancy and child birth having helped over 100,000 women through antenatal courses and self hypnosis CDs
    www.natalhypnotherapy.co.uk Hypnobirthing in English
    www.natalhypnotherapy.fr Hypnobirthing in french
    www.hypnobirthingclass.online Online antenatal training

    Comment


      #3
      That is largely superceded by Norman's WebP plugin which is fantastic. Way better than simple image.
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        Hi Jonathan,

        Thanks for that. I agree Normans WebP plugin in is makes sorting images out an absolute breeze. I still get message from Google Page Insights complaining about image sizes (the measurements not the KiB) so I think SellerDeck still need a solution for that.

        Are you aware of anything to resolve the Google Page Speed Insights "Image elements do not have explicit width and height" issues that get flagged with SellerDecks Swift design?

        Thanks

        Phil
        Phil Howell
        Director
        Intuition Un Ltd
        www.turmerlicious.com A range of delicious Turmeric Latte's #veryaddictive

        Also
        Awarding winning publishers of Natal Hypnotherapy™, the UK's leading provider of hypnosis for conception, pregnancy and child birth having helped over 100,000 women through antenatal courses and self hypnosis CDs
        www.natalhypnotherapy.co.uk Hypnobirthing in English
        www.natalhypnotherapy.fr Hypnobirthing in french
        www.hypnobirthingclass.online Online antenatal training

        Comment


          #5
          Yes, you mean adding height and width to the <img> tag? This is good as it helps page load speed because the browser then knows how much space to allocate.

          It is my understanding that these values are overwritten by styles etc. so it may be worth adding them with arbitrary values like this maybe:

          Code:
           <img src="<actinic:variable name="ProductImageFileName" />"
          id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
          title="<actinic:variable name="ProductName" encoding="strip"/>"
          alt="<actinic:variable name="ProductName" encoding="strip"/>"
          width:="300"
          height="200"/>
          or

          Code:
          <img src="<actinic:variable Name="SectionImageFileName"/>" width:="300" height="200" class="lazy lazyload img-responsive product-summary-image ml-auto mr-auto" alt="<actinic:variable name="SectionName" encoding="strip"/>">
          You would only need to do it once for each image layout. I think this is something you would need to experiment with to see if it works in your situation and to see if it satisfies https://gtmetrix.com/ etc,
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            Look in the 'WebP Common Code' Layout and line 206

            Add height:autoi!Important; like this:

            Code:
            echo "&lt;style&gt;.wpw-$webpnewwidth img{width:$webpnewwidth" . "px!important; height:auto!Important;}&lt;/style&gt;";
            corrected as per Norman's post below:

            HTML Code:
            echo "<style>.wpw-$webpnewwidth img{width:$webpnewwidth" . "px!important; height:auto!Important;}</style>";
            See if that works for you
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment


              #7
              Jonathan,

              The Forum has munged your code in the post above. The line (before tweaking) was:
              Code:
              echo "<style>.wpw-$webpforcewidth img{max-width:$webpforcewidth" . "px!important;}</style>";
              Before posting code, I think you need to click the Source icon [<>] on the top left of the edit pane in order for special characters to be left alone.

              Had an eye operation yesterday and not seeing well so can't help further.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Thank you Norman - hope all goes well
                Jonathan Chappell
                Website Designer
                SellerDeck Website Designer
                Actinic to SellerDeck upgrades
                Graphicz Limited - www.graphicz.co.uk

                Comment

                Working...
                X