Best way to put a photo with text

All WYSIWYG Web Builder support issues that are not covered in the forums below.
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
Post Reply
teterpi
 
 
Posts: 35
Joined: Mon Nov 14, 2022 11:08 pm

Best way to put a photo with text

Post by teterpi »

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?
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Best way to put a photo with text

Post by crispy68 »

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?
teterpi
 
 
Posts: 35
Joined: Mon Nov 14, 2022 11:08 pm

Re: Best way to put a photo with text

Post by teterpi »

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.
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Best way to put a photo with text

Post by alan_sh »

I'm thinking...
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Best way to put a photo with text

Post by alan_sh »

Use a layout grid and a card.

Here's an example https://www.dropbox.com/s/c1rb0c573ua0m ... c.zip?dl=1

Have fun

Alan
teterpi
 
 
Posts: 35
Joined: Mon Nov 14, 2022 11:08 pm

Re: Best way to put a photo with text

Post by teterpi »

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.
Last edited by teterpi on Wed Nov 30, 2022 2:06 am, edited 1 time in total.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Best way to put a photo with text

Post by crispy68 »

The link works ok for me.
teterpi
 
 
Posts: 35
Joined: Mon Nov 14, 2022 11:08 pm

Re: Best way to put a photo with text

Post by teterpi »

Got it. Thank you. Really appreciate your help.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Best way to put a photo with text

Post by crispy68 »

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.
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Best way to put a photo with text

Post by alan_sh »

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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Best way to put a photo with text

Post by crispy68 »

@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.
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Best way to put a photo with text

Post by alan_sh »

Did you look at what I uploaded? (the WBS file). What issue are you having with it?

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

Re: Best way to put a photo with text

Post by crispy68 »

Yes, it's just a card in a layout grid.

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.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Best way to put a photo with text

Post by protectourlands »

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
 
 
Posts: 35
Joined: Mon Nov 14, 2022 11:08 pm

Re: Best way to put a photo with text

Post by teterpi »

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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Best way to put a photo with text

Post by crispy68 »

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.
teterpi
 
 
Posts: 35
Joined: Mon Nov 14, 2022 11:08 pm

Re: Best way to put a photo with text

Post by teterpi »

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.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Best way to put a photo with text

Post by protectourlands »

You bet. But take crispy68 up on his offer. He is top notch when it comes to using the layout grid.
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Best way to put a photo with text

Post by protectourlands »

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.
Post Reply