Layout area background pic

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Layout area background pic

Post by syncopic »

Hello Pablo,

first - i´ve bought the WWB17 (now the responsive font size failure is gone) :)
But now i have another issue.

I have a layout area (relative horizontal size) with a background pic. Settings are "repeat in both directions" / centered / centered / universal-parallax - so the view of the background pic is as i want it to see. On 1400px full page size the background pic is visible. On all other breakpoints (1024/768/360) the background pic of the layout area is gone. With mode parallax the background is visible on all breakpoints, but the view isn´t correct (not scaled).

Do you have a solution ? If you need, i made a backup-zip of the complete site, but i don´t want to post it here, depending on copyright material within the project.

Thanks a lot!
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

To be able to help you, I need a DEMO project so I can see all your settings.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

Hello Pablo,

i´ve made a minimal site (masterframe / index).
The ZIP-file is here: https://www.pro-e-fact.de/preview/pablo/test.zip

The background pic on the layout area on the index-site (lay 1) disappears on all lower breakpoints then 1400px (full size).

Thanks for support :)
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

Your masterframe doesn't appear to show the image at the lower breakpoints in WWB. Is that what you mean?

When I loaded it up, the image for the default was on my C: drive (correct), but the image for the 1024 breakpoint was pointing at a K: drive (which I don't have).

The file locations are:

C:\Users\alans\CloudStation\Web sites\testing\test\p_back_dia02_2.jpg
K:\CDR Buffer\2021 Webseite\JPEGs\p_back_dia02_2.jpg

So, either you have hardcoded it somehow or WWB 17 isn't working correctly. I'm not intimate enough with the workings of WWB to know which is true

I hope this helps

Alan
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

Hey Alan,

no, this is not the problem and may cause in reducing a copy of the original project for pablo :)
All the paths in the original project are correct.
The problem is, as i said, that the background pic is not shown in breakpoints below 1400px.

8)
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout area background pic

Post by crispy68 »

I took a look at your project and created a demo from scratch with just the layer. I could see the image in all the breakpoints in the workspace but when previewed the image disappears in the breakpoints.

@Pablo, one thing I noticed in looking at the code is that the height of the "parallax__container" changes in the breakpoint. In my demo, it had a height of 482px but in the breakpoint it goes to zero. Also noticed the <div> inside with class "parallax" height changes dramatically and it should be the same as the default. Not sure if this helps or not to locate the issue.

With further testing, here is what I found:
layer mode = default, with or without relative horizontal sizing -- works in default but not BP's. same issue as above.
layer mode = header/footer, with or without relative horizontal size -- works in default but no BP's. same issue as above.
layer mode = docking layer -- works in default but no BP's. same issue as above.
layer mode = floating layer, floating mode = full width -- works!
layer mode = floating layer, floating mode = default -- works!
layout grid -- images shows up in both workspace and preview but no parallaxing.

tested in 64bit

Update:
On a layout grid, what I found interesting is the background image stays as 'cover' but the content within the layout grid actually parallaxes!

However, I noticed this code was missing in comparison to a floating layer (not sure if all is needed for a layout grid):

Code: Select all

#wb_LayoutGrid1 .parallax__container {
    clip: rect(0, auto, auto, 0);
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -100;
When I added the above code, it seems to work now for layout grid but needs more testing.

hopefully some of this helps.
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

Thanks for the demo project!
I was able to reproduce the problem with help of your project and it should now be fixed in the latest build (9/30/2021)
https://www.wysiwygwebbuilder.com/download.html
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

I downloaded the latest WWB and, yes, the problem in preview has gone.

But why does the properties of the layer in the 1024 breakpoint still show that the image comes from an noneistent K: drive when the default shows the correct C: drive?

All I did was download the demo zip file, unpack it all and put it in my testing folder.

Alan
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

But why does the properties of the layer in the 1024 breakpoint still show that the image comes from an noneistent K: drive when the default shows the correct C: drive?
This is most likely becuase the assets are not stored in the project folder. In that case, the images are saved with absolute paths.
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

I´ve installed newest version and it works ! :D
Thanks to all for support ! ... and @pablo ... very fast and great job !

Greetings to the world :)
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

Pablo wrote: Thu Sep 30, 2021 8:57 am
But why does the properties of the layer in the 1024 breakpoint still show that the image comes from an noneistent K: drive when the default shows the correct C: drive?
This is most likely becuase the assets are not stored in the project folder. In that case, the images are saved with absolute paths.
That does not explain why it is correct for the default breakpoint, but showing as an image on a K: drive on the 1024 breakpoint. I know it doesn't matter, but I am curious as to what is going on.

Alan
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout area background pic

Post by crispy68 »

If memory serves me, I believe it is possible to have different images for the background in breakpoints. Is it possible that the default image was inserted and located on the C drive and the breakpoint image was inserted using the same image off the K drive thus the differences in paths?
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

It is difficult to say without knowing what the local configuration is.
If you disable 'Asset Management' then images can be anywhere on your computer.
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

