Backlight web design help with placement, size, color etc of images an

peter · 2017-11-20 10:07:57

rod barbee wrote:

peter wrote:
Looks like I needed this inside <style> </style>
No, you don't.

I guess I thought I did because on the Home page, if I remove that first style set, I lose the graphic. If I put them in again, the graphic comes back. So, it's logic to me.
Yes, that home page is a mess because I didn't want to delete some of the code I put in. So I am using the Portfolio page as a fresh start.
Peter

So if someone can tell me why this page shows the code and not the intended image & text, I would be grateful.
Thanks.

http://www.marlajenkinsphotography.com/test/Portfolio/

Last edited by peter (2017-11-20 12:36:04)

rod barbee · 2017-11-20 12:48:57

peter wrote:

Now I don't know what the h is going on.
Starting from scratch, I typed this in Notepad++ set to ANSI:
<img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23" width="200?
class="alignleft" alt="Text" title="Title text">
Pasted it into this page:
http://www.marlajenkinsphotography.com/test/Portfolio/
And I just see the code.
What is going on?
So frustrating...
Actually, I typed this in to Backlight directly.

you've got errors in the syntax. for instance, a question mark that doesn't belong. try:

<img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23" width="200"
class="alignleft" alt="Text" title="Title text">

any following text should show up to the right of the image.

rod barbee · 2017-11-20 12:50:53

peter wrote:

rod barbee wrote:
peter wrote:
Looks like I needed this inside <style> </style>
No, you don't.
I guess I thought I did because on the Home page, if I remove that first style set, I lose the graphic. If I put them in again, the graphic comes back. So, it's logic to me.
Yes, that home page is a mess because I didn't want to delete some of the code I put in. So I am using the Portfolio page as a fresh start.
Peter
So if someone can tell me why this page shows the code and not the intended image & text, I would be grateful.
Thanks.
http://www.marlajenkinsphotography.com/test/Portfolio/

syntax error. Question mark in width="200?
should be width="200"

rod barbee · 2017-11-20 12:51:54

Here's a good resource to check your page for html errors
https://validator.w3.org/

Matthew · 2017-11-20 14:34:07

Peter,

Stop coding.

Set all of your copy into place using Markdown only. Zero HTML. Paragraphs, images, etc. In Markdown.

Once you've established your content as a base, then you can go back and start massaging the layout with HTML as needed. As you're clearly not comfortable with HTML, though, you'd have a far easier time with things working from a stable base.

You can also insert images using Markdown.
https://github.com/adam-p/markdown-here … eet#images

Here's your image in Markdown:

![Alt Text](http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23)

Matthew · 2017-11-20 14:45:41

Here, I'll even get you started. This Markdown is based on your Home page:

![Alt Text](http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23)

## [Contact](http://www.marlajenkinsphotography.com/test/contact)

Let's get together over a cuppa joe!

![Alt Text](http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23)

## [Prices](http://www.marlajenkinsphotography.com/test/pricing)

We'll try not to break your piggy bank!

![Alt Text](http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23)

## [Reviews](https://www.weddingwire.ca/wedding-photography/marla-jenkins-photography--e2678/reviews)

We'll do an amazing job, but don't take our word for it!

Don't just copy and paste it. Please look at it. See how it's easy to read? That simplicity is the reason Markdown is brilliant.

And that Markdown will render to your page as HTML. So now, if you want to work HTML into the content, inspect the page, then copy the HTML source and use that as your starting point. The above, gives you this HTML:

<p><img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&amp;a=image&amp;p1=23" alt="Alt Text" /></p>
<h2><a href="http://www.marlajenkinsphotography.com/test/contact">Contact</a></h2>
<p>Let's get together over a cuppa joe!</p>
<p><img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&amp;a=image&amp;p1=23" alt="Alt Text" /></p>
<h2><a href="http://www.marlajenkinsphotography.com/test/pricing">Prices</a></h2>
<p>We'll try not to break your piggy bank!</p>
<p><img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&amp;a=image&amp;p1=23" alt="Alt Text" /></p>
<h2><a href="https://www.weddingwire.ca/wedding-photography/marla-jenkins-photography--e2678/reviews">Reviews</a></h2>
<p>We'll do an amazing job, but don't take our word for it!</p>

