Help Editing A Template

@derrickhand300
10 years ago
1,353 posts

I need some help on editing a template for images-the code below is the template code for the attached screenshot

<div class="container">
    {if isset($_items)}
        {foreach from=$_items item="item"}

            {if $item@first || ($item@iteration % 4) == 1}
                <div class="row">
            {/if}
            <div class="col3{if $item@last || ($item@iteration % 4) == 0} last{/if}">
                 <a href="{jrGallery_get_gallery_image_url item=$item}" title="@{$item.profile_url}: {$item.gallery_alt_text}" target="_blank"><br>
                     {jrCore_module_function function="jrImage_display" module="jrGallery" type="gallery_image" item_id=$item._item_id size="larger" crop="square" class="img_scale" style="margin:0" alt=$item.gallery_image_name}
            </div>
            {if $item@last || ($item@iteration % 4) == 0}
                </div>
            {/if}

        {/foreach}
    {/if}
</div>

I am trying to do TWO things actually
1-I would like a slight space between each of the images so they do not run together
2-I would like the images (all 4) to display this same way on mobile devices. Currently they display on mobile devices as a single column of 4 images which breaks them out below the css I am using to style them with

How do i get a slight space between each image- then how to get this template code to display as 4 across on mobile devices?

NOTE- at one time I was able to get them to stay 4 wide on mobile devices by adding some form of pagination...but now I cannot reproduce that-my preference would be to display as in the screenshot without the pagination
I am open to any suggestions/advice
I am stumped

updated by @derrickhand300: 02/16/16 11:26:46AM

@derrickhand300
10 years ago
1,353 posts

I have also considered trying to add the css that surrounds the gallery code with an IF statement so that the CSS does not show on mobile devices( as a last resort)

{if !jrCore_is_mobile_device()}
ADD CSS# HERE SO ITS REMOVED FROM MOBILE DEVICES
{/if}

If this is a last resort- how does one just add the css inside the statement? For example the entire code is this

<div id="direct"><h2 style="text-align: left;">Football Photo Gallery </h2>
<br><br>
<h3 style="text-align: left;"><span style="color: #3366ff;"><a style="color: #3366ff;" href="http://sayreeagles.net/all_football" target="_blank">VIEW ALL</a></span></h4><br></strong></h3><br>{jrCore_list module="jrGallery" search1="gallery_title = Football" order_by="_created desc" limit="100" pagebreak="4" template="widget_list_grid_4.tpl" tpl_dir="jrGallery"}<p style="text-align: right;"><strong><span style="color: #3366ff;"><a style="color: #3366ff;" title="UPLOAD PHOTOS" href="http://sayreeagles.net/gallery/create" target="_blank">UPLOAD PHOTOS</a></span></strong></p></div>

How would you get just the div id- inside the if statement without it effecting the rest of the gallery code?
updated by @derrickhand300: 11/14/15 08:27:13AM

@brian
10 years ago
10,149 posts

You are already using the proper col3 class, so it should be "mobile ready"

To get a space, you need to add some MARGIN around your images - i.e.

<div style="margin: 5px">{jrCore_module_function function="jrImage_display" module="jrGallery" type="gallery_image" item_id=$item._item_id size="larger" crop="square" class="img_scale" style="margin:0" alt=$item.gallery_image_name}</div>

Let me know if that helps.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

@derrickhand300
10 years ago
1,353 posts

Thank you Brian for the spacing tip- worked great!

As for 'mobile ready" I guess it actually is...but displaying in the 'mobile ready" way it creates 1 column of 4 images...in the attached screenshot you can see that even just one image goes outside the box i have created with css...all 4 images in a single column goes WAY outside the box..

So i am wondering how to get this gallery to display in mobile the same as on desktop? So what I would wish for it to display like is shown in the attachment "mobile screen wish list"

Is it possible to change the col3 class to something else to make the desired result happen?

@derrickhand300
10 years ago
1,353 posts

Here is some photoshop to better explain what i am trying to acheive

@brian
10 years ago
10,149 posts

That's correct for the mobile display - that way it WORKS with pretty much every mobile device. If you want it to be 4 wide then you have to remove the col3 class and add a width - i.e.:

change this

<div class="col3{if $item@last || ($item@iteration % 4) == 0} last{/if}">

to something like this:

<div style="width:25%;float:left">

But you will also need to add a clearing DIV at the bottom otherwise if you have more than 4 images it is not going to work right.

If it was me I would not do this, but if you want to that's what you will need to do.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

@derrickhand300
10 years ago
1,353 posts

WOW! It actually works!-cant thank you enough man.
updated by @derrickhand300: 11/14/15 09:54:03AM

solved Help Editing A Template

Tags