I wonder how to add a 3 column section with equally same

I wonder how to add a 3 column section with equally same size? I have 3 images with text below I want to be equally in size and the correct space inbetween.

What is the simplest way?

  • Predrag Dubajic

    Hi Michael,

    Hope you're doing well today :slight_smile:

    Easiest way would be to add gallery element, select maximum size for image and padding, and enable captions for images to show text below them.
    Example settings are shown in image attached below.

    Only limitation for now is that the gallery thumbnail can have maximum width of 250 pixels, so once you finish setting up the gallery element you will need to simply drag and drop it to the middle of your page.

    You can also use single image element and while resizing them you will see element size in pixels, add one aligned to left border, one aligned to right border and then manually align the middle one.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Michael!

    Currently you can set gallery images in Upfront either to link to an external URL or to link to bigger versions of them. In case you set link option to "No link" value it will automatically change linking to bigger image.

    You can however turn this off with a simple snippet of code:

    <?php 
    
    function wpmu_uf_gallery_no_click() {
    	?>
    	<script type="text/javascript">
        jQuery(function($) {
    		$('.ugallery_link').click(function(e) {
    			e.preventDefault();
    			return false;
    		});
    	});
    	</script>
    	<?php
    }
    add_action('wp_footer','wpmu_uf_gallery_no_click');

    In order to apply it to your site, please do the following:

    - create an empty file with a ".php" extension (name doesn't matter)
    - copy the code and paste it to that file
    - access your server via FTP
    - go to /wp-content/mu-plugins/ folder
    - (if there's no /mu-plugins/ folder just create it)
    - upload the file to that folder

    From now on clicking on images in galleries shouldn't trigger any action. This will however affect all the galleries on your site. If you'd like to disable linking only for this one you will need to use your browser's DevTools (see here for Chrome: using DevTools):

    - run dev tools on any image of the gallery (as described at given link)
    - a few lines above highlighted ones, you'll find the line that starts with

    <div id="ugallery-object-XXXXXXXX"

    where "XXX" is a number.

    - note down that div ID (the entire "ugallery-object-xxxx" part"
    - replace this line in the code I shared

    $('.ugallery_link').click(function(e) {

    with this one

    $('#ugallery-object-xxx .ugallery_link').click(function(e) {

    The code will from now on affect only that selected gallery.

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.