Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-11-25 00:11:46

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Inserting more than one Album Set

Hello all,

is it possible to insert more than one Album Set on a page? And if, how?

or

is it possible to insert titles?

For example:

TITLE
5 Albums

TITLE
next 5 Albums

and so on...

thx in advance.
Oliver

Offline

#2 2016-11-25 01:12:23

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

Certainly not possible with the Backlight album/album set insertion feature as is.

I've not tried the Pym embedded i-frame feature of Theater, but it may be possible using that feature. (I really, really don't know if this is possible or not)
http://backlight.theturninggate.net/doc … tation_pym

You'd probably first need to create a page template that has no header, footer, or navigation to serve as the page template for the album sets.

The other option is to hard code it. I'd try using the TTG Responsive Grid.
http://ttg-tips-and-tricks.barbeephoto. … backlight/
This may be the easiest thing for you to do, especially if the the album links you place there are ones you want to always be there.

You could even try a combination. One or more sets of albums via hard coding, another via an inserted album set.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#3 2016-11-25 01:40:34

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Thanks again Rod,

I'll try the hard coding first ;-)

Best regards,
Oliver

Offline

#4 2016-11-25 11:49:37

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: Inserting more than one Album Set

CSS:

.album-breaker {
	display: block;
	padding: 0 24px;
	text-align: center;
	width: 100%;
}

Adjust styling to taste.

PHPlugins:

function ttg_scripts( $style, $path ) { 
	echo '
<script>

	var albumBreaker = function( place, heading ) {
		var place  = $(".albums").find("figure:nth-child(" + place + ")");
		var markup = $("<h2/>").attr({
			class: "album-breaker"
		});
		markup.html(heading);
		place.before(markup);
	}
	
	albumBreaker( 3, "Heading 01");
	albumBreaker( 6, "Heading 02");

</script>
	';
	return false;
} // END

You can run the albumBreaker() function for each heading you need, providing two parameters. The first parameter is the number of the album in the album set; the heading will be inserted before that item. The second is the text for the heading.

Depending on the layout of your album set template, you may need to change the markup or place in the function to match the source code.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#5 2016-11-25 18:21:47

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Matt,

wow, thank you, looks very interesting :-)


I did copy/paste the css and php. Without editing anything it results in:

Unexpected error: Cannot redeclare ttg_scripts() (previously declared in /mnt/webi/b1/57/51715457/htdocs/backlightoliverblumcom/backlight/custom/phplugins/phplugins.php:144) in phplugins.php on line 175

... you may need to change the markup or place in the function to match the source code." ??????

What do I have to edit, that it will work?

Best regards,
Oliver

Offline

#6 2016-11-25 20:29:44

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: Inserting more than one Album Set

Hi Oliver,

A given PHPlugins hook can be used only once, so if you call it a second time, you'll get an error. You can just copy the Javascript out of my example above and combine it into your existing ttg_scripts function.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#7 2016-11-25 21:33:35

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Thank you Matt for your quick response.

Your script is working perfect in the classic and descriptive layout!
In the iconic layout - which I prefer to use - it results in a "damaged" layout like if you change Centering Method in the classic layout to Javascript.
Is it possible to run your script with the iconic layout?


And by the way: How can I combine

function ttg_scripts( $style, $path ) {
    echo '
<script>

    var albumBreaker = function( place, heading ) {
        var place  = $(".albums").find("figure:nth-child(" + place + ")");
        var markup = $("<h2/>").attr({
            class: "album-breaker"
        });
        markup.html(heading);
        place.before(markup);
    }
   
    albumBreaker( 1, "LIGHTING DESIGN");
    albumBreaker( 10, "ARCHITECTURE");
    albumBreaker( 15, "CITY");
    albumBreaker( 19, "TRAVEL");

</script>
    ';
    return false;
} // END

with

function ttg_scripts( $style, $path ) {
   
echo <<<SCRIPT
<script>
    $(function() {
        $("ul.menu a[href='" + window.location.pathname + "']").addClass("selected").parents('li').children().addClass('selected');
    });
</script>
SCRIPT;

} // END

???

Best regards and thx again!
Oliver

Offline

#8 2016-11-25 22:23:27

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

according to Ben, the sytax
echo <<<SCRIPT
......
SCRIPT;

alleviates the need to use  and then escape the single quotes


So you can either put all the code inside

<<<SCRIPT
<script> script 1 code
</script>
<script> script 2 code
</script>
SCRIPT;

