Need help working with DreamTemplate code

HTML & CSS
1

I am using this template from www.dreamtemplate.com and have most of it figured out but some things are confusing me. The code creates this picture gallery that you can see on the [URL=“http://www.templateaccess.com/demos/responsive/html/centindu/portfolio_iso.html”]live demo page. I would like to replace the pictures with my own and at first I thought this was some kind of dynamic link to a gallery of photos but the more I look at it the more it seems like each photo is linked to a specific photo web address. My question is how do I manage this, do I just have to go in and manually change the portfolio filters to ones I want then go through all the portfolio items and link them to the images and change the data filter? I guess I just assumed I would point it to a folder, flickr, or other photo site and have it pull from that. Any help would be appreciated since I am designing this site to demo my video and photo work to try and get a job and cant afford a web designer.

      <!-- prettyPhoto Start -->
      <link rel="stylesheet" type="text/css" href="dc_iso_portfolio/prettyPhoto/css/prettyPhoto.css" />
      <script type="text/javascript" src="dc_iso_portfolio/prettyPhoto/js/jquery.prettyPhoto.js"></script>
      <!-- prettyPhoto END -->

      <section id="content" class="dc_iso_container">
        <div class="hero-unit"> <a href="#" id="acolsinit">Default View</a> | <a href="#" id="acols4">4 columns</a> | <a href="#" id="acols3">3 columns</a> | <a href="#" id="acols2">2 columns</a> </div>
        <br />
        <div id="portfolio">
          <ul id="dc_iso_portfolio_filter">
            <li id="f-all" class="active"><a href="#" class="filter" data-filter="*">All</a></li>
            <li><a href="#" class="filter" data-filter=".people">People</a></li>
            <li><a href="#" class="filter" data-filter=".food">Food</a></li>
            <li><a href="#" class="filter" data-filter=".space">Space</a></li>
            <li><a href="#" class="filter" data-filter=".beauty">Beauty</a></li>
            <li><a href="#" class="filter" data-filter=".fantasy">Fantasy</a></li>
            <li><a href="#" class="filter" data-filter=".nature">Nature</a></li>
            <li><a href="#" class="filter" data-filter=".transport">Transport</a></li>
          </ul>

          <!-- portfolio items -->
          <section class="row" id="dc_iso_portfolio_items">
            <article class="dc_iso_item" data-fsize="div6" data-tags="food">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/999999/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/999999/fff/img.png"></a>
                <div class="item_descr"><b class="dc_iso_item-name icon4">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div6" data-tags="space">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                <div class="item_descr"><b class="name icon1">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="beauty,people">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/777/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/777/fff/img.png"></a>
                <div class="item_descr"><b class="name icon2">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/666/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/666/fff/img.png"></a>
                <div class="item_descr"><b class="name icon3">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="nature">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/555/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/555/fff/img.png"></a>
                <div class="item_descr"><b class="name icon4">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div3" data-tags="space">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/444/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/444/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div3" data-tags="beauty,people">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/333/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/333/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div3" data-tags="food">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/222/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/222/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div3" data-tags="nature">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/111/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/111/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="transport">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/000/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/000/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="beauty">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/789987/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/789987/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/777ggg/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/777ggg/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="food,people">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/123321/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/123321/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="beauty">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/321321/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/321321/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="transport,people">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/600666/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/600666/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="food">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/999/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/999/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="space">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/777/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/777/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="food">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/666/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/666/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="nature">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/555/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/555/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="fantasy">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/444/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/444/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="transport">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/333/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/333/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="food">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/222/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/222/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
            <article class="dc_iso_item" data-fsize="div4" data-tags="transport">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/111/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/111/fff/img.png"></a>
                <div class="item_descr"><b class="name icon5">Lorem ipsum</b></div>
              </div>
            </article>
          </section>
        </div>
      </section>
      <br />
      <br />
      <script type="text/javascript" src="dc_iso_portfolio/js/jquery.isotope.min.js"></script>
      <script type="text/javascript" src="dc_iso_portfolio/js/dc_iso_portfolio.js"></script>

      <!-- required for prettyphoto lightbox -->

      <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'dark_square',slideshow:8000, autoplay_slideshow: false, social_tools: false,show_title: true, allow_resize: true});
  });
