gallery oddness (last image dropping below rest)

@soaringeagle
10 years ago
3,304 posts

typically id think it was a css issue but cant find any
this page
http://www.greentechnologyforums.com/newest-photos
and all pages in that gallery have it
(seemless lists in sitebuilder)
thgis page also a seemless doesnt
http://www.greentechnologyforums.com/highest-rated-photos

each uses a diferent jrcore_include that builds it using diferent order_by
but both use the exact same templates

both the templates that call the seemless lists are exactly the same except the order_by

whats causing that 1 image to drop

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
updated by @soaringeagle: 02/18/15 03:41:30PM

@brian
10 years ago
10,149 posts

After each row you need to have a "clearing div" any time you are floating elements - i.e.

<div style="clear:both"></div>

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

@soaringeagle
10 years ago
3,304 posts

ok but why is it working ok in 1 gallery not the other despite using the exact same templates
but thinx i think i can work that in

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@brian
10 years ago
10,149 posts

soaringeagle:
ok but why is it working ok in 1 gallery not the other despite using the exact same templates
but thinx i think i can work that in

Maybe the div is not in the right place. Anytime you see this though (floated images not lining up or being moved around by different size images) it's because you need a clearing div.

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

@soaringeagle
10 years ago
3,304 posts

ugh where should it do
logicluy i thought after that last </div>
but no tried after foreach thinking that might make sence tried after the iffs

{if isset($_items)}
{jrCore_module_url module="jrGallery" assign="murl"}
{jrCore_module_url module="jrFlickr" assign="furl"}

    <div class="container">
        {foreach from=$_items item="item"}
{if $item.seamless_module_name == "jrGallery"}
        {if $item@iteration == 1 || $item@iteration == 5}
        <div class="row">
        {/if}
            <div class="col3{if $item@iteration is div by 4} last{/if}">
                <div class="img-profile"{if jrCore_is_mobile_device()} style="margin-bottom:50px;"{/if}>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.gallery_image_name|urlencode}" title="{$item.gallery_caption|default:$item.gallery_image_name|jrCore_entity_string}">{jrCore_module_function function="jrImage_display" module="jrGallery" type="gallery_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.gallery_image_name title=$item.gallery_image_name style="max-width:292px;max-height:292px;"}</a><br>{if isset($item.gallery_image_title)}
                    {$item.gallery_image_title|truncate:30:"...":false}
                {else}
                    {$item.gallery_image_name|truncate:30:"...":true}
                {/if}<br>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.gallery_title_url}" title="{$item.gallery_title}">{$item.gallery_title|truncate:25:"...":false}</a><br>
                    <a href="{$jamroom_url}/{$item.profile_url}" style="margin-bottom: 10px;">@{$item.profile_url}</a><br>
<div class="gallery_rating">
                        {jrCore_module_function function="jrRating_form" type="star" module="jrGallery" index="1" item_id=$item._item_id current=$item.gallery_rating_1_average_count|default:0 votes=$item.gallery_rating_1_count|default:0}
                    </div>
                </div>
            </div>
        {if $item@iteration == 4 || $item@iteration == 8}
        </div>
        {/if}
{elseif $item.seamless_module_name == "jrFlickr"}
{if $item@iteration == 1 || $item@iteration == 5}
        <div class="row">
        {/if}
            <div class="col3{if $item@iteration is div by 4} last{/if}">
                <div class="img-profile"{if jrCore_is_mobile_device()} style="margin-bottom:50px;"{/if}>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$furl}/{$item._item_id}/{$item.gallery_image_name|urlencode}" title="{$item.gallery_caption|default:$item.gallery_image_name|jrCore_entity_string}">{jrCore_module_function function="jrImage_display" module="jrGallery" type="gallery_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.gallery_image_name title=$item.gallery_image_name style="max-width:292px;max-height:292px;"}</a><br>{if isset($item.gallery_image_title)}
                    {$item.gallery_image_title|truncate:30:"...":false}
                {else}
                    {$item.gallery_image_name|truncate:30:"...":true}
                {/if}<br>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$furl}/{$item._item_id}/{$item.gallery_title_url}" title="{$item.gallery_title}">{$item.gallery_title|truncate:25:"...":false}</a><br>
                    <a href="{$jamroom_url}/{$item.profile_url}" style="margin-bottom: 10px;">@{$item.profile_url}</a><br>
<div class="gallery_rating">
                        {jrCore_module_function function="jrRating_form" type="star" module="jrGallery" index="1" item_id=$item._item_id current=$item.gallery_rating_1_average_count|default:0 votes=$item.gallery_rating_1_count|default:0}
                    </div>
                </div>
            </div>
        {if $item@iteration == 4 || $item@iteration == 8}
        </div>
        {/if}
{/if}
        {/foreach}
{/if}<div style="clear:both"></div>

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@brian
10 years ago
10,149 posts

Right after line 26 and line 47 - the closing divs for the "rows".

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

@soaringeagle
10 years ago
3,304 posts

weirdest thing is i click edit page and it snaps into alignment the highest rated uses the exact same template but looks fine

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
10 years ago
3,304 posts

ok i tried it on the ones right before the iteration i was close

thnx

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
10 years ago
3,304 posts

that didnt fix it

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
10 years ago
3,304 posts