It's simple, clear, well-formatted, and easy to work with. You can wrap that in DIVs to create a grid layout, or otherwise expand on it in whatever way you like. And because you're starting with good, clean code, you save yourself from a lot of user error. And you can always fall back to this starting code if something gets messed up.

peter · 2017-11-20 15:20:39

Ok, I see.
So you mention once the Markdown is done, look at the source code as it appears in HTML, then replace the Markdown with HTML (assuming I want to start adding images and 'stuff'.
Is that a normal way of how it's done? Or can everything be done in Markdown?

Curious because I want to try to do this properly. I've already gone through all my pages and replaced <center> commands, after finding out they were deprecated.
Thanks for all your help!

Last edited by peter (2017-11-20 15:20:58)

rod barbee · 2017-11-20 15:55:38

What Matt is saying is that the Markdown will render as html on the page. You can look at the source code and see it. Then, if you need to go further, like using the Responsive Grid Layout to place content into columns, you can copy the html and place it in the grid html.
As far as I know, there is no Markdown syntax that will render columns, so that must be done as html.

charlie.choc · 2017-11-20 21:56:26

I'd also suggest that, once you get things working with just markdown and before you start tweaking with HTML you 'clone' your pages in Backlight to 'pagename-save' or something so you have a stable point to get back to if things go sideways. Go to designer > pages and click on the page name and you will see the option to clone the page.

peter · 2017-11-21 02:13:15

Clone pages. That's a good idea. I think I was copy pasting to notepad before.

peter · 2017-11-21 05:18:45

Update:

I have followed the advice and I cleaned up all the pages!

The home page is good, but I couldn't quite figure out how to centre 'Contact', 'Prices' & 'Reviews' to the right of the images.
I used the float command, but I ended up 'cheating' and putting in <br>'s

For the pricing page, I wanted to add bullets. Initially I did that in Markdown, but when I converted to html and added <div style="text-align:center"> the bullets stayed to the left, while the text centred. So I removed the bullets from markdown and copied the ascii character in, instead.

http://www.marlajenkinsphotography.com/test/home/

I can live with this, but if there's a better/simpler way, or some improvements, I'm all ears.

Peter
A question:
I want to add a javascript (for tracking).

Is this ok to add into pages?

Last edited by peter (2017-11-21 05:24:22)

rod barbee · 2017-11-21 06:37:35

Since you're using the alignleft class on the images, they will float left and any text will be to the right with 1.5rem of margin separating the words from the image. If you want it centered I think you'd need to create a more complex grid. If it was me, I'd just live with what you have.
I don't think that line break inside the <h2> tag is doing anything. It's probably not even valid html. I'd remove it.

also, you've got a problem with this bit:

<a href="https://www.weddingwire.ca/wedding-photography/marla-jenkins-photography--e2678/reviews "target=blank">

it should be:

<a href="https://www.weddingwire.ca/wedding-photography/marla-jenkins-photography--e2678/reviews" target="blank">

with the quote mark at the end of the url and "blank" in quotes.

peter · 2017-11-21 07:21:31

I put the <br> in, before the text, so it drops it down lower and closer to the mid point of the heart image.
If I remove it, the text will be in line with the top of the image.
Thanks for picking up the missing ".
I think I'm done for now
Cheers!
Peter

The boss is happy - I'm going 'live'.

Last edited by peter (2017-11-21 07:22:36)

rod barbee · 2017-11-21 07:53:50

You've still got a problem with that code. It still shows "target=blank" It actually should be target="_blank" (don't forget the underscore, like I did above )
right now the link does not open up in a new tab.

peter · 2017-11-21 08:14:48

@#$&#!
Great - thanks again!

rod barbee · 2017-11-21 08:40:04

Just trying to keep the boss happy

peter · 2017-11-22 17:26:34

My final code for the home page turned out perfect for the pc, but when viewed on a mobile, it just doesn't scale very well and so I will have to find a better way of doing it.
http://www.marlajenkinsphotography.com/
In portrait orientation especially, those heart images distract from the main slideshow.

