Markup template for document list

Hi David
Like a ketchup effect, things start to fall in place all of a sudden, after another day of reading the documentation.
I’m on my way to come up with a functional markup template. The crux for me was the syntax, I think it would be helpful to sprinkle example code around the documentation on parameter use.

So far, if anyone else finds this helpful, the functional template looks like:
post_parent=all
post_mime_type=application/pdf
size=icon_only
columns=1
link=file
orderby=”name ASC”
mla_caption=”{+title+}”
mla_rollover_text=”klicka h?r”

<div id='[+selector+]’ class=’gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]’>

<!– row-open –>

<div class=’gallery-item [+last_in_row+]’>
[+link+]
[+title+]<br />
[+terms:attachment_category+]<br />
[+file+]<br/>
[+file_size,kbmb+]<br/>
[+description+]<br/>
[+custom:dokdatum+]<br/>
[+custom:forfattare+]
</[+itemtag+]>

</div>

</div>

I’ll do some tag wrapping and style classes and get back with th result.

Thanks again
Oloph

Thanks for your kind words regarding MLA, for your questions and for the link to your mock up; very helpful. Thanks as well for continuing to work on the application as you awaited my response.

You have made excellent progress along the lines I’ve been thinking of. It looks like you’ve put the common parameters, post_parent – mla_rollover_text in the Arguments section of your custom markup template; is that right?

I look forward to your tag wrapping and styling; CSS is one of my weaker skills and your examples will be a welcome addition to this topic.

You asked “Additionally, can I pass the selected categories in the shortcode to be rendered as a H2 at the top of the gallery, to explain to the user what the list contains?” When you implement category selection it will include passing the selection to the shortcodes for gallery display and (optuional) pagination. You can pass the category name as well and use the [+request:...+] prefix to add the name as a header in the “Open” section of your template.

Regarding the mock up, I have a few questions and points for you to consider. First, you show a “Sok filer…” text box above the categories; is this a keyword search or term search idea? Second, you show a row of category buttons above the display. I suggest you look at the [mla_tag_cloud] shortcode for this function. It will work on flat or hierarchical taxonomies; the name is an attempt to match the WordPress name for a similar function.

You may want to consider adding one of the MLA Example plugins to your application. It will give you some enhancements such as “sticky” values for the search and category controls. Here is a recent topic along those lines:

Search fields and presentation of results

Finally, you show what look to be sorting buttons at the right of each column header. I regret that I have not come up with a way to implement this kind of sorting function with the MLS shortcodes. You might be able to construct an appropriate URL with query arguments to re-sort the display and refresh the page, but I haven’t worked this out for myself.

I hope the my remarks give you more ideas for your application. I will leave this topic unresolved for now in case you have problems or further questions regarding the above suggestions. Thanks for your interest in the plugin.

Hi David, thank you for your excellent support and patience.
Yes, I have stored the common arguments in the markup template to make the required shortcode on the page as simple as can be.

Thank you for the +request… tip, that solved the selected category display with a
<H2>[+request:current_id+]</H2>
in the Open section of the template.

The category buttons are in place also, using your example snippets in the documentation, and some styling is applied to the list. My webhost doesn’t provide Ghostscript so I’m not getting an thumbnails regrettedly. But here I want to display ALL files when no category is selected. Using your examples, I have
[mla_term_list mla_markup=dokumentfilter mla_style=dokumentfilter]
and
[mla_gallery attachment_category="{+template:({+request:term_slug+}|a-bad-term)+}" mla_nolink_text="Inga filer att visa. Klicka p? en av knapparna ovanf?r f?r att se filerna."]
Can the gallery be fully populated when the page first loads without a category slug?
https://samfjallboholmar.se/medlemsinfo

I also have a lot of metadata to add to the documents. I’m struggling to bring the Date Created property on the pdf:s over to my custom field. It’s not in the IPTC core, nor as EXIF, but listed under “File Properties” in Adobe Bridge. Is there a way to map this data to a custom field, or even get it straight from the file with a parameter in the markup template?

For me it would also be helpful if default Term List markup/style templates could be selected globally.

Best regards, Oloph

Thanks for your update with the good news on your progress and the additional questions.

You wrote “Can the gallery be fully populated when the page first loads without a category slug?” I believe the solution is simple. The content template:

{+template:({+request:term_slug+}|a-bad-term)+}

first tries to use the term_slug value from the HTML request for the taxonomy argument. The | separator means “stop at the first non-empty alternative”, so if term_slug is empty the template moves on to the a-bad-term literal value and uses that. Since this does not match anything, an empty gallery is composed.

Just remove the alternative, i.e.:

{+template:({+request:term_slug+})+}

When the term_slug is empty the search argument will be empty because the () in the template means “replace missing values with an empty string”. When the taxonomy argument is empty the gallery will contain all of the items in your Media Library.

You will probably have to add a post_parent=all parameter to your shortcode to avoid restricting the gallery to items “attached” to the current page.

You wrote “I’m struggling to bring the Date Created property on the pdfs over to my custom field.” I believe you can access this as pdf:CreationDate, one of the six PDF-standard keys. If that doesn’t work, post a link to one of your documents and I will investigate further.

Finally, you wrote “For me it would also be helpful if default Term List markup/style templates could be selected globally.” I will consider that for a future MLA version, but I do not have time to add it to my next update.

It looks like you are well on your way to success. I am marking this topic resolved, but please update it if you have problems or further questions regarding the above suggestions. Thanks for sharing your work and for your interest in the plugin.

Hi David, thank you for the help with pdf create date. It worked fine with putting template:([+pdf:CreationDate+]) in the EXIF/Template field. I also needed to take care in configuring the format of my custom date field to match the format of the pdf:CreationDate field.

I thought I’d share the final code here for reference. There’s room for improvement, but it does what I need for now.
Demo page: https://samfjallboholmar.se/mla-document-list/

TERM LIST
Short code
[mla_term_list mla_markup=dokumentfilter mla_style=dokumentfilter]

Style template

<style type='text/css'>
#[+selector+] {
	margin: auto;
	width: 100%;
	list-style: none;
}
li {
    min-inline-size: fit-content;
    display: inline-block;
    margin-top: 10px;
}
.mla-button, #[+selector+] [+termtag+] a {
	color: #ffffff;
	background: #e8c100;
	padding: 5px;
	margin-right:10px;
	border-radius:4px;
}
.mla-button:last-of-type {
	margin:0;
}

/* see mla_term_list() in media-library-assistant/includes/class-mla-shortcode-support.php */
</style>

Markup template
Arguments

taxonomy=attachment_category
number=0
mla_link_href="{+page_url+}?term_slug={+slug+}#{+itemtag_id+}"

Open
<[+itemtag+] [+itemtag_attributes+] class="[+itemtag_class+]" id="[+itemtag_id+]">

Item

	<[+termtag+] [+termtag_attributes+] class="[+termtag_class+]" id="[+termtag_id+]">
		<a href="[+link_url+]">[+link_text+] ([+count+])</a>
		[+children+]
	</[+termtag+]>

Close
</[+itemtag+]>

GALLERY
Short code
[mla_gallery attachment_category="{+template:({+request:term_slug+})+}" mla_nolink_text="Inga filer att visa. Klicka p? en av knapparna ovanf?r f?r att se filerna."]

Style template

<style type='text/css'>
	#[+selector+] {
	}
	#[+selector+] .mla-gallery-item {
    display: flex;
    justify-content: space-between;
    background: #f0f0f0;
    margin: 0 0 10px 0;
    text-align: left;
	}
#[+selector+] .mla-gallery-item:hover {
background:#f7f7f7;
}
#[+selector+] img {
width:25px;
display:inline;
}

#[+selector+] .mla-gallery-item > div {
    padding:10px;
}
#[+selector+] .flex {
display:flex;
}
#[+selector+] .flex >div {
margin:0 15px 0 0;
    min-width: 30px;
}
.document-details {
    text-align: end;
    color: #777777;
    font-size: 0.8em;
}
	.mla-button {
    color: #ffffff;
    background: #e8c100;
    padding: 5px;
border-radius:4px;
}
   .mla-button:last-of-type {
margin:0;
</style>

Markup Template
Arguments

post_parent=all
post_mime_type=application
size=icon
columns=1
link=file
meta_key="dokdatum"
orderby=meta_value
order=DESC
mla_caption="{+title+}"
mla_rollover_text="klicka h?r" 

Open

<div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>
<H2>[+request:current_id+]</H2>

Item

<div class="mla-gallery-item">
	<div>
		<div>[+link+] <span class="document-details">[+custom:dokdatum,date('j F Y')+]</span></div>
		<div><a href="[+filelink_url+]"><h5>[+title+]</h5></a></div>
		<div>[+description+]</div>
		<div><span class="document-details">Skrivet av: [+custom:forfattare+]｜[+file+]</span></div>
	</div>
	<div class="document-details">
		<span class="mla-button">[+terms:attachment_category+]</span><br />
		[+file_size,kbmb+]
	</div>
</div>

Close
</div>

Thanks for great support & take care!

Thanks for the good news and the link to your finished page; it looks great.

Thanks as well for carefully and generously sharing the shortcodes and templates that make up the application. I know other MLA users will find them helpful in the future.