{if isset($_items)}
{jrCore_module_url module="jrGallery" assign="murl"}
{jrCore_module_url module="jrFlickr" assign="furl"}

    <div class="container">
        {foreach from=$_items item="item"}
{if $item.seamless_module_name == "jrGallery"}
        {if $item@iteration == 1 || $item@iteration == 5}
        <div class="row">
        {/if}
            <div class="col3{if $item@iteration is div by 4} last{/if}">
                <div class="img-profile"{if jrCore_is_mobile_device()} style="margin-bottom:50px;"{/if}>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.gallery_image_name|urlencode}" title="{$item.gallery_caption|default:$item.gallery_image_name|jrCore_entity_string}">{jrCore_module_function function="jrImage_display" module="jrGallery" type="gallery_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.gallery_image_name title=$item.gallery_image_name style="max-width:292px;max-height:292px;"}</a><br>{if isset($item.gallery_image_title)}
                    {$item.gallery_image_title|truncate:30:"...":false}
                {else}
                    {$item.gallery_image_name|truncate:30:"...":true}
                {/if}<br>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.gallery_title_url}" title="{$item.gallery_title}">{$item.gallery_title|truncate:25:"...":false}</a><br>
                    <a href="{$jamroom_url}/{$item.profile_url}" style="margin-bottom: 10px;">@{$item.profile_url}</a><br>
<div class="gallery_rating">
                        {jrCore_module_function function="jrRating_form" type="star" module="jrGallery" index="1" item_id=$item._item_id current=$item.gallery_rating_1_average_count|default:0 votes=$item.gallery_rating_1_count|default:0}
                    </div>
                </div>
            </div>
        {if $item@iteration == 4 || $item@iteration == 8}
        </div><div style="clear:both"></div>
        {/if}
{elseif $item.seamless_module_name == "jrFlickr"}
{if $item@iteration == 1 || $item@iteration == 5}
        <div class="row">
        {/if}
            <div class="col3{if $item@iteration is div by 4} last{/if}">
                <div class="img-profile"{if jrCore_is_mobile_device()} style="margin-bottom:50px;"{/if}>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$furl}/{$item._item_id}/{$item.gallery_image_name|urlencode}" title="{$item.gallery_caption|default:$item.gallery_image_name|jrCore_entity_string}">{jrCore_module_function function="jrImage_display" module="jrGallery" type="gallery_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.gallery_image_name title=$item.gallery_image_name style="max-width:292px;max-height:292px;"}</a><br>{if isset($item.gallery_image_title)}
                    {$item.gallery_image_title|truncate:30:"...":false}
                {else}
                    {$item.gallery_image_name|truncate:30:"...":true}
                {/if}<br>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$furl}/{$item._item_id}/{$item.gallery_title_url}" title="{$item.gallery_title}">{$item.gallery_title|truncate:25:"...":false}</a><br>
                    <a href="{$jamroom_url}/{$item.profile_url}" style="margin-bottom: 10px;">@{$item.profile_url}</a><br>
<div class="gallery_rating">
                        {jrCore_module_function function="jrRating_form" type="star" module="jrGallery" index="1" item_id=$item._item_id current=$item.gallery_rating_1_average_count|default:0 votes=$item.gallery_rating_1_count|default:0}
                    </div>
                </div>
            </div>
        {if $item@iteration == 4 || $item@iteration == 8}
        </div><div style="clear:both"></div>
        {/if}
{/if}
        {/foreach}
{/if}

thats what i got now and its still weird

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

@soaringeagle
10 years ago
3,304 posts

this dont look right at all the big arrows the image out of alignment

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
updated by @soaringeagle: 01/16/15 03:10:44PM

@soaringeagle
10 years ago
3,304 posts

ok u know im still trying to work my way through understanding the code but what i think im seeing is it should create a new row after each 4 aka after each "last"
so after each last there should be a row
and thge clear both after each row

but its only giving the 1st 2 rows

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

SteveX
@ultrajam
10 years ago
2,584 posts

        {if $item@iteration == 4 || $item@iteration == 8}
        </div><div style="clear:both"></div>
        {/if}

You are only telling it to do the first 2 rows.

Try something like

        {if $item@iteration == 4 || $item@iteration == 8 || $item@iteration == 12}
        </div><div style="clear:both"></div>
        {/if}

and it will do the first 3 rows.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

SteveX
@ultrajam
10 years ago
2,584 posts

The answer here shows how to do this dividing by 4:
http://stackoverflow.com/questions/12424504/looping-with-smarty

Then you can jsut use:

{if $item@ % 4 == 0}

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@soaringeagle
10 years ago
3,304 posts

ok thnx i kept looking at that thinking it must be something to do with that ..now it makes perfect sence it just needs to be 4 rows

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

SteveX
@ultrajam
10 years ago
2,584 posts

Here you can use smarty v3 syntax which is simpler:
http://www.smarty.net/docs/en/language.function.foreach.tpl#foreach.property.iteration

{if $name@iteration is div by 4}

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@soaringeagle
10 years ago
3,304 posts

yay solved good job
i learn something new every day here
its always a matter of staring at the code trying to figure it out then when ya give me just the right clue it makes perfect sense...

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

SteveX
@ultrajam
10 years ago
2,584 posts

That smarty manual is really great for clues. Smarty is really pretty easy to get to grips with, the manual is brief and doesn't have hundreds of pages (which is very cool) yet it releases 1.5 avalanches of additional Jamroom customisation power for each page you read.

A little bit of smarty plus a little bit of css and jquery... MUCH more power, and the next skin on the onion.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@soaringeagle
10 years ago
3,304 posts

much appreciated went with the div by 4
much shorter code then the 1st options

ive done alotta research into smarty but most of whatr ive found revolved around using smarety in php or the php/smarty equivalents

oh and trustme i know how much it unlocks amazing potential im just still learning to unravel the codes but sure have come a long way in a short time

--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

solved gallery oddness (last image dropping below rest)

Tags