Best way to put a photo with text
Forum rules
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Best way to put a photo with text
I have some long articles that need a couple pictures inline all in one column. I've started to watch tutorials on layout grids, but they don't seem to have what I need, or I don't understand. Before I dive into long videos, could someone suggest the best way to approach my simple layout?
Re: Best way to put a photo with text
When you say inline all in one column, do you mean picture at the top and all text underneath? Do you have an example of what you are looking for?
Re: Best way to put a photo with text
Thank you. Well I'm not sure how to add a photo here. But my screen print looks like this:
[A bunch of paragraphs]
Image
[A bunch of paragraphs]
Image
[A bunch of paragraphs]
Image
etc.
[A bunch of paragraphs]
Image
[A bunch of paragraphs]
Image
[A bunch of paragraphs]
Image
etc.
Re: Best way to put a photo with text
I'm thinking...
Re: Best way to put a photo with text
Use a layout grid and a card.
Here's an example https://www.dropbox.com/s/c1rb0c573ua0m ... c.zip?dl=1
Have fun
Alan
Here's an example https://www.dropbox.com/s/c1rb0c573ua0m ... c.zip?dl=1
Have fun
Alan
Re: Best way to put a photo with text
Thank you....that link didn't work...I think it's missing something.
Oh I see the all the link is there. I tried some other dropbox links from your posts, but they didn't come either.
Oh I see the all the link is there. I tried some other dropbox links from your posts, but they didn't come either.
Last edited by teterpi on Wed Nov 30, 2022 2:06 am, edited 1 time in total.
Re: Best way to put a photo with text
The link works ok for me.
Re: Best way to put a photo with text
Got it. Thank you. Really appreciate your help.
Re: Best way to put a photo with text
A simple layout grid also works. Just insert your text followed by your image and repeat. To add spacing between your text and the previous image just add some top padding to the text object.
Re: Best way to put a photo with text
Crispy - I tried that first and it all depends on the width you select and how wide the layout grid cell is. Also, as you reduce the size, the text can 'underlay' the image as it resizes itself.
I found that a card was much easier and produced the results the OP wanted.
Alan
I found that a card was much easier and produced the results the OP wanted.
Alan
Re: Best way to put a photo with text
@Alan,
I guess i'm not understanding. How is the text going underneath the image? If the image is set to full width this doesn't happen. If I select the image to not be full width and just use it's original size, I still don't get the text to go underneath the image. It still works for me. Maybe i'm not understanding your exact set up. To me adding a card to a grid only adds additional code to the page that may be unnecessary if the layout is very simple.
I guess i'm not understanding. How is the text going underneath the image? If the image is set to full width this doesn't happen. If I select the image to not be full width and just use it's original size, I still don't get the text to go underneath the image. It still works for me. Maybe i'm not understanding your exact set up. To me adding a card to a grid only adds additional code to the page that may be unnecessary if the layout is very simple.
Re: Best way to put a photo with text
Did you look at what I uploaded? (the WBS file). What issue are you having with it?
Alan
Alan
Re: Best way to put a photo with text
Yes, it's just a card in a layout grid.
I was referring to your statement:
I was referring to your statement:
tried that first and it all depends on the width you select and how wide the layout grid cell is. Also, as you reduce the size, the text can 'underlay' the image as it resizes itself.
- protectourlands
-
- Posts: 443
- Joined: Sat May 24, 2008 2:16 am
- Contact:
Re: Best way to put a photo with text
While cards have their purpose, I think crispy68 is right.
teterpi, what you are looking to do is very basic grid layout functionality. With the layout grid you have the option of setting your text and image pairs in a single column all the way down the page, or as an alternative side-by-side (2 column) for larger screens, then "stack" (single column) with image on top of text (or vice versa) when being viewed on smaller screens by setting a breakpoint in the layout grid settings.
You can see an example in a website I am currently working on:
http://compasssleep.com/
and
http://compasssleep.com/aboutus.html
It is text left of image, then text over image on smaller screens, but you can easily reverse that by switching where you place the objects in the layout grid. I hope this helps.
teterpi, what you are looking to do is very basic grid layout functionality. With the layout grid you have the option of setting your text and image pairs in a single column all the way down the page, or as an alternative side-by-side (2 column) for larger screens, then "stack" (single column) with image on top of text (or vice versa) when being viewed on smaller screens by setting a breakpoint in the layout grid settings.
You can see an example in a website I am currently working on:
http://compasssleep.com/
and
http://compasssleep.com/aboutus.html
It is text left of image, then text over image on smaller screens, but you can easily reverse that by switching where you place the objects in the layout grid. I hope this helps.
Re: Best way to put a photo with text
I started a new project file after reviewing help from forum. The layout grids for text and pictures are staying lined up. So it seems like my old file was just not working, maybe because I made so many changes on many pages...?
Last edited by teterpi on Thu Dec 01, 2022 4:18 am, edited 1 time in total.
Re: Best way to put a photo with text
Can you provide me a demo project with what you're trying to do? You can send it to me at ron@wizbangwebdesign.com
What i envision is very simple but maybe I'm missing something and seeing your setup will help.
What i envision is very simple but maybe I'm missing something and seeing your setup will help.
Re: Best way to put a photo with text
To protectourlands -i just saw your Post. Yes, if I could only do something like Compass and it does seem simple. That's very nice by the way. The layout grids seem to have their own mind. I generally understood what you were saying....I'll keep trying.
- protectourlands
-
- Posts: 443
- Joined: Sat May 24, 2008 2:16 am
- Contact:
Re: Best way to put a photo with text
You bet. But take crispy68 up on his offer. He is top notch when it comes to using the layout grid.
- protectourlands
-
- Posts: 443
- Joined: Sat May 24, 2008 2:16 am
- Contact:
Re: Best way to put a photo with text
Layout grid is a very powerful, feature rich tool. Remember each column in the grid can have its own justification value (left, right, center). These can also vary by breakpoint. It is likely you were not setting the correct justifications in your first attempt.
Also, If you need to change the order of columns or the vertical alignment in different breakpoints you will need to set the Grid System to Flexbox or CSS Grid instead of the default layout grid. You run the risk of older browsers not supporting these attributes, but I don't think there are many users left with browsers that old so I don't worry about that.
So glad it eventually worked out for you.
Also, If you need to change the order of columns or the vertical alignment in different breakpoints you will need to set the Grid System to Flexbox or CSS Grid instead of the default layout grid. You run the risk of older browsers not supporting these attributes, but I don't think there are many users left with browsers that old so I don't worry about that.
So glad it eventually worked out for you.