demur

Hi @matthewmccabe!

Not sure if I got Your question right (link to Your Document Gallery would make a big difference or at least a screenshot), but I dare assume You’re experiencing widespread hitch – by default DG plugin has enabled descriptions option and it affects the appearance of the Document Galleries in such way that each attachment would occupy dedicated row being split in to areas: one for thumbnail itself, the other for attachment’s description.
To disable that option You have to put in dg shortcode descriptions=false. I would like to draw Your attention that after disabling descriptions option the columns option would take over Document Galleries appearance; default value for columns is 4. If You still want one column You should put in dg shortcode columns=1.
If You need latter appearance with descriptions under titles – have a look at this post.

Please don’t hesitate to let us know if this helped or if You run into any further issues.

Hi @grungyape!

I’m sorry to hear that You’ve encountered some difficulties.
Having run some tests on different environments, no glitches were found yet in the mentioned area. While I continue to look for possible problems in our code we need Your help to check if this is result of mismatch in Your WP mixture.
According to Your description, there is a great probability to see JavaScript errors in browser console. Please open browser console (generally pressing F12 should do this) and proceed to the Edit Post tool with the corresponding Document Gallery instance post (or just refresh it if You are already there), then repeat all the steps You’ve mentioned to update gallery. Let us know if there are any errors in the Console.

Hi David!

For now I see two solutions. One with less code based on HTML5 features, another (as You’ve mentioned) – on HTTP header approach, with more code. BTW they can be combined 😉

1. HTML5 anchor has attribute download, which now is supported by majority of web browsers.
To have this solution working You need to add the given below code to functions.php file of Your active WordPress theme:

/** Modify DG icons (pdf ones) to show "VIEW" and "DOWNLOAD" links alongside title. */
function dg_icon_template( $icon, $use_descriptions, $id ) {
	if ( get_post_mime_type( $id ) == 'application/pdf' ) {
		$file_url = wp_get_attachment_url( $id );
		$doc_icon =
			'   <div class="document-icon">' . PHP_EOL .
			'      <a href="%link%" target="%target%">' . PHP_EOL .
			'         <img src="%img%" title="%title_attribute%" alt="%title_attribute%" %data%/>' . PHP_EOL .
			'         <span class="title">%title%</span>' . PHP_EOL .
			'      </a>' . PHP_EOL .
			'      <a href="' . $file_url . '" target="%target%">VIEW</a>' . PHP_EOL .
			'      <a href="' . $file_url . '" target="%target%" download="' . basename( $file_url ) . '">DOWNLOAD</a>' . PHP_EOL .
			'   </div>' . PHP_EOL .
			($use_descriptions ? '   <p>%description%</p>' : '');
		return $doc_icon;
	}
	return $icon;
}
add_filter( 'dg_icon_template', 'dg_icon_template', 10, 3 );

As You’ve requested additional links only for PDFs, the condition was introduced that checks if an item is PDF file and only for such elements modifies the output.

2. To be able to produce different values of the Content-Disposition header for the same attachment we need to set and track different URLs. For this purpose I suggest utilizing REST API v 2.0 (enabled in WordPress since 4.4).
Same thing: to make use of this solution You need to add given the below code to functions.php:

/** Modify DG icons (pdf ones) to show "VIEW" and "DOWNLOAD" links alongside title. */
function dg_icon_template( $icon, $use_descriptions, $id ) {
	if ( get_post_mime_type( $id ) == 'application/pdf' ) {
		$filename = basename( get_attached_file( $id ) );
		$doc_icon =
			'   <div class="document-icon">' . PHP_EOL .
			'      <a href="%link%" target="%target%">' . PHP_EOL .
			'         <img src="%img%" title="%title_attribute%" alt="%title_attribute%" %data%/>' . PHP_EOL .
			'         <span class="title">%title%</span>' . PHP_EOL .
			'      </a>' . PHP_EOL .
			'      <a href="/wp-json/dg/v1/view/'.$id.'/'.$filename.'" target="%target%">VIEW</a>' . PHP_EOL .
			'      <a href="/wp-json/dg/v1/download/'.$id.'/'.$filename.'" target="%target%">DOWNLOAD</a>' . PHP_EOL .
			'   </div>' . PHP_EOL .
			($use_descriptions ? '   <p>%description%</p>' : '');
		return $doc_icon;
	}
	return $icon;
}
add_filter( 'dg_icon_template', 'dg_icon_template', 10, 3 );

add_action( 'rest_api_init', function () {
	register_rest_route( 'dg/v1', '/(?P<action>view|download)/(?P<id>\d+)/.+', array(
		'methods' => WP_REST_Server::READABLE,
		'callback' => 'dg_process_link',
		'args' => array(
			'id' => array(
				'validate_callback' => 'is_numeric',
				'required' => true,
			),
			'action' => array(
				'required' => true,
			),
		),
	) );
} );

