gallery looks odd in desktop version

[mayarichman]

do people show galleries in mobile?

[IsabelleNastasia]

Hmm... Good question. Idk. Check NYT? On Jan 24, 2014 12:13 PM, "Maya" notifications@github.com wrote:

do people show galleries in mobile?

— Reply to this email directly or view it on GitHubhttps://github.com/youngist/clean-blog/issues/68 .

[mayarichman]

NYT has it but it's a different page and huffpo gets rid of it but has the images in the piece. Maybe we could put it in the piece but hide it until mobile version where the images show on the bottom?

On Fri, Jan 24, 2014 at 1:10 PM, IsabelleNastasia notifications@github.comwrote:

Hmm... Good question. Idk. Check NYT? On Jan 24, 2014 12:13 PM, "Maya" notifications@github.com wrote:

do people show galleries in mobile?

— Reply to this email directly or view it on GitHub< https://github.com/youngist/clean-blog/issues/68> .

— Reply to this email directly or view it on GitHubhttps://github.com/youngist/clean-blog/issues/68#issuecomment-33246637 .

[IsabelleNastasia]

I like that On Jan 24, 2014 1:54 PM, "Maya" notifications@github.com wrote:

NYT has it but it's a different page and huffpo gets rid of it but has the images in the piece. Maybe we could put it in the piece but hide it until mobile version where the images show on the bottom?

On Fri, Jan 24, 2014 at 1:10 PM, IsabelleNastasia notifications@github.comwrote:

Hmm... Good question. Idk. Check NYT? On Jan 24, 2014 12:13 PM, "Maya" notifications@github.com wrote:

do people show galleries in mobile?

— Reply to this email directly or view it on GitHub< https://github.com/youngist/clean-blog/issues/68> .

— Reply to this email directly or view it on GitHub< https://github.com/youngist/clean-blog/issues/68#issuecomment-33246637> .

— Reply to this email directly or view it on GitHubhttps://github.com/youngist/clean-blog/issues/68#issuecomment-33250311 .

[mayarichman]

If @awstevens wants to post a gallery, it is a little involved, but shouldn't be too complicated.

You will make an item with an image for each picture.

              <div class="item" >
                <img src="http://24.media.tumblr.com/60a3e6b31615fdf359956b9a77b13295/tumblr_mpdilzxoKT1sp5io1o2_1280.jpg" alt="">
              </div>

Then add them all into some surrounding divs.

<p class='hide-mobile'>
    <div id='postcarousel' class='col12 carousel slide hide-mobile'>
            <div class="carousel-inner">
              <div class="item active" >
                <img src="http://24.media.tumblr.com/a4d84465a6d0797e1965d27bb0fb5a59/tumblr_mpdilzxoKT1sp5io1o1_1280.jpg" alt="">
              </div>
              <div class="item" >
                <img src="http://24.media.tumblr.com/60a3e6b31615fdf359956b9a77b13295/tumblr_mpdilzxoKT1sp5io1o2_1280.jpg" alt="">
              </div>
              <div class="item" >
                <img src="http://31.media.tumblr.com/b64ea2a8f1dbef05171a21cd6c996fc0/tumblr_mpdilzxoKT1sp5io1o3_1280.jpg" alt="">
              </div>
              <div class="item"  >
                <img src="http://24.media.tumblr.com/f501e12e853f955d8c57118e6840c173/tumblr_mpdilzxoKT1sp5io1o4_1280.jpg" alt="">
              </div>
              <div class="item"  >
                <img src="http://25.media.tumblr.com/c6176cd1cf5eb9ed1b8030bb58c91384/tumblr_mpdilzxoKT1sp5io1o5_1280.jpg" alt="" >
              </div>
              <div class="item"  >
                <img src="http://31.media.tumblr.com/ac8d4b0081beec4f1b58c9d1e48c1495/tumblr_mpdilzxoKT1sp5io1o6_1280.jpg" alt="">
              </div>
              <div class="item"  >
                <img src="http://31.media.tumblr.com/a98789c5eabeeaedead757509797858a/tumblr_mpdilzxoKT1sp5io1o7_1280.jpg" alt="">
              </div>
              <div class="item"  >
                <img src="http://31.media.tumblr.com/ff96efc3f59f118a05b23674c8e8eb0c/tumblr_mpdilzxoKT1sp5io1o8_1280.jpg" alt="">
              </div>
              <div class="item"  >
                <img src="http://24.media.tumblr.com/518d80b71ed7f1b066345d973f0904f2/tumblr_mpdilzxoKT1sp5io1o9_1280.jpg" alt="">
              </div>
              <div class="item"  >
                <img src="http://24.media.tumblr.com/14ceac2e07e66d685501d2ccec55279a/tumblr_mpdilzxoKT1sp5io1o12_r1_1280.jpg" alt="">
              </div>
            </div>
            <div id='nav-buttons-post' class='hide-mobile'>
                <a class='left carousel-control' href='#postcarousel' data-slide='prev'><span class='pad4 prevslide'></span></a>
                <a class='right carousel-control' href='#postcarousel' data-slide='next'><span class='pad4 nextslide'></span></a>
            </div>

