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

peter · 2017-11-23 02:07:45

I am starting the day making a full backup locally... should have done that a couple of days ago...
Then I am going to copy the 'file set' back into an online test dir. and work with that so I don't screw up the original

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

I think there's a much easier way to approach the size of the heart picture.
In your code, it's inside a <p> tag. And at the current size of the picture, on the desktop it's only taking up about a quarter of width of the paragraph it's in.

You could try simply adding a little bit of inline css to each img tag and that heart could be set to take up, say 25% of the size of its parent container (the <p> tag). So as the browser width gets narrower, so does the paragraph. And the picture would always be 25% of the width of the paragraph.

Try this instead of the img code you're using now:

<img src="http://www.marlajenkinsphotography.com/backlight/designer/?c=page&amp;a=image&amp;p1=23" alt="Alt Text" style="max-width:25%;"/>

the heart image file isn't huge so you really won't be saving much on load time by loading different sized images depending on the browser width.

rod barbee · 2017-11-23 02:16:57

peter wrote:

I am starting the day making a full backup locally... should have done that a couple of days ago...
Then I am going to copy the 'file set' back into an online test dir. and work with that so I don't screw up the original

that's an excellent idea, and why I keep my test sites.

peter · 2017-11-23 02:18:23

Nice - I'll have to wait for this backup to finish, but that looks like it will do it.
Thank you Rod.

rod barbee · 2017-11-23 02:55:32

At least it's less complicated than needing to create multiple images for different sized displays and writing the code for it.

charlie.choc · 2017-11-23 02:58:34

rod barbee wrote:

At least it's less complicated than needing to create multiple images for different sized displays and writing the code for it.

I agree, the <picture> tag is more useful when the images are actually different rather than just different sized but in your case it is overkill.

peter · 2017-11-23 03:59:59

So the code this am. had the wrong (old test) link in it and also, was missing the changes I had done to align the image to the left.
Did someone modify that page last night??

peter · 2017-11-23 04:04:41

I had a backup, so it's back to normal and added the 25% style

peter · 2017-11-23 04:21:11