/**
 * Processing PDF file request from Document Gallery and responding in appropriate way
 *
 * @param array $data Options for the function.
 * @return WP_Error if non-existing or non-pdf attachment was requested, otherwise the requested attachment would be outputted.
 */
function dg_process_link( $data ) {
	if ( in_array( $data['id'], array_keys( DG_Thumb::getThumbs() ) ) && get_post_mime_type( $data['id'] ) == 'application/pdf' ) {
		$file = get_attached_file( $data['id'] );
		if ( file_exists( $file ) ) {
			header( 'Content-Type: application/pdf' );
			header( 'Content-Disposition: ' . ( $data['action']=='view' ? 'inline' : 'attachment' ) . '; filename="' . basename( $file ) . '"' );
			header( 'Content-Length: ' . filesize( $file ) );
			readfile( $file );
			exit;
		}
	}
	return new WP_Error( 'invalid_link', 'Invalid link :-(', array( 'status' => 404 ) );
}

I hope this would work for You.
Please don’t hesitate to let us know if You run into any further issues.

PS: If You’ve found our answers and/or the plugin useful, please rate the efforts. Thanks!

Hi John!

Despite absence of native support for widgets in DG out of the box, there is a quick hack for now to enable it 😉
You should include given below string to Your active WordPress theme’s functions.php file:
add_filter('widget_text', 'do_shortcode');
This will allow usage of shortcodes (including dg) in widgets 🙂
Please note: use of default [dg] (without specifying id or ids property) will result in displaying respective attachments for each requested post.

PS: If You’ve found our answers and/or the plugin useful, please rate the efforts. Thanks!

• This reply was modified 9 years, 5 months ago by demur.

Hi @jgmediapro!

I’m sorry it took so long for You to get a reply. Thanks for Your patience.
We are pleased that You like our plugin 🙂
To display files in a list view You should adjust Your shortcode or default settings of the Document Gallery to meet these values: columns=1 descriptions=false
Then You should pasted given below CSS in the Custom CSS textbox at Dashboard -> Settings -> Document Gallery:

.document-icon {
    text-align: left !important;
}
.document-icon img, .document-icon .title {
    display: inline-block !important;
}
.document-icon img {
    width: 50px !important;
}

You should replace 50 with any suitable for Your case number, this would affect icon size.
If You need to make the list unordered (bulleted), You should append to the above-mentioned CSS textbox this section:

.document-icon:before {
    content: '\2219';
}

In case You’d like to make the list ordered, append this section:

.document-gallery {
    counter-reset: icon-counter;
}
.document-icon:before {
    content: counter(icon-counter, decimal-leading-zero);
    counter-increment: icon-counter;
}

In case You’d like to change dimensions of generated thumbnails (if You use fancy=true) You can adjust those at Dashboard -> Settings -> Document Gallery -> Max Thumbnail Dimensions, for proper result don’t forget to modify width value for the .document-icon img in Your CSS.

Hope I got Your question properly 😉
Please don’t hesitate to let us know if You run into any further issues.

PS: If You’ve found our answers and/or the plugin useful, please rate the efforts. Thanks!

Hi Cat!

We are glad that it worked out for You.

You are on the right track with the text-align thing.
The only thing that keeps You from getting the desired result is the cascade nature of the CSS. You are trying to have the text aligned inside the span by setting CSS rule for its parent (a), but span won’t inherit this property (text-align), even the !important one, due to having personal (specific) CSS rule defining this property (talking about default Document Gallery setup).
One of many solutions would be just to change the target of the used rule to:
.document-gallery .document-icon a span

Hope this also will do the job for You.

Hi wengles!

By default Document Gallery instance spreads all over the width of the given parent block and centers (horizontally) its content along the occupied area. It seems that in Your case something has gone wrong and unfortunately there is not enough info to figure out how to fix it (problem could be in CSS of custom theme, if You use one, or any installed plugin, also it could be some typo in shortcode or anything beyond mentioned).
To better assist You we’d prefer to see what You get, so, please, if You can, give us a link to the problem page.

To change font size You have to set font-size (by default it’s only 10 pixels).
Given below CSS should be pasted in the Custom CSS textbox at Dashboard -> Settings -> Document Gallery:

.document-gallery .document-icon a {
    font-size: 14px !important;
    line-height: normal !important;
}

Feel free to adjust values so the result meets Your needs.
Hope this will do the job for You.

Hi dejudicibus!

We are sorry for leaving Your question unsettled for so long.
We believe this CSS should solve Your problem:

.document-gallery {
    display: table !important;
    table-layout: fixed;
}
.document-icon-row.descriptions {
    display: table-row !important;
}
.descriptions.document-icon-row .document-icon {
    display: table-cell !important;
    float: initial !important;
    min-width: 110px;
}

In case You’d like to set some spacing between .document-icon-row`s there is a way by adding:

border-collapse: separate;
border-spacing: 0px 5px;

to the .document-gallery block.

Please don’t hesitate to let us know if You run into any further issues.