</script>
      <!-- required for prettyphoto lightbox -->
	<!-- end content -->
2

That template is nothing but static HTML. Changing photos and categories will need to be done manually. Populating the gallery from a folder or flickr automatically is a whole other can of worms that would require server-side programming.

3

Thanks for the reply, at least now I know. The reason I was confused also about it being automatic is because the template loads this flickr feed jquery script on every page in the template html head and I was hoping that had something to do with it. I guess that is just there from some other page they made that may have had a actual flicker feed in it.

So to decode a part of the element could I confirm my understanding here

 <article class="dc_iso_item" data-fsize="div6" data-tags="space">
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                <div class="item_descr"><b class="name icon1">Lorem ipsum</b></div>

so obviously I replace the http address with one relative to my photo but I see 2 in there so is one a thumbnail and the other the full size image?

Also what does the "rel="prettyPhoto[gallery1}’ mean. Is that what makes it the adjustable by category on the page?

Anthony

4

correct,

The thumbnail would be the one inside the img tag and the a href is the full size image shown in the lightbox.

That would be the collection (gallery) that the image corresponds. This exists probably to support multiple galleries and flag the image for inclusion in the gallery.

The category looks to be controlled by the value of data-tags=“foobar”. When you click on a gallery category link the script hides all the images that are not tagged with the clicked category.

Example, add sports category:


          <ul id="dc_iso_portfolio_filter">
            <li id="f-all" class="active"><a href="#" class="filter" data-filter="*">All</a></li>
            <li><a href="#" class="filter" data-filter=".people">People</a></li>
            <li><a href="#" class="filter" data-filter=".food">Food</a></li>
            <li><a href="#" class="filter" data-filter=".space">Space</a></li>
            <li><a href="#" class="filter" data-filter=".beauty">Beauty</a></li>
            <li><a href="#" class="filter" data-filter=".fantasy">Fantasy</a></li>
            <li><a href="#" class="filter" data-filter=".nature">Nature</a></li>
            <li><a href="#" class="filter" data-filter=".transport">Transport</a></li>

            <!-- the new sports category link -->
            <li><a href="#" class="filter" data-filter=".sports">Sports</a></li>
          </ul>

An image tagged as part of the sports category.


 <article class="dc_iso_item" data-fsize="div6" data-tags="sports"> <!-- note the sports category inside the attribute -->
              <div class="dc_iso_thumb link"> <a href="http://pimg.co/p/460x320/888/fff/img.png" rel='prettyPhoto[gallery1]' title="Description of item goes here"><img alt="Sample Title" src="http://pimg.co/p/460x320/888/fff/img.png"></a>
                <div class="item_descr"><b class="name icon1">Lorem ipsum</b></div>
5

oddz thanks a bunch for explaining that to me and for taking the time to put in examples. It really helps me wrap my head around this and I hope some day I can understand this all and not need to start with templates.

I actually do have one final question if not too much trouble. In the contact page here it appears to have two columns for the body content. I noticed when this is viewed on a iphones smaller screen portrait style or if the browser window is scaled down horizontally the content reaches a point where the columns merge and the text starts to overlap. I understand this problem to be from the columns the style sheet is setting up and the fact that the left column has the text aligned to left and the right column has the text aligned to right. My question is how do I stop them at a point before they merge so that any scaling past that point would include a scroll bar horizontally or stack the content in some nature to avoid this problem?

If there is anything I can supply to help show the problem I would be happy to but wasn’t sure what code to supply. I will note this specific template does include separate code at points to designate different device screen sizes and I imagine that is what is driving certain aspects of this layout.