Problems with my site, and how to proceed

stevecps · 2014-01-08 00:47:45

Good morning, Matthew and Rod,

I should warn you that I know just about nothing about setting up a website, coding, stylesheets, or any of that stuff. So you should pat yourselves on the back for coming up with all your wonderful TTG stuff that I've actually been able to do something with, and get something online. Thanks!

I should also let you know that a lot of what I've done on the site -- positioning, formatting, etc. -- has been by guess, or by playing with snippets of code found online. How I've used this code, and how/where I've positioned it based on your structure is probably all very bad website behavior.

Before I go further, the site is http://www.caribbeanphotosource.com
To access the locked gallery under "For Clients", use cps guest as both username and password. (Inside that locked gallery are multiple "open/unlocked" galleries. The galleries under the "Albums" menu are all "open/unlocked.") (With the exception of the opening slideshow, the galleries to date are still incomplete and just a beginning to get things working.)

I'm at the point in setting up my site where I need some problem solving help, and also some advice (any and all you can provide would be great!). Things seem to be working as hoped on the laptop version, but they're not behaving as well on the iPad version. (If you're able to compare the two, my problems may be more clear.)

I'd like to make some progress with the site, improve it, and add more galleries/albums, but I'd like to solve the current problems before I create even more work (or more problems)...

Problem 1. The opening slideshow
1. On the opening screen, when the iPad is in portrait format, the white border -- which should frame the slide show images -- shows only on the top edge of horizontal images, and only on the top and two sides of vertical ones. When the iPad is turned to landscape format, the white border appears on the top and bottom of horizontal images but not the bottom. And still on only the 3 edges of the vertical images.

2. The horizontal images in the slide show, in the iPad version, are also not showing full frame; they appear cropped slightly on both sides.

3. On the laptop version of the home screen, the little white arrows that appear on the left and right edges of the photos are not symmetrical -- the one on the left overlaps the border. (But this is a very minor thing.)

Problem 2. The logo and adjacent text at the bottom of the page
1. At the bottom of each page of the site, I managed to position a centered logo and, to the right of it, a few lines of text with hard returns. The text appears correctly on the laptop version and on the landscaped iPad, but on the portrait-mode iPad, the lines wrap rather than resize to fit the space. (If I include the text as part of the logo graphic, I don't know how to keep the logo centered and the text offset. So ideally the text would resize so suit the screen.)

Problem 3. Thumbnail frames missing
On the laptop version, if you drill down through galleries under "Albums," for example, and open the gallery called "Best of Antigua Classic, 2013," you'll see that the thumbnails are sitting in light gray frames, with black identification text (name and number) inside the bottom of each frame. This is how it should appear, and it does on the laptop version, for all the galleries under both "Albums" and "For Clients."

1. On the iPad version, these gray frames are not visible. Instead, the thumbnails sit on the dark blue background, as does the identification text of each image (not nearly as attractive, and difficult to read).

Problem 4. Page loading problem
The site is organized with "open (unlocked)" nested galleries under the Albums header, and with "open" nested galleries inside "locked" galleries (just one so far) under the "For Clients" header.

1. On the iPad, when at the second level down within the Albums page (click on "Sailing and Yaching" to see the text and the icon for "Antigua Classic Yacht Regatta"), if I then open the drop down menu and click on "For Clients," the new page will not open -- instead the little "loading" indicator moves about an inch then starts jerking.

2. On the laptop, if I do the same thing as described above (open the drop down menu and click on "For Clients", the link attempts to go to the Home page then puts up an "Image not found" error message for the first image in the slide show. From elsewhere on the site, the link appears to always work properly.

3. If, in each of these scenarios, I click the "Back" button on my browser, then access "For Clients" from the drop down menu again, the link works.

4. All of the other pages ( Info, Who We Are, etc.) load properly when accessed as described above.

Other questions:
1. Typography. I'd like to change the type set -- still Futura if possible but not cast in stone -- to one that includes a condensed version. Partly to make the typography a little more stylish, but also so that a longish gallery name will fit better across the width of the thumbnail, for example. Can this be done from within what is already built (even universally?), or do I have to start from scratch? Either way, any advice would be appreciated.

2. Publisher. I haven't yet used Publisher, and I'm still somewhat confused reading the documentation. But I'd like to start using it. Can my existing galleries (particularly the many that are currently in the "For Clients" section) be converted to use with Publisher, or do I have to rebuild all the existing galleries within Publisher. (Any and all direction appreciated.)

3. Index or search function. Is there any way an index or search function can be built into the site (a Google search, for example) to find images based on name, caption, or keywords? It would make image searching by clients much easier!

Other notes:
1. I like the way the "Info" page appears on the laptop version, and on the landscape-view iPad. I don't mind the single-column treatment that shows in the portrait-view iPad. But is there a reason this happens?

2. Same comment about the "Who We Are" page.

Thanks in advance for everything,
Best,
Steve

rod barbee · 2014-01-08 01:15:34

I'll try to address some of these separately.

Problem 2. The logo and adjacent text at the bottom of the page
1. At the bottom of each page of the site, I managed to position a centered logo and, to the right of it, a few lines of text with hard returns. The text appears correctly on the laptop version and on the landscaped iPad, but on the portrait-mode iPad, the lines wrap rather than resize to fit the space. (If I include the text as part of the logo graphic, I don't know how to keep the logo centered and the text offset. So ideally the text would resize so suit the screen.)

The lines wrap because the image is floated left. As the screen size diminishes there's less room for text and it floats around the image.
One solution is to use responsive grid code inside the footer and place the image in one section and the text in the other. On mobile devices the grid will reshape itself and your logo will be above the text.
Another solution would be to size the image so that it's tall enough that the text won't wrap around it. I like the responsive grid solution myself.

rod barbee · 2014-01-08 01:35:54

Problem 3. Thumbnail frames missing
On the laptop version, if you drill down through galleries under "Albums," for example, and open the gallery called "Best of Antigua Classic, 2013," you'll see that the thumbnails are sitting in light gray frames, with black identification text (name and number) inside the bottom of each frame. This is how it should appear, and it does on the laptop version, for all the galleries under both "Albums" and "For Clients."
1. On the iPad version, these gray frames are not visible. Instead, the thumbnails sit on the dark blue background, as does the identification text of each image (not nearly as attractive, and difficult to read).

when the page goes responsive for mobile devices, you'll loose the framing around the pictures, this is to save space on mobile devices. As the device gets smaller, like an iPhone, the text will go away as well.
I suppose you could change the text to white for mobile devices using custom css. Otherwise think about changing the color scheme a bit.

Also, you're using an older version of CE3 Gallery. Be sure to grab the latest (5.2.2)

rod barbee · 2014-01-08 01:50:54

Problem 4. Page loading problem
The site is organized with "open (unlocked)" nested galleries under the Albums header, and with "open" nested galleries inside "locked" galleries (just one so far) under the "For Clients" header.

Your For Clients link goes to something strange:

http://caribbeanphotosource.com/galleries/SAILING_AND_YACHTING/ANTIGUA_CLASSIC_REGATTA_2013/Best_of_Antigua_Classic_2013/clients

Although once at that page, clicking Clients again takes me to your real Clients page. But the For Clients link on that page goes to /clients/clients

This is the reason you can't access your page, for some reason, instead of giving a 404 page not found error it's trying to load your Home page. And because it's trying to do that from a different location than where the page is actually located, it can't find any images to load into the slideshow.
So fix your navigation and that should solve that issue.

the problem you're having with
So one thing you need to do is clean up your navigation. With multi level indexes and galleries, it's best to use absolute URLs in your navigation rather than relative URLs.

Also, can you check the username and password for your locked index. I've tried cps guest as both username and password as well as using combinations of cps and guest and still can't access the page.

rod barbee · 2014-01-08 01:55:26

1. Typography. I'd like to change the type set -- still Futura if possible but not cast in stone -- to one that includes a condensed version. Partly to make the typography a little more stylish, but also so that a longish gallery name will fit better across the width of the thumbnail, for example. Can this be done from within what is already built (even universally?), or do I have to start from scratch? Either way, any advice would be appreciated.

You can change typography from the Site Info control pane. Enter any font you have on your system. If you've set up all your pages to Share Resources with TTG CE3 Pages, then for any areas using those shared resources, the font family will be applied. Keep in mind though, if the font you choose isn't on the viewer's computer, they'll see the backup font. That's why you specify a font stack.
Another option is to use Google Web fonts. That involves using custom css via phplugins.

rod barbee · 2014-01-08 01:58:36

2. Publisher. I haven't yet used Publisher, and I'm still somewhat confused reading the documentation. But I'd like to start using it. Can my existing galleries (particularly the many that are currently in the "For Clients" section) be converted to use with Publisher, or do I have to rebuild all the existing galleries within Publisher. (Any and all direction appreciated.)

Publisher can't manage already existing galleries. But already existing galleries can stay where they are right alongside any new Publisher managed Albums you add.
If you want to manage those galleries with Publisher, you'll need to delete and republish them. If you plan it out, it's not hard and won't take that long. If you decide to go that route and need some guidance, just post in the forum again.

rod barbee · 2014-01-08 02:07:44

3. Index or search function. Is there any way an index or search function can be built into the site (a Google search, for example) to find images based on name, caption, or keywords? It would make image searching by clients much easier!

No. But take a look at Monte Trumbull's awesome site, he's included a search function that he writes about here: http://community.theturninggate.net/post/3730/#p3730

rod barbee · 2014-01-08 02:09:59

Other notes:
1. I like the way the "Info" page appears on the laptop version, and on the landscape-view iPad. I don't mind the single-column treatment that shows in the portrait-view iPad. But is there a reason this happens?
2. Same comment about the "Who We Are" page.

This is the responsive design in action. Can you imaging three columns of tiny text across a vertical iPad, or even worse, an iPhone? It does what it does to improve readability and user experience.

stevecps · 2014-01-08 02:29:52

Rod, Thanks for all your responses. I'll get to work. For the password you need, please use cpsguest. --all one word. Sorry for my earlier typo.
-steve

rod barbee · 2014-01-08 03:57:38

other than your navigation problems, things are looking pretty much as expected. Except the slide show problem. Not sure what's going on there. It looks like the image border is getting cut off or not included. I'm seeing the same thing happening in Lightroom.
If nothing else, you could remove the borders. That at least would eliminate the inconsistencies

rod barbee · 2014-01-08 04:03:30

one other thing, if you visit your site with Firefox or IE using http://www.caribbeanphotosource.com/ rather than http://caribbeanphotosource.com/ you'll see problems with the web icons. In Firefox, you'll see hex codes where the icons should be. In IE, they simply don't show up.
Here's the fix: http://ce3wiki.theturninggate.net/doku. … _web_fonts

stevecps · 2014-01-08 04:35:29

Thanks, Rod. Everything sounds good except the border problem. I feel the border is quite important to the look and presentation of the site. If you could possibly look a bit further at this, I would really appreciate it. Could it have anything to do with the page and/or image widths/heights I've specified? You could probably tell in a heartbeat by looking at the parameters I set. I could stare at them for a month and still not figure it out...

(As I get going on the other things, I'm sure I'll have more questions, and I really appreciate the time you've already taken with this.)

-steve

rod barbee · 2014-01-08 06:35:28

Matt may have to look at that. I can see that the borders are being applied when I inspect it with Firebug, but why they're getting cut off is past my knowledge level.

I tried messing with image sizes as well as the Galleria width/height settings. But I'm still seeing borders cut off. Even tried using Image Frame instead.

got to thinking a bit more....

I did find this using the Google machine: http://stackoverflow.com/questions/4077 … -big-image
Which led to this page: http://galleria.io/docs/options/imageMargin/

One of the comments in that first link mentioned that you need to set the imageMargin to twice what your needs are. So if your border is set to 4px, set imageMargin to 8

I tried it and it seems to work.

You'll have to go into the Pages web engine to do this. The file is located where you installed Pages in the /resources/galleria/galleria-1.3.2.min.js file. Search for imageMargin. You'll see that it's set to a default of 0. Just change that to what you need. Save the file, and relaunch Lightroom.

Matthew · 2014-01-08 10:53:37

The borders shouldn't be there at all. Looks like they're carrying over from the settings for the block image, but that would be a bug.

stevecps · 2014-01-08 22:23:20

Good morning, Matthew,
Now I'm really confused! The border shows perfectly on my laptop (MacBook Pro) running Safari; problems only on the iPad. So to correct things, can you tell me what to do? I assume I have to remove the border settings for the block image, and create border settings for the slideshow? If so, is the method obvious once I (keep in mind I'm entirely new to all this) delve back into Pages? Thanks.

Last edited by stevecps (2014-01-08 22:24:09)

rod barbee · 2014-01-08 22:39:27

What Matt is saying is that the image border was never intended to show and that the fact that they are showing is a bug.

It's not just iPads, etc. If you change the browser size on your laptop you'll see the problem crop up again. So if desktop users resize their browser window the same thing happens.

I found a work around by making a change in the Galleria script, as I mentioned above. I'll qualify that by saying it worked in Lightroom with the preview area set to varying sizes. I didn't try it on a live site.

Matthew · 2014-01-08 23:33:13

So to correct things, can you tell me what to do?

Yeah. Remove the borders from image in "the block" settings. They shouldn't be affecting the Galleria slideshow at all. That's a bug, and the fix -- when a fix happens -- is going to be to remove the borders entirely from the slideshow, so that the block's image settings don't impact it at all.

stevecps · 2014-01-09 01:25:01

Thanks both of you. I'll give this a try, although "real" work may not let me address it immediately. I'll let you know the result.

Meantime, any thought on why the sides of the horizontal images in the same slide show are cropping off? I might as well deal with this at the same time.

rod barbee · 2014-01-09 02:42:31

I see you're using Pages 6.1.4, which contains an older version of Galleria. Try updating to the latest version of Pages (6.1.6) to see if that helps.
http://ce3wiki.theturninggate.net/doku. … _changelog

rod barbee · 2014-01-09 02:46:25

Also, in the Galleria setup, try changing imageCrop from Height to Fit(false)

Matthew · 2014-01-09 14:42:39

... any thought on why the sides of the horizontal images in the same slide show are cropping off?

Because, as I said, the borders are not supposed to be there. The gallery scales the image according to the size of the image, not the size of (the image + borders).

Community @ The Turning Gate

#1 2014-01-08 00:47:45

Problems with my site, and how to proceed

#2 2014-01-08 01:15:34

Re: Problems with my site, and how to proceed

#3 2014-01-08 01:35:54

Re: Problems with my site, and how to proceed

#4 2014-01-08 01:50:54

Re: Problems with my site, and how to proceed

#5 2014-01-08 01:55:26

Re: Problems with my site, and how to proceed

#6 2014-01-08 01:58:36

Re: Problems with my site, and how to proceed

#7 2014-01-08 02:07:44

Re: Problems with my site, and how to proceed

#8 2014-01-08 02:09:59

Re: Problems with my site, and how to proceed

#9 2014-01-08 02:29:52

Re: Problems with my site, and how to proceed

#10 2014-01-08 03:57:38

Re: Problems with my site, and how to proceed

#11 2014-01-08 04:03:30

Re: Problems with my site, and how to proceed

#12 2014-01-08 04:35:29

Re: Problems with my site, and how to proceed

#13 2014-01-08 06:35:28

Re: Problems with my site, and how to proceed

#14 2014-01-08 10:53:37

Re: Problems with my site, and how to proceed

#15 2014-01-08 22:23:20

Re: Problems with my site, and how to proceed

#16 2014-01-08 22:39:27

Re: Problems with my site, and how to proceed

#17 2014-01-08 23:33:13

Re: Problems with my site, and how to proceed

#18 2014-01-09 01:25:01

Re: Problems with my site, and how to proceed

#19 2014-01-09 02:42:31

Re: Problems with my site, and how to proceed

#20 2014-01-09 02:46:25

Re: Problems with my site, and how to proceed

#21 2014-01-09 14:42:39

Re: Problems with my site, and how to proceed

Board footer