Juicer has a lot of hidden feed customization available, you can do pretty much anything you want to with your feed, and this post will show you how.
The way that this typically works is using data-attributes on your embed <ul> like so:
<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-per="15"></ul>
If you are using the wordpress plugin you can add these customizations to your shortcode or php function as well, just don't use the data part. The wordpress equivalent of the above embed code is:
[juicer name="YOUR-JUICER-FEED-NAME" per="15"]
and
<?php juicer_feed('name=YOUR-JUICER-FEED-NAME&per=1'); ?>
If you are using the iframe code to embed your feed, you can add these parameters to the iframe src url like so:
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe?per=1" frameborder="0" width="1000" height="1000"></iframe>
Here's all the ways you can customize your juicer feed:
Data Attribute: per
Default: 100
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-per="15"></ul>
The per attribute defines how many posts show up in each page of your Juicer Feed. When you get to the bottom of your feed Juicer will automatically "infinitely scroll" it will add the next page of results to the bottom of the feed. If you want to prevent this behavior, see the next section pages.
Juicer by default shows 100 posts (or all your posts if you have less than 100) but if you want your feed to be smaller, this is the attribute for you.
Data Attribute: pages
Default: infinity
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-pages="1"></ul>
The pages attribute limits the number of times your feed will infinitely scroll. By default this is infinity, meaning if you scroll down, the juicer feed will keep adding more posts to the feed until all your posts are visible.
If you set this to 1 your juicer feed will not infinitely scroll, it will only show the first page of results.
If you sent it to 2 it will infinitely scroll just once.
If you want to limit the number of posts that show up in total you may want to combine this with the above per attribute, to only show the first 15 results, and not infinitely scroll, for example.
Data Attribute: truncate
Default: infinity
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-truncate="500"></ul>
truncatemakes it so that Juicer will only show as many characters as you provide as your value in each post (at the max), for any posts longer it will display a "Read More" link. If the post is shorter than the number of characters you provide it won't change.
Data Attribute: gutter
Default: 20 (or 0 on "image grid" style)
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-gutter="10"></ul>
The gutter attribute is the space between your posts in your feed in px. On the modern style this defaults to 20 but you can edit this if you want to change the spacing.
Please note that this setting doesn't work for all feed styles, most notably slider.
Data Attribute: columns
Default: 3
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-columns="4"></ul>
This allows you to change the number of columns your feed will display in. You can also edit this attribute in your feed editor itself.
Juicer will not allow a column to be less than 200px (as it doesn't look good) so if it's not showing the correct number of columns you probably need a bigger containing element for your feed.
Data Attribute: interval
Default: 5000
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-interval="1000"></ul>
The speed with which your slider or widget progresses, in milliseconds. By default this is 5000 or 5 seconds. Set to a really high number if you don't want it to progress at all.
Data Attribute: filter
Default: none
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-filter="Facebook"></ul>
Pass in either a name of a social account (capitalized) like "Facebook" or "LinkedIn" to only show posts from that source (if you have two facebook sources it will show the posts from both).
Or pass in the name on the account to only show posts from that particular source. For example, if I had an instagram source of #tbt in my feed i could pass in tbt to only show posts from that source.
Data Attribute: starting-at and ending-at
Default: none
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-starting-at="2014-03-01" data-ending-at="2014-04-01"></ul>
Pass in a date in the format YYYY-MM-DD HH:MM (HH:MM optional) to either starting-at (show posts newer than this date) or ending-at (show posts older than this date. To filter by dates.
Data Attribute: style
Default: none
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-style="slider"></ul>
If you wanted to use the same feed on different pages with different styles you can pass in the name of the template in lowercase ("user", "colors", "classic", "widget" etc) as the style attribute to overwrite the template on a certain embed.
Data Attribute: overlay
Default: none
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-overlay="true"></ul>
Set to "true" if you want the feed to open an overlay when a post is clicked in your feed. If set to false, when you click on the post it will instead take you directly to the post on the social media provider. This can be set from your feed dashboard in the settings as well, but if you set it directly on your embed like outlined here, that will override your dashboard settings.
Data Attribute: after
Default: none
Example: <ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-after="updateFilters()"></ul>
If you want to run some arbitrary javascript functions after the Juicer feed has rendered (likely to modify it) you can pass in the name of the function to the after attribute. For example, if you wanted to change the text of the "all" filter you could do something like this:
<ul class="juicer-feed" data-feed-id="YOUR-JUICER-FEED-NAME" data-after="updateFilters()"></ul>
<script>
function updateFilters() {
$('.juicer ul.filters li.all').text('Something else');
// etc
}
</script>
But really you can run any javascript you like here.