Jquery Photoset Grid.

jaser · 2016-06-14 11:05:08

Has any worked out if it is possible to to add this feature to a textpattern site.
To the main articles.

http://stylehatch.github.io/photoset-grid

Last edited by jaser (2016-06-14 11:20:41)

jakob · 2016-06-14 16:00:00

The basic image syntax in textile isn’t clever enough to do that. You can write the html in your body field to output the images you want. Just start the HTML with a space at the beginning of the line, and textile will process the tags and not wrap them in <p>…</p> tags.

Another way is to use smd_macro or rah_beacon (link goes to my repaired fork of the original) to create an own txp tag that you can pass parameters to, e.g. a list of img_ids and a layout parameter. In your macro, you can then use txp:images to build the corresponding output.

Example: in your article’s body field you might insert:

{space}<txp:photoset img_ids="123,124,125,126,127" layout="131" />

and in your photoset macro or rah_beacon you define input variables for img_ids and layout and then output:

<div class="photoset-grid-basic" data-layout="{layout}">
<txp:images id="{img_ids}" break="">
  <img src="<txp:image_url thumbnail="1" />" width="<txp:image_info type="thumb_w" />" height="<txp:image_info type="thumb_h" />" data-highres="<txp:image_url />">
</txp:images>
</div>

or something along those lines. You can use smd_thumbnail if you want other image sizes, and you can expand on this if you want to add lightbox features and so on. I use something similar in conjunction with inuitcss instead of javascript/jquery to achieve the same.

michaelkpate · 2016-06-15 03:55:59

jakob wrote #299737:

The basic image syntax in textile isn’t clever enough to do that.

No, it isn’t… but there is a way.

1) This requires the adi-calc plugin so go ahead and install and activate that.

2) New Miscellaneous Form: images-count

<txp:adi_calc name="images-count" add="1" />

3) New Miscellaneous Form: photoset-grid

<txp:if_variable name="current-image" value="0">

<txp:if_variable name="images-count" value="1">
<txp:variable name="data-layout" value="1" />
</txp:if_variable>

<txp:if_variable name="images-count" value="2">
<txp:variable name="data-layout" value="11" />
</txp:if_variable>

<txp:if_variable name="images-count" value="3">
<txp:variable name="data-layout" value="21" />
</txp:if_variable>

<txp:if_variable name="images-count" value="4">
<txp:variable name="data-layout" value="121" />
</txp:if_variable>

<txp:if_variable name="images-count" value="5">
<txp:variable name="data-layout" value="212" />
</txp:if_variable>

<div class="photoset-grid-basic" data-layout="<txp:variable name="data-layout" />">

</txp:if_variable>

<img src="<txp:image_url />" width="<txp:image_info type="w" />" height="<txp:image_info type="h" />" data-highres="<txp:image_url />">

<txp:adi_calc name="current-image" add="1" />

<txp:if_variable name="current-image" value='<txp:variable name="images-count" />'>

</div>

</txp:if_variable>

4) I did this on a site using the current default templates. In this case go to the default article form and find the article image conditional and replace it with:

    <txp:if_article_image>
        <txp:variable name="images-count" value="0" />
        <txp:variable name="current-image" value="0" />
        <txp:images form="images-count" />
        <txp:images form="photoset-grid" break="" />
    </txp:if_article_image>

I have an example setup: http://www.datebasedarchives.cmsstyles.com/2016/06/14/images-are-awesome

You may notice that I didn’t try to use thumbnails or anything so this may need some more finagling but at least it works on a basic level.

jaser · 2016-06-19 19:48:06

Thanks :) txp hardcore.

Textpattern CMS

Textpattern CMS support forum

#1 2016-06-14 11:05:08

Jquery Photoset Grid.

#2 2016-06-14 16:00:00

Re: Jquery Photoset Grid.

#3 2016-06-15 03:55:59

Re: Jquery Photoset Grid.

jakob wrote #299737:

#4 2016-06-19 19:48:06

Re: Jquery Photoset Grid.

Board footer