function ttg_scripts( $style, $path ) {
    echo <<<SCRIPT
<script>

    var albumBreaker = function( place, heading ) {
        var place  = $(".albums").find("figure:nth-child(" + place + ")");
        var markup = $("<h2/>").attr({
            class: "album-breaker"
        });
        markup.html(heading);
        place.before(markup);
    }
   
    albumBreaker( 1, "LIGHTING DESIGN");
    albumBreaker( 10, "ARCHITECTURE");
    albumBreaker( 15, "CITY");
    albumBreaker( 19, "TRAVEL");

</script>   

<script>
    $(function() {
        $("ul.menu a[href='" + window.location.pathname + "']").addClass("selected").parents('li').children().addClass('selected');
    });
</script>
SCRIPT;

} // END

or put it all inside an echo and then escape any single quotes with a backslash (\)

function ttg_scripts( $style, $path ) {
    echo '
<script>

    var albumBreaker = function( place, heading ) {
        var place  = $(".albums").find("figure:nth-child(" + place + ")");
        var markup = $("<h2/>").attr({
            class: "album-breaker"
        });
        markup.html(heading);
        place.before(markup);
    }
   
    albumBreaker( 1, "LIGHTING DESIGN");
    albumBreaker( 10, "ARCHITECTURE");
    albumBreaker( 15, "CITY");
    albumBreaker( 19, "TRAVEL");

</script>

<script>
    $(function() {
        $("ul.menu a[href=\'" + window.location.pathname + "\']").addClass("selected").parents(\'li\').children().addClass(\'selected\');
    });
</script>
';
return false;

} // END

I think I copy/pasted everything correctly and made the right changes.... wink


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#9 2016-11-25 22:37:47

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Rod,

both is working perfect :-)

Thank you very much!

Best regards,
Oliver

The only question left (for now):

Matt's script is working perfect in the classic and descriptive layout!
In the iconic layout - which I prefer to use - it results in a "damaged" layout like if you change Centering Method in the classic layout to Javascript.
Is it possible to run the script with the iconic layout?

Last edited by volvoxturbo (2016-11-25 22:40:12)

Offline

#10 2016-11-25 22:53:07

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

Matt's script is working perfect in the classic and descriptive layout!
In the iconic layout - which I prefer to use - it results in a "damaged" layout like if you change Centering Method in the classic layout to Javascript.
Is it possible to run the script with the iconic layout?

If it's not working for you, then no, not the way it's coded. But I don't know what changes would need to be made.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#11 2016-11-26 12:52:07

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: Inserting more than one Album Set

A slight revision to the original script I posted. Here's the CSS:

.album-breaker {
	box-sizing: border-box;
	clear: both;
	display: block;
	padding: 0 24px;
	text-align: center;
	width: 100%;
}

Now the Javascript is updated slightly, because I found that the script was counting the inserted headings as children, which made it irritating to correctly position the headings. With this change, only "figure" elements are counted.

function ttg_scripts( $style, $path ) { 
    echo 
<<<SCRIPT

<script>

	var albumBreaker = function( place, heading ) {
		var place  = $(".albums").find("figure:eq(" + ( place - 1 ) + ")");
		var markup = $("<h2/>").attr({
			class: "album-breaker"
		});
		markup.html(heading);
		place.before(markup);
	}
 
	albumBreaker( 1, "LIGHTING DESIGN");
	albumBreaker( 3, "ARCHITECTURE");
	albumBreaker( 5, "CITY");

</script>   

SCRIPT;

	return false;
} // END

For the iconic layout, though, the grid styling is quite a bit more complicated. I'm not sure inserting headings in this way is going to work. I'll poke at it a bit more, but I'm not coming up with much.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#12 2016-11-26 12:59:50

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: Inserting more than one Album Set

For iconic layout, try this CSS. But be sure to test this thoroughly at different display sizes, on phones and tablets, etc. I have some misgivings about these changes.

.album-breaker {
	box-sizing: border-box;
	clear: both;
	display: block;
	margin-left: 6px;
	margin-right: 6px;
	text-align: center;
	width: 100%; max-width: 100%;
}

.the__albumSet figure:nth-child(1n+1) {
	clear: none;
}

.the__albumSet figure {
	display: inline-block;
	float: none;
}

.the__albumSet .albums {
	text-align: center;
}

Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#13 2016-11-26 19:54:25

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Matt,

