Support » Plugin: Media Library Assistant » Please allow setting padding in the Shortcode

  • Resolved lwcorp

    (@lwcorp)


    Hi, in [mla_gallery] you allow setting margin (i.e. mla_margin=none). Can you likewise please also allow setting padding? I need it when using [mla_gallery size=none columns=1 mla_margin=none]

    See my comment below to see where should padding be added:

    <style type="text/css">
    	#mla_gallery-1 {
    		margin: auto;
    		width: 100%;
    	}
    	#mla_gallery-1 .gallery-item {
    		padding: 0; /* Please add this tag and allow modifying it via the Shortcode */
    		float: right;
    		text-align: center;
    		width: 100%;
    	}
    	#mla_gallery-1 .gallery-item .gallery-icon img {
    		border: 2px solid #cfcfcf;
    	}
    	#mla_gallery-1 .gallery-caption {
    		margin-left: 0;
    		vertical-align: top;
    	}
    	/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcode-support.php */
    </style>
Viewing 1 replies (of 1 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thanks for your question and for sharing the details of the CSS Style modification you want for your application. The best way to accomplish your goal is to create a custom style template as outlined in this earlier topic:

    Can the gallery be made responsive?

    For your application you can add a padding style to each gallery-item as shown below:

    <style type='text/css'>
    	#[+selector+] {
    		margin: auto;
    		width: 100%;
    	}
    	#[+selector+] .gallery-item {
    		padding: [+template:[+query:css_padding+]|0px+];
    		float: [+float+];
    		margin: [+margin+];
    		text-align: center;
    		width: [+itemwidth+];
    	}
    	#[+selector+] .gallery-item .gallery-icon img {
    		border: 2px solid #cfcfcf;
    	}
    	#[+selector+] .gallery-caption {
    		margin-left: 0;
    		vertical-align: top;
    	}
    	/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcode-support.php */
    </style>
    

    The padding: [+template:[+query:css_padding+]|0px+]; line defines a content template that uses a custom shortcode parameter, css_padding, to add padding. The default value is 0px if the parameter is not found in the shortcode.

    To create your template:

    1. Navigate to the Settings/Media Library Assistant Shortcodes tab.
    2. Click on the “Style” view below the Search Templates text box.
    3. Hover over the “default (default)” entry and click the “Copy” action link.
    4. When the page refreshes, the “Edit Template” screen will appear. Change the template Name to (for example) “padding”.
    5. Scroll to the #mla_gallery-1 .gallery-item Styles and add the padding: template illustrated above.
    6. Scroll to the bottom and click “Update”.

    Once you have the template set up you can add the mla_style=padding parameter to your [mla_gallery] shortcode to replace the default styles. You can add something like css_padding=10px or css_padding=1% to set the padding for the gallery display.

    I hope that gets you started on a solution for your application. I am marking this topic resolved, but please update it if you have any problems or further questions regarding custom styles for MLA galleries. Thanks for an interesting question and for your interest in the plugin.

Viewing 1 replies (of 1 total)
  • The topic ‘Please allow setting padding in the Shortcode’ is closed to new replies.