Finally for the little circle indicators, add as many li as there are images.

            <ol class="carousel-indicators" class-'hide-mobile'>
              <li data-target="#postcarousel" data-slide-to="0" class="active"></li>
              <li data-target="#postcarousel" data-slide-to="1" class=""></li>
              <li data-target="#postcarousel" data-slide-to="2" class=""></li>
              <li data-target="#postcarousel" data-slide-to="3" class=""></li>
              <li data-target="#postcarousel" data-slide-to="4" class=""></li>
              <li data-target="#postcarousel" data-slide-to="5" class=""></li>
              <li data-target="#postcarousel" data-slide-to="6" class=""></li>
              <li data-target="#postcarousel" data-slide-to="7" class=""></li>
              <li data-target="#postcarousel" data-slide-to="8" class=""></li>
              <li data-target="#postcarousel" data-slide-to="9" class=""></li>
            </ol>
          </div>
</p>

This will disappear in tablet mode and the images will appear in the text where ever you place them. Make sure they are wrapped in a div that says 'show-mobile' and each image has a class='col12' so it expands with the screen.

Menstrual fluid is socially taboo; the first time an adolescent menstruates, (she) is celebrated for having achieved ‘womanhood,’ and now being capable of procreation. During the rest of a woman’s life, menstruation is repressed. It is deemed the source of bitterness and other behaviours unacceptable to the male social order. The pathology and social construction of PMS is but one example.

<div class='show-mobile'>
<img src="http://24.media.tumblr.com/a4d84465a6d0797e1965d27bb0fb5a59/tumblr_mpdilzxoKT1sp5io1o1_1280.jpg" alt="" class='col12'>

<img src="http://24.media.tumblr.com/60a3e6b31615fdf359956b9a77b13295/tumblr_mpdilzxoKT1sp5io1o2_1280.jpg" alt="" class='col12'>

</div>

Similarly, a woman’s femininity is said to be realized when she  becomes the material and emotional property of her husband. The husband is supposed to make her bleed by breaking her hymen,  a rare time in a woman’s life where a bodily secretion are permitted to be acknowledged and celebrated.

[mayarichman]

Gallery disappears properly in mobile but looks bad when the screen changes size. This is because the height of the inner carousel does not change with the picture.

[mayarichman]

I am using a new gallery system that is free, found at http://galleria.io/. The code required to post new gallery is very simple.

<div id="galleria"></div>
<script>

// Load the classic theme
Galleria.loadTheme('{{base}}/js/galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria', {

 flickr: 'set:72157642299043965',
 flickrOptions: {
 sort: 'date-posted-asc'
 }
});
</script>

The number following 'set:' can be found in the url after making a set on flickr. I will also write other options for posting gallery besides from flickr. The current theme is free. If we want fullscreen capabilities or other things, here is the link to the paid options.

@IsabelleNastasia if we like the paid ones more, we can talk about paying for it. Otherwise, checkout http://thewildcity.org/my-marriage-my-body/ for a live example.

[mayarichman]

Gallery looking good. Closing.