WebYep and Responsive Pictures

Freeway
1

Hi
I’m trying create a news page for a clients’ website. They would like to be able to use pictures but I can’t get the pictures to behave responsivly. I assume this is because they are not imported as Pass-Through images.
Is there a work around for this?

Kev

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Hi Kevin
Depending on how you have created the structure and how you have inserted the webyep images then yes you can have responsive webyep images

Roughly this is how you could do it

  1. insert a normal div and resize it the size you want

  2. make sure this is set up so its responsive e.g. percentage based

  3. apply the webyep image to that div

  4. in the action palette set the width to fixed and height to: do not scale

  5. click on IMG tag extended button and paste this

      style="height:auto; width:100%"

  6. publish

now as long as the surrounding div is responsive the webyep image will scale to accommodate the available space.

Iv’e made a lot of assumptions with these instructions because you haven’t given me any clue how you have constructed the page and its contents, so there is no way for me to know if this works but it shouldn’t be far off.

all the best max

max

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Hi Max
Tried this but no joy. And in doing so the picture quality has dropped really low.
Page can be seen here:
http://directpallets.com/news2.php

Also is there any way to not leave a space if no picture is required?

I tried a different layout to accommodate this but somehow the whole page lost responsiveness.

Kevin

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Hi Kevin I just manually adjusted your html within a browser based on something similar to what I described above and it worked so it will work

looking at your output you are not applying the webyep image to a div, it looks like you are inserting a standalone webyep image into the div called item3
so to make this work I think you will need to

  1. in the action palette set both width and height to: do not scale this means webyep wont change the resolution in anyway. but bear in mind you need to scale that image your self so if you are uploading a 4000px wide image then webyep wont scale it and the site will become massive in size.

  2. click on IMG tag extended button and paste the style

      style="height:auto; width:100%"

  3. publish

i just tried it manually on your html and it was fine

please note you will need to re-upload the images because the ones which were uploaded have already been scaled and hence why you may have seen a degradation in quality if it needed to upscale

max

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Thanks Max.
It’s working fine now.

Kev

freewaytalk mailing list
email@hidden
Update your subscriptions at: