Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
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
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 2/3 test site
Offline
Thanks again Rod,
I'll try the hard coding first ;-)
Best regards,
Oliver
Offline
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.
Offline
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
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.
Offline
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
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....
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
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
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 2/3 test site
Offline
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.
Offline
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;
}
Offline
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
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'".
Offline
Offline
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 2/3 test site
Offline
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
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 2/3 test site
Offline
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
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 2/3 test site
Offline
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
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
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
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
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 2/3 test site
Offline
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