Inserting more than one Album Set

volvoxturbo · 2016-11-25 00:11:46

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

rod barbee · 2016-11-25 01:12:23

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.

volvoxturbo · 2016-11-25 01:40:34

Thanks again Rod,

I'll try the hard coding first ;-)

Best regards,
Oliver

Matthew · 2016-11-25 11:49:37

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.

volvoxturbo · 2016-11-25 18:21:47

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

Matthew · 2016-11-25 20:29:44

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.

volvoxturbo · 2016-11-25 21:33:35

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

rod barbee · 2016-11-25 22:23:27

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....

volvoxturbo · 2016-11-25 22:37:47

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)

rod barbee · 2016-11-25 22:53:07

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.

Matthew · 2016-11-26 12:52:07

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.

Matthew · 2016-11-26 12:59:50

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;
}

volvoxturbo · 2016-11-26 19:54:25

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)

Matthew · 2016-11-26 20:26:44

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'".

volvoxturbo · 2016-11-26 21:37:40

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

Matt, thank you very much for now!!!

Best regards,
Oliver

rod barbee · 2016-11-27 00:12:31

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!

volvoxturbo · 2016-11-27 05:27:15

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

rod barbee · 2016-11-27 05:57:54

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

volvoxturbo · 2016-11-27 07:19:27

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

rod barbee · 2016-11-27 08:09:35

for the text color on hover, try this:

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

volvoxturbo · 2016-11-27 19:27:06

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

Daniel Leu · 2016-11-27 23:57:35

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.

volvoxturbo · 2016-11-28 00:54:38

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

rod barbee · 2016-11-28 01:22:02

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%);
}

volvoxturbo · 2016-11-28 01:37:46

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

Community @ The Turning Gate

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

Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

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

Re: Inserting more than one Album Set

Board footer