AutoIndex strcuture and Iconic thumbails

chin_spod · 2015-05-11 19:49:02

Good day all,

I purchased CE2 a couple of years ago with a view to developing a website but unfortunately other events took precedence. I’m now back with CE4 (Web Publishing Bundle and Stage) and with a renewed determination to get something released but I seem to have foundered; and probably at the same point that led my CE2 exploits to be shelved. As such I would be grateful for any advice on the following couple of queries.

Having read the documentation and Rod Barbee’s very useful site I have concluded that:

Pages incorporates AutoIndex but this only indexes down one directory level i.e. the Galleries folder so all galleries must be exported to this folder i.e. ‘/galleries/cities’ and ‘/galleries/travel’.

Since I wish to have additional galleries under the ‘/galleries/travel’ folder i.e. ‘/galleries/travel/peru’ I need the AutoIndex Plugin and according to what I’ve read I should export this to the ‘/galleries/travel’ folder. Makes sense but then I read http://ce4.theturninggate.net/docs/doku … _galleries that image galleries should actually go in the autoindex folder. Is that right? Is this folder at the root of the site?

To take that a stage further, to use Publisher I then read http://ce4.theturninggate.net/docs/doku … _templates that the exported AutoIndex folders should reside in /ttg-be/templates/autoindex.

Whilst the site is under development and to avoid over complication I was going to leave Publisher for a while and get the basic framework of the site working. Ultimately what I’m trying to achieve is:

Home – Flip, full screen gallery
Galleries → Cities → CE4 Stage Galleria Slideshow
Galleries → Travel → Peru → CE4 Stage Galleria Slideshow
Galleries → Travel → Bolivia → CE4 Stage Galleria Slideshow
Galleries → Travel → Guatemal → CE4 Stage Galleria Slideshow
Galleries → Favourites → CE4 Stage Galleria Slideshow

So in the above example, where do I copy my exported AutoIndex?

If I make modifications to Autoindex (or any template for that matter) am I best advised to delete the existing folder before exporting/copying an updated version or is it OK to overwrite the existing folder export? I ask as sometimes my changes don’t seem to be reflected on the site (and that’s after clearing the browser cache or ctrl+f5)

My second query relates to the Iconic thumbnails. I’ve created three custom thumbnails 300px by 450px and wish to have my galleries (Cities, Travel, Favourites) referenced by these but I’m confused by the output (not in LR but on the site itself).

The ‘Aspect Ratio’ option doesn’t seem (to me at least) to be particularly intuitive. I’m sure I’ve read that this relates to a container whose size was defined elsewhere and my thumbnails are being shrunk/enlarged to fit this container. Is that correct? If so where is this defined?

What I’m after is my 300px by 450px thumbnails to be displayed that size and for the overlay animation to cover the entire thumbnail. I’ve tried an aspect ratio of 1:1 thinking that would keep the thumbnail its original size but that didn’t work and the overlay only covered 75% of the thumbnail.

I’ve always prided myself on being able to figure out such things by either repeatedly reading the documentation or by a process of trial and error using extreme options/colours etc. to see the effect and then modify accordingly but in this regard I’ve concluded that I must be missing a key concept.

At the risk of being accused of outright plagiarism I’m aiming to achieve something similar to Community member forbish07 and his site http://jforbishphoto.com/

Any help, gratefully received. Thank you.

rod barbee · 2015-05-11 22:13:45

Makes sense but then I read http://ce4.theturninggate.net/docs/doku … _galleries that image galleries should actually go in the autoindex folder. Is that right? Is this folder at the root of the site?

This is correct. If you wanted all of your image galleries to appear on one page, then you'd just upload the exported gallery folder to the /galleries/ folder.
But you want to separate your galleries into sub-indexes.
So you'd create an autoindex (like Travel) and upload the entire exported folder to the /galleries/ folder.
You'll then create and upload galleries (like Peru) to the /galleries/travel/ folder

