Page 1 of 1
Image in Flex container vanishes
Posted: Thu Apr 30, 2020 3:59 pm
by Alan
Using a Flex Container, I imported a Background image through the file dialogue under Style and centred horiz and vert & size = Contain.
This looks perfect in the editor, but the image vanishes in preview.
What have I got wrong?
My objective is for the image to scale smaller as the view port is made narrow, for desktop or device use.
Re: Image in Flex container vanishes
Posted: Thu Apr 30, 2020 5:11 pm
by Pablo
Did you use a valid filename?
http://www.wysiwygwebbuilder.com/forum/ ... f=10&t=131
Please always include a demo project so I can see what you have done.
Re: Image in Flex container vanishes
Posted: Thu Apr 30, 2020 6:32 pm
by crispy68
Since you are adding the image as the background of the flex container and doesnt sound like you have anything inside the container then there is no height to the container which is why you are not seeing an image. There needs to be content added to the container for you to see the background image.
If you are simply wanting the image to scale in a container (without anything else), then just add it to a layout grid, set full-width to True and set a maximum width if desired.
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 8:33 am
by Alan
Thank you both, that has not solved my difficulty.
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 9:34 am
by Alan
I am working with another template from the Template Page
http://www.wysiwygwebbuilder.com/templa ... ecoast.zip
and as you know, the image content is stripped out of the download version.
I assumed all I would have to do was pop in my own images, but this just doesn't work.
The file name of the image is fine, as far as I can tell. It shows in the editor, so what more can I do?
It fails to show in the preview or publish.
Pablo directed me to a link about file names and such, and it mentions the index
However, there is no index in the page lists to this template. I can't grasp how this is supposed to work now. Some clarification on index or no index please.
Here is the link to the template I have actually altered and with my images in both containers. 1 for each of the 2 pages.
Perhaps you can explain where I am going wrong.
Thanks
https://1drv.ms/u/s!ArAx9oM6899Rgext__5 ... Q?e=5gltwE
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 10:17 am
by Pablo
and as you know, the image content is stripped out of the download version.
The images are included, maybe you have installed the template the wrong way?
Related tutorial:
http://www.wysiwygwebbuilder.com/using_templates.html
The file name of the image is fine, as far as I can tell.
Sorry, but the file names are invalid. Using spaces or other special characters in filenames for websites is not correct.
Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... f=10&t=131
However, there is no index in the page lists to this template.
Right click the page name in the Site Manager and select 'rename'.
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 11:25 am
by Alan
Hi Pablo, thanks for being so patient. I hang my head in shame about the file names and the fact Templates have to be installed.
Regarding the 'index', are you saying I have to choose either wb15_atthecoast OR wb15_atthecoast_with_breakpoints and rename one as index and delete the other?
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 12:06 pm
by Pablo
If you want an index page then just rename the page you are working on to 'index'.
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 1:43 pm
by Alan
I mistakenly thought the index page was an essential piece of the web page structure.
Thanks for clearing that up.
Re: Image in Flex container vanishes
Posted: Fri May 01, 2020 1:48 pm
by Pablo
I thought the index page was an essential piece of the web page structure.
The index page is essential.
However, in most templates I gave the demo page a different name to prevent that the existing index page on the server will be overwritten when the user accidentally clicks 'Publish'.