rod barbee · 2017-11-22 22:06:48

You’ll need to use custom css to handle this.
You’ll use a Media Query to resize the heart images when the browser width falls below a certain width you designate.

Custom css: http://backlight.theturninggate.net/doc … tylesheets

charlie.choc · 2017-11-22 22:41:34

I like the HTML <picture> tag for doing things like this but it is not supported in older browsers so you have to make that decision before you use it. In browsers where it is not supported it will just continue to use the default image and not resize, it won't break anything. I use this to have two different sized banner images for desktop and mobile.

Since this is for mobile, I don't think there are many phones out there with browsers that don't support this.

https://www.w3schools.com/tags/tag_picture.asp

Last edited by charlie.choc (2017-11-22 22:52:48)

rod barbee · 2017-11-22 23:03:16

I keep meaning to try the <picture> tag ever since you first mentioned it....

charlie.choc · 2017-11-22 23:08:33

In this case I think he could probably just use it in his page source where he currently inserts the hearts to insert two (or more) different sized ones and wouldn't need to use any CSS.

rod barbee · 2017-11-22 23:47:31

I think you’re right

rod barbee · 2017-11-23 01:42:33

Just poking around the interwebs exploring the <picture> element, and ran across an interesting article that included a way of feeding appropriately sized images via the <img> tag
https://cloudfour.com/thinks/dont-use-p … -the-time/

charlie.choc · 2017-11-23 01:46:40

Interesting.

peter · 2017-11-23 01:54:39

Good morning.
I looked this am. and the images weren't showing up at all. I had the old 'test' dir. path in the code, so the images were not being displayed at all. strange...
Now to read about <picture>...

Community @ The Turning Gate

#26 2017-11-20 10:07:57

Re: Backlight web design help with placement, size, color etc of images an

#27 2017-11-20 12:48:57

Re: Backlight web design help with placement, size, color etc of images an

#28 2017-11-20 12:50:53

Re: Backlight web design help with placement, size, color etc of images an

#29 2017-11-20 12:51:54

Re: Backlight web design help with placement, size, color etc of images an

#30 2017-11-20 14:34:07

Re: Backlight web design help with placement, size, color etc of images an

#31 2017-11-20 14:45:41

Re: Backlight web design help with placement, size, color etc of images an

#32 2017-11-20 15:20:39

Re: Backlight web design help with placement, size, color etc of images an

#33 2017-11-20 15:55:38

Re: Backlight web design help with placement, size, color etc of images an

#34 2017-11-20 21:56:26

Re: Backlight web design help with placement, size, color etc of images an

#35 2017-11-21 02:13:15

Re: Backlight web design help with placement, size, color etc of images an

#36 2017-11-21 05:18:45

Re: Backlight web design help with placement, size, color etc of images an

#37 2017-11-21 06:37:35

Re: Backlight web design help with placement, size, color etc of images an

#38 2017-11-21 07:21:31

Re: Backlight web design help with placement, size, color etc of images an

#39 2017-11-21 07:53:50

Re: Backlight web design help with placement, size, color etc of images an

#40 2017-11-21 08:14:48

Re: Backlight web design help with placement, size, color etc of images an

#41 2017-11-21 08:40:04

Re: Backlight web design help with placement, size, color etc of images an

#42 2017-11-22 17:26:34

Re: Backlight web design help with placement, size, color etc of images an

#43 2017-11-22 22:06:48

Re: Backlight web design help with placement, size, color etc of images an

#44 2017-11-22 22:41:34

Re: Backlight web design help with placement, size, color etc of images an

#45 2017-11-22 23:03:16

Re: Backlight web design help with placement, size, color etc of images an

#46 2017-11-22 23:08:33

Re: Backlight web design help with placement, size, color etc of images an

#47 2017-11-22 23:47:31

Re: Backlight web design help with placement, size, color etc of images an

#48 2017-11-23 01:42:33

Re: Backlight web design help with placement, size, color etc of images an

#49 2017-11-23 01:46:40

Re: Backlight web design help with placement, size, color etc of images an

#50 2017-11-23 01:54:39

Re: Backlight web design help with placement, size, color etc of images an

Board footer