To take that a stage further, to use Publisher I then read http://ce4.theturninggate.net/docs/doku … _templates that the exported AutoIndex folders should reside in /ttg-be/templates/autoindex

Yes. This is so you can create Album Sets with Publisher.

Whilst the site is under development and to avoid over complication I was going to leave Publisher for a while and get the basic framework of the site working

If you do this, any autoindex or gallery that you export and upload to the /galleries/ folder will not be manageable by Publisher. My suggestion would be to go ahead and upload an autoindex or two to the galleries/ folder and then upload a gallery or two to each autoindex folder. But don't make them huge galleries. Just use test galleries containing an image or two.
After you're comfortable with how the system works, delete all of the galleries and autoindexes and replace them using Publisher.

Home – Flip, full screen gallery
Galleries → Cities → CE4 Stage Galleria Slideshow
Galleries → Travel → Peru → CE4 Stage Galleria Slideshow
Galleries → Travel → Bolivia → CE4 Stage Galleria Slideshow
Galleries → Travel → Guatemal → CE4 Stage Galleria Slideshow
Galleries → Favourites → CE4 Stage Galleria Slideshow
So in the above example, where do I copy my exported AutoIndex?

It looks like you want to have Travel as the autoindex. In this case, create an autoindex and export it, naming it "travel". Upload the entire exported "travel" folder to /galleries/. Then export individual galleries named "peru", "bolivia", and "quatamal" and upload those exported folder to the "travel" folder.

If using Publisher, you'd create an Album Set named "travel" and then inside of "travel" you'd create albums named "peru", etc.

If I make modifications to Autoindex (or any template for that matter) am I best advised to delete the existing folder before exporting/copying an updated version or is it OK to overwrite the existing folder export?

I always overwrite. Make sure you FTP program is set to overwrite.

The ‘Aspect Ratio’ option doesn’t seem (to me at least) to be particularly intuitive. I’m sure I’ve read that this relates to a container whose size was defined elsewhere and my thumbnails are being shrunk/enlarged to fit this container. Is that correct? If so where is this defined?

That's correct. Set the aspect ratio in Appearance > the Autoindex > Iconic : Aspect Ratio
The thumbnails aren't exactly set to "fit" their containers. Instead they're set to the "cover" css background-size property, which will completely fill the container. This means that if the thumbnail image isn't the same aspect ratio, then some of it will be cut off.

What I’m after is my 300px by 450px thumbnails to be displayed that size and for the overlay animation to cover the entire thumbnail. I’ve tried an aspect ratio of 1:1 thinking that would keep the thumbnail its original size but that didn’t work and the overlay only covered 75% of the thumbnail.

The overlay covers the Album Info Height. There is no percentage control. The actual height of the containers will depend on the aspect ratio, number of columns, page width, and any padding.
For example, I tried setting an aspect ratio of 3:5 with thumbnails set to 500px in height and three columns. If I set the Album Info height to 500 px, the overlay doesn't quite cover it. So I added some space between the albums as well as some left and rigth padding to the Gallery/Media area. Using three columns, left and right padding of 30 px and column spacing of 60px (page width fixed at 1140px) I was able to get the overlay to cover the entire height of the thumbnail.

chin_spod · 2015-05-12 00:42:00

Hi Rod, thanks for your prompt response. Much appreciated.

I'm pretty sure I'll get the AutoIndex side of this figured out so thanks for clearing that up but I need some further clarification on the thumbnails:

The thumbnails aren't exactly set to "fit" their containers. Instead they're set to the "cover" css background-size property, which will completely fill the container. This means that if the thumbnail image isn't the same aspect ratio, then some of it will be cut off.

So with custom my thumbnails of 300px wide and 450px high I essentially have thumbnails with an aspect ratio of 2:3 (or 3:2 depending on whether the first 'slider' relates to width of height.) but this is slightly irrelevant as they will be resized to css background-size property which is controlled by the width sliders in the Gallery/Media Area, the default being 1140px. Is that right?

If so, to prevent my custom thumbnails from being resized I need to ensure that 3 columns of thumbnails (@300px each = 900px), plus padding, plus column spacing adds up to 1140px or adjust the Mantle/Core width to a value that equals the aforementioned padding etc.

If the above is correct then it follows that the Container height is similarly adjusted within the Gallery/Media Area and the overlay then becomes relative to that.

As a visual guide would it make sense changing the The Grid Background colour to red as that would then 'reveal' the container?

Thanks again and I apologise for labouring a point that must seem very elementary to you.

Rgds.

rod barbee · 2015-05-12 00:52:32

but this is slightly irrelevant as they will be resized to css background-size property which is controlled by the width sliders in the Gallery/Media Area, the default being 1140px. Is that right?

Yes, mostly. the width of the grid area (1140px for example) will have an effect the width of the thumbnail container.

If so, to prevent my custom thumbnails from being resized I need to ensure that 3 columns of thumbnails (@300px each = 900px), plus padding, plus column spacing adds up to 1140px or adjust the Mantle/Core width to a value that equals the aforementioned padding etc.

You can create custom thumbnails that are larger than needed and as long as they're the same aspect ratio as the containers, they'll look great. In fact, it's a good idea to create thumbnails twice the size as needed, just so they'll look good on Retina displays (see this conversation: http://community.theturninggate.net/top … con-size/)

If the above is correct then it follows that the Container height is similarly adjusted within the Gallery/Media Area and the overlay then becomes relative to that.

no. Height is adjusted to fit the content. The content isn't adjusted to fit the height. (but it is adjusted to fit the width, this is what responsive design does)

As a visual guide would it make sense changing the The Grid Background colour to red as that would then 'reveal' the container?

I've done something like that quite often just to see the area I'm working in.

chin_spod · 2015-05-13 18:23:53

Hi Rod,

Quick note to thank you for your earlier responses. This has helped me know no end. One final question. I've modified the custom.css to change the font size of the iconic thumbnail Title and Description using:

.album-title {
font-size: 18px;
text-align:center;
}

.album-description {
font-size: 18px;
text-align:center;
}

However I find the the text-align doesn't have any effect and all text is still aligned to the left. Is there another Property that's overriding this or should this property be applied elsewhere.

If possible I'd would like to only display the description on the thumbnail and not the title as this is already incorporated into my custom thumbnails. The options available though are "Title" or "Title and Description".

I've read that to do this I should, "Under Site Info, uncheck Metadata 1 and 2" but in the Pages plugin the only reference I see to metadata relates to SEO.

Thank you.

rod barbee · 2015-05-13 21:23:37

However I find the the text-align doesn't have any effect and all text is still aligned to the left. Is there another Property that's overriding this or should this property be applied elsewhere.

That's because more specific css is controlling the alignment. Try this:

.album-info p {
       text-align: center;
}

I've read that to do this I should, "Under Site Info, uncheck Metadata 1 and 2" but in the Pages plugin the only reference I see to metadata relates to SEO.

That would be under "Image Info" and it applies to the metadata shown for individual images in CE4 Gallery (and CRG), not Pages.

If you don't want the title, you can try using custom css:

.album-title {
display: none;
}

chin_spod · 2015-05-13 21:41:44

Thanks Rod, that worked like a charm.

If there was such a thing as virtual beer then a six pack would be on its way to you.

Thank you.

Community @ The Turning Gate

#1 2015-05-11 19:49:02

AutoIndex strcuture and Iconic thumbails

#2 2015-05-11 22:13:45

Re: AutoIndex strcuture and Iconic thumbails

#3 2015-05-12 00:42:00

Re: AutoIndex strcuture and Iconic thumbails

#4 2015-05-12 00:52:32

Re: AutoIndex strcuture and Iconic thumbails

#5 2015-05-13 18:23:53

Re: AutoIndex strcuture and Iconic thumbails

#6 2015-05-13 21:23:37

Re: AutoIndex strcuture and Iconic thumbails

#7 2015-05-13 21:41:44

Re: AutoIndex strcuture and Iconic thumbails

Board footer