How to add the 1.1.9 Show More Quote Function to your theme

January 20, 2023, 06:05:57 pm

If you are running a custom theme, there is a good chance that the 1.1.9 patch will not be able to update your theme files. The theme will still work w/o the updates, it will just lack the new functionality. Below is how you would make the edits to add the show more quote functionality.

Some members like to quote entire posts, even very long posts, which is really an annoyance to other users. That s where this function comes in to help. The admin can set a maximum quote block height to show, quotes longer than that will be visually limited to that length and a show more button provided should someone want to expand out the entire quote.

To enable this in your theme it will require a few CSS and JS additions.

First add the following to your index.css, modify to suit your taste and theme

Code: [Select]

/* Expanding quotes */
.quote-read-more {
	position: relative;
}

/* Constrain the quote area height.  Use max height so we can have a smooth transition */
.quote-read-more > .bbc_quote {
	overflow: auto;
	max-height: var(--quote_height);
}

/* Specific targeting of our checkbox.  100% wide with a gradient to cover/fade the bottom
   of the blockquote */
input[type=checkbox].quote-show-more {
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 8em;
	margin: 0 1px 1px 1px;
	padding-top: 6em;
	cursor: pointer;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* The read moar, with the 100% width clicking anywhere in the quote base will work
   note content: "More" is defined in themes/default/Theme.php controller for localization */
input[type=checkbox].quote-show-more:after {
	font-size: 1.1em;
	font-weight: 600;
}

/* When clicked, hide the checkbox and expand the quote */
input[type=checkbox].quote-show-more:checked {
	display: none;
}

/* max-height 750em is simply to avoid the clipping of any length quote, do not use none as
   it will not provide a smooth transition */
input[type=checkbox].quote-show-more:checked ~ .bbc_quote {
	max-height: 750em;
	transition: 1.5s max-height ease-in;
}

Also in your variant (color) file, add the following, again modify for your themes colors.

Code: [Select]

input[type=checkbox].quote-show-more {
	background: linear-gradient(to bottom, transparent 0%, transparent 25%, #FEFEFE 100%);
	box-shadow: 0 1px 0 1px #E4E4E4;
}

Next , in your theme.js somewhere in the initialization function, add the following, which prevents a short quote from being styled.

Code: [Select]

	// Remove "show more" from short quotes
	if (typeof elk_quotefix === 'function')
		elk_quotefix();

Last step is IF your theme has its own Theme.php file, add the following at the end of the setupThemeContext() function. This provides the button text and quote height (as defined in the ACP)

Code: [Select]

		// Localization for the show more quote and its container height
		$quote_height = !empty($modSettings['heightBeforeShowMore']) ? $modSettings['heightBeforeShowMore'] . 'px' : 'none';
		$this->addCSSRules('
		input[type=checkbox].quote-show-more:after {content: "' . $txt['post_options'] . '";}
		.quote-read-more > .bbc_quote {--quote_height: ' . $quote_height . ';}'
		);