(I haven't done a test site yet - my back-up is still running).
I see the scaling working on windows, but the mobile is not any better.
Starting the thought pattern from scratch, I need the 3 features to always be the same width as the slideshow, which is expands to whatever it's being viewed on.
Is there a way of specifying a container that obeys that?

Edit:
div.container {
width: 100%;
}

But, I have to figure out where to put it.
I'm going to add a test page

Last edited by peter (2017-11-23 04:28:18)

charlie.choc · 2017-11-23 05:04:17

Here's a link to some tips on responsive web design, but it can get complicated so you might be going down a rabbit hole.

https://www.w3schools.com/html/html_responsive.asp

rod barbee · 2017-11-23 05:19:06

peter wrote:

(I haven't done a test site yet - my back-up is still running).
I see the scaling working on windows, but the mobile is not any better.
Starting the thought pattern from scratch, I need the 3 features to always be the same width as the slideshow, which is expands to whatever it's being viewed on.
Is there a way of specifying a container that obeys that?
Edit:
div.container {
width: 100%;
}
But, I have to figure out where to put it.
I'm going to add a test page

Basically you’d create a custom class in a custom css file and assign that custom class to the div.
You’ll want to learn about media queries too.

What page are you testing on? Can you post a link?

peter · 2017-11-23 05:28:50

Just setting it up...

rod barbee · 2017-11-23 05:34:00

for what it's worth, the sizing is working as intended on your production site's home page

charlie.choc · 2017-11-23 05:36:46

It looked fine to me too but I wasn't sure what he was trying to do.

peter · 2017-11-23 05:44:51

It's about how it looks on a phone.

charlie.choc · 2017-11-23 05:49:47

When I resized the width on a browser window with your main page it looked fine when it got down to mobile width although the text bullet points were aligned vertically instead of horizontally, or do you meanyou want it to resize so it will all fit without scrolling?

rod barbee · 2017-11-23 06:15:40

It looks fine on my phone.
the responsive grid you've placed all that in goes from three columns to one column on mobile devices, with the first section on top and the second and third stacked below. If it didn't do that, each section would be too small for your viewers to read. This is standard responsive design.

peter · 2017-11-23 06:31:36

I understand that's working properly, but I don't like it:

In Portrait view, the text and images are just too big. I would prefer if they scaled down so that they maintain the row and not change into columns.
Yes, the code is designed to do that, so I need to replace it so that a row is always there.

Edit:
In portrait mode, the drawback of this would indeed be, too small to read on some screens.
It would force/persuade them to turn the phone sideways, which is really the best orientation to view the photos.

These are just 'fluff' items anyway, since the menus will have these links.

Last edited by peter (2017-11-23 06:36:04)

rod barbee · 2017-11-23 06:44:45

Well, you could have three columns if you wish. You'd just need to use custom css and rewrite the media query that controls the responsiveness.

This is the media query from the grid framework styling. this controls the float:

@media screen and ( min-width: 992px ) {

	*[class*="col_"] {
		float: left;
		}
        }

You would just need to change the min-width that triggers the float (which is what places the columns side by side). Set it small enough so that you get your three columns when you want them to appear. If it's for a horizontal phone, then set the min-width to the width of a phone when held in landscape orientation. You can google what these widths are.

place this code in a custom css file and upload that file to backlight/custom/css/ and activate custom css in your page template
http://backlight.theturninggate.net/doc … tylesheets

EDIT: looking at the entire media query, there's 24px of padding-left and padding-right being applied to each column.

.grid_12 *[class*="col_"] {
	padding-right: 24px;
	padding-left:  24px;
	}

On smaller screens this might be too much. You might want to write a second media query for a max-width of a phone that reduces this padding a little bit.

peter · 2017-11-23 11:04:39

What if I had a single image the same width as the window, that scaled but stayed in landscape mode. Could it have 3 link hotspots in it?
Is that doable?

Matthew · 2017-11-23 13:59:25

peter wrote:

What if I had a single image the same width as the window, that scaled but stayed in landscape mode. Could it have 3 link hotspots in it?
Is that doable?

That's an image map. No one uses image maps nowadays. Please, don't.

peter · 2017-11-23 14:08:08

Matthew wrote:

peter wrote:
What if I had a single image the same width as the window, that scaled but stayed in landscape mode. Could it have 3 link hotspots in it?
Is that doable?
That's an image map. No one uses image maps nowadays. Please, don't.

Haha!
I was just about to post my findings on that very same thing!
I tried it out and it just doesn't work when you change the window size, as the hotspots are relative to the original image size.
Close though...

peter · 2017-11-23 17:30:43

Ok so my test site is here:

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

I would like to use Backlights way of placing images, since it works so well. Instead of pointing to a gallery (which has only one image) can I change the destinations of these galleries to a page. Where would that file be located on the server?

Last edited by peter (2017-11-23 17:34:46)

rod barbee · 2017-11-23 22:52:01

That looks nice.

I assume you mean using Backlight’s upload images feature?

You could certainly load these images separately via Backlight’s image upload feature, just export them from Lightroom at the size you need to a folder on your computer and upload as normal with the Backlight uploaded.

But I would recommend against it.

The reason why is that images uploaded that way get stripped of their original file name and all metadata. The uploader is great for things like logos, favicons, etc, but not so much for images that might have SEO or other value.
Instead, for images intended to be used inline on pages (like you are doing), I’ve created a folder named “img” in the root of my site and upload those images to that folder via FTP.
And the URL to those images couldn’t be easier: /img/image-name.jpg

peter · 2017-11-24 02:25:01

Hi Rod,

So the reason I used Backlight and Publisher, was to have (3) placeholders that I can control their behavior, using the template settings.
They are added as an album set. Because there is so much control built into how the thumbnails are displayed, I thought I would try this out, I mean, Matt's already done the hard part, why re-invent the wheel? Simply changing columns and margins etc. resizes & repositions the placeholders so I can (eventually) get the look I want at different window sizes and on a mobile.

But... because they are album sets, they link to a gallery page, and I want the link to be a web page. Also, that web page is where the thumbnail is referenced. So I am assuming that, unless I hack the code, this is not the way to do this.
But this is the look that I want to get. Is this maybe a feature request?

It would work like an 'Album set' but it would be a 'Page set'
I just want to have a bit more on the home page than a gallery and menu.
I am following the lead of my wife, who has looked at a lot of other photographers sites and wants a bit more than the slideshow on the main page.
I've talked her out of a Parallax design!!!!!

Community @ The Turning Gate

#51 2017-11-23 02:07:45

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

#52 2017-11-23 02:16:03

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

#53 2017-11-23 02:16:57

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

#54 2017-11-23 02:18:23

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

#55 2017-11-23 02:55:32

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

#56 2017-11-23 02:58:34

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

#57 2017-11-23 03:59:59

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

#58 2017-11-23 04:04:41

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

#59 2017-11-23 04:21:11

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

#60 2017-11-23 05:04:17

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

#61 2017-11-23 05:19:06

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

#62 2017-11-23 05:28:50

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

#63 2017-11-23 05:34:00

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

#64 2017-11-23 05:36:46

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

#65 2017-11-23 05:44:51

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

#66 2017-11-23 05:49:47

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

#67 2017-11-23 06:15:40

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

#68 2017-11-23 06:31:36

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

#69 2017-11-23 06:44:45

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

#70 2017-11-23 11:04:39

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

#71 2017-11-23 13:59:25

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

#72 2017-11-23 14:08:08

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

#73 2017-11-23 17:30:43

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

#74 2017-11-23 22:52:01

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

#75 2017-11-24 02:25:01

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

Board footer