The original path of the project was a folder on drive F:.
The settings within WWB are "Let WWB handle files" - so all pics, i´m inserting were stored in a (project named) folder within the original main folder on drive F:.
For Pablo`s request i made a (site reduced) copy and stored this copy in a folder on drive K:
This is the reason for the "wrong" paths in my opinion :wink: but has no effect on the original project and paths.

Most important is ... the failure is with the newest version of WWB gone and the background pic is shown the right way in all breakpoints.
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

WIth all my web sites, I have the main .wbs in a directory and all pictures and other assets in a folder with the same name underneath. With your site, I put the file and folder in my testing directory and opened it up. I assume WWB looks at the file name and then works out the path assuming it is in a folder with the same name just underneath the .WBS file. This is what appears to be happening for the default breakpoint image file.

For the image file in the 1024 breakpoint, it has not done this - it has left the complete file path alone and it is showing as k:\....jpg. WWB seems to ignore this complete file structure anyway, so it doesn't matter too much but it is not correct on my machine.

So, correct properties for the default is:

Image

Incorrect is (note also, the image display is not there)

Image

This just feels wrong and I don't understand how it acttually works with these properties.

Alan
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

Maybe the ZIP-program made also any path settings and because of this the paths are "mixed".
In my original project all paths are shown correctly in WWB.
I really think, this occurs in combination of copying the folder to K: and made there the zip-file.
I only checked, if the one pic (which was used for background) was in the subfolder WWB creates automatically.

Normally - if i have to change paths for any reason - i check all paths within WWB but i can´t remember,that i ever had to correct them.

Basic setting is ...
If you make a project "test", a subfolder "test" will be created and all pics, fonts, etc. are stored in this subfolder.
I could not see any problems in several projects with the path settings.
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

The Zip program cannot affect the properties of the layer on the different breakpoints. No, this has to be something that WWB does.

I'd be interested to hear what Pablo says.

cheers

Alan
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

Without knowing the exact configuration it is difficult to say anything meaningful about this.
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

Therefore, that all paths are correct in the original project (on the original drive/folder on my pc), i´m pretty sure, that this is caused on copying the folder to another drive for making a reduced version of the project. Drive K: was only used for the reduced copy.
I´m using the standard settings for file management within WWB.
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

Pablo wrote: Fri Oct 01, 2021 11:26 am Without knowing the exact configuration it is difficult to say anything meaningful about this.
Pablo, it's the test zip file that's in this thread.

Alan
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

I do not know what to local configuration of the computer and how the file was saved.

If you think something is wrong then please describe the exact steps to reproduce the problem.
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

OK.

I downloaded the test.zip file and unpacked the WBS file and the folder to my testing directory.

I think clicked on test.wbs to open it with WWB v17.0.0. Most of the program has default settings. I think the only thing I have changed is to turn of Direct2D.

I selected the Master page. Right clicked on the top layer to open the properties and clicked on the 'Style' tab to show the location of the background picture. This showed the image location as my C: drive - my testing directory.

I then clicked on the 1024 breakpoint and also looked at the layer properties. The image location is shown as the K: drive which I think is the original location before I downloaded it.

The pictures shown in this thread illustrate what I see.

So, my issue is that both breakpoint properties should show the same image. If WWB can alter the default one to be my C: drive, why does it not do the same in the other breakpoints?

Does that help?

Alan
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

So, my issue is that both breakpoint properties should show the same image. If WWB can alter the default one to be my C: drive, why does it not do the same in the other breakpoints?
Because you can use a different background images for each breakpoint, so the path can be different.
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

Yes, but the issue is that the original WBS file had the same filename both pointing to the K: Drive. When I opened it, the one in the default breakpoint had changed to C: and the one in the 1024 breakpoint had not changed. So, why the difference? It means if you move a project, you can get inconsistant results.

PS - sorry, it wasn't in the masterpage, but in the index page.

Alan
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

I think Pablo have given the answer already.

You can choose different pics for each breakpoint. On loading (mostly in full size view), WWB is searching the pic path and find it within the subfolder - but only for full size (because you can set other pics per breakpoint). So the paths in the other breakpoints stay as "it is". I think this is no problem, if you´re using the same pic.

If you have the need to change the original folder of the project with different pics in each breakpoint, you have to check all paths in all breakpoints for getting secure nothing will be left. But normally (if you let WWB manage the files) this is also no problem, because all pics are stored in the subfolder WWB create for each project.

:wink:
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

BUT!

When you view the different break points in WWB, the default one shows the picture and the other ones just show a black background. This could be very confusing as it then isn't WYSIWYG. It can't be that much trouble for the program to check the filenames for all breakpoints, can it?

Alan
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: Layout area background pic

Post by syncopic »

Hmmm ... then you have to check every path after changing the project folder. I´m sure, it´s not often that people have to change the folder 8)
On the other hand - if WWB manages the files, all pics should stay in the subfolder WWB creates automatically and should be found :|
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

I'd be intersted to hear what pablo says
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout area background pic

Post by Pablo »

It can't be that much trouble for the program to check the filenames for all breakpoints, can it?
Actually, it is very difficult . Because unlike the default view which is always visible, the breakpoint data is only loaded when it's needed.
However, you can use the Asset Manager to update the path for all breakpoints.
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout area background pic

Post by alan_sh »

Ok - thank you. Now I know what happens (you only check the default view), I know what to do to fix the issue if I ever see it.

regards

Alan
Post Reply