thank you so much!!! Works great for me now with following :-)

CSS:
.album-breaker {
    box-sizing: border-box;
    clear: both;
    display: block;
    padding: 0 12px;
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.the__albumSet figure:nth-child(1n+1) {
    clear: none;
}

.the__albumSet figure {
    display: inline-block;
    float: left;
}

.the__albumSet .albums {
    text-align: left;
}


Is it possible to assign the haiku class to the h2, and if, how???

Best regards,
Oliver

Last edited by volvoxturbo (2016-11-26 20:21:43)

Offline

#14 2016-11-26 20:26:44

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: Inserting more than one Album Set

volvoxturbo wrote:

Is it possible to assign the haiku class to the h2, and if, how???

In the script, you'll see the "class: 'album-breaker'" line, so just add it, "class: 'album-breaker haiku'".


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#15 2016-11-26 21:37:40

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

works :-) -> http://oliverblum.com/projects/

Matt, thank you very much for now!!!

Best regards,
Oliver

Offline

#16 2016-11-27 00:12:31

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

That looks really nice Oliver. And it works well on the iPad too.

Plus the whole topic was pretty interesting. Got to learn something new!


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#17 2016-11-27 05:27:15

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Rod,

thanks for trying it out on your device! :-)

And in general thumbs up and thank you all for your outstanding advice and support!!!

Next question ;-) :
I cannot find out how to change the album info color (title/description) by a:hover.
seems to be blocked by the color value in resurce.php

.the__albumSet figcaption {
    background-color: rgba(0, 0, 0, 0);
    color: #000000;
    padding: 0.5rem 12px;
    text-align: left;
}

If I delete "color: #000000;" in Firefox development thing it works but I dont know where to find the css file in the backlight folder

Any suggestions?

Best regards,
Oliver

Offline

#18 2016-11-27 05:57:54

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

Use custom CSS rather than change Backlight files
http://backlight.theturninggate.net/doc … tylesheets


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#19 2016-11-27 07:19:27

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Rod,
I do custom css but can not solve the problem.
Changing bkgcolor on hover

".the__albumSet figure a:hover {
    background-color: rgba(0, 0, 0, 0.08);
}"

is no problem, but changing the color of the album title/description doesnt work:

".the__albumSet figure a:hover {
    background-color: rgba(0, 0, 0, 0.08);
        color: #ffffff;
}"

Best regards,
Oliver

Offline

#20 2016-11-27 08:09:35

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

for the text color on hover, try this:

.the__albumSet figure p:hover {
    color: #ffffff;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#21 2016-11-27 19:27:06

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Rod,

following works for me if mouse over the album description:

.the__albumSet figure a :hover {
    background-color: rgba(0, 0, 0, 1);
    color: #ffffff;
}

Do you have any idea how to css, that mouse over the thumbnail changes the bkg color and font color of album description?

I didnt find a solution for now.

Best regards,
Oliver

Offline

#22 2016-11-27 23:57:35

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 702
Website

Re: Inserting more than one Album Set

I really like the how you present your work on the projects page! Something to think about!

Following code works for me:

.slug-projects figure:hover {
    background-color: rgba(0, 0, 0, 1);
    color: #ffffff;
}

This would replace your current hover code.


Daniel Leu | Photography   
DanielLeu.com

Just a user who loves to dive into techie stuff... and sometimes gets into trouble for that.

Offline

#23 2016-11-28 00:54:38

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Daniel,

thank you very much but unfortunately your css doesn't work for me, the whole album frame gets black and the color of the album description is not changing.

Best regards,
Oliver

Offline

#24 2016-11-28 01:22:02

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,162
Website

Re: Inserting more than one Album Set

Hi Oliver,

If you want the thumbnails to look different when hovering, you could try applying a filter. This doesn't take care of getting both the thumbnail and the description area changing at the same time though. I haven't figured that one out yet.

.slug-projects .album-thumbnail:hover {
    filter: grayscale(100%);
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#25 2016-11-28 01:37:46

volvoxturbo
Member
From: Barcelona - Frankfurt - Rome
Registered: 2012-11-12
Posts: 145
Website

Re: Inserting more than one Album Set

Hi Rod,

thank you for your reply!
I played with filters before but I dont like them.
I like to mouse over the album (thumbnail OR description) and just like to change the albums description color from white background/black description to black background/white description.

Thanks again :-)

best regards,
Oliver

Offline

Board footer

Powered by FluxBB