At Code for Galleries

 MODIFIED Date: 4/15/2019 |  User Level: Regular User |  Views: 999

Summary


In this KB article I’ll  be covering a specific usage of AAS in combination with with galleries. By the end of this article you’ll learn how to automate the  display of gallery images by using At Code. I’ll break things down into the following steps :



  • Preparing your Gallery

  • The At code

    • Headers, Details, and Footers Oh My!

    • How to display the At code

 


Requirements


Reading:



Preparing Your Gallery


There are only 2 fields that you need to care about to prepare your gallery. Those are Category(In Gallery Image Information) and Description(1 of  5)(In Extra Information).

The gallery you are creating should all have the same category because the At Code will be searching for your images by that field.

The description will show when the user hovers over the image. Once you create your gallery you’re ready to move on to the At Code.  


The At Code

To begin I must explain somethings about custom At Code. For each custom At Code you must have a Header Detail and a Footer. However you must also be aware of what module you are pulling information from. In this case the module name is  Galleries but the Category for the new app setting should be Gallery. The reason for this is that in the code itself “Gallery” is that which associates with the “Galleries” module. The Field Name matters in a different way. This name will be how you reference the At Code. To make an At Codable thing you must create 3 separate app settings. All of them must have the same name except the end must be either Header, Detail, or Footer (no duplicates).

Headers, Details, and Footers Oh My!


In the header of this At Code you’ll be including lots of CSS to perform some animations. Here’s that code now. I won’t  be covering how it works but you’re free to play with it and figure it out.


<style>

.box {

   cursor: pointer;

   height: 300px;

   position: relative;

   overflow: hidden;

   width: 100%;

}

.box img {

   position: absolute;

   left: 0;

   -webkit-transition: all 300ms ease-out;

   -moz-transition: all 300ms ease-out;

   -o-transition: all 300ms ease-out;

   -ms-transition: all 300ms ease-out;

   transition: all 300ms ease-out;

}

.box .overbox {

   background-color: #fff;

   position: absolute;

   top: 0;

   left: 0;

   color: #212121;

   z-index: 100;

   -webkit-transition: all 300ms ease-out;

   -moz-transition: all 300ms ease-out;

   -o-transition: all 300ms ease-out;

   -ms-transition: all 300ms ease-out;

   transition: all 300ms ease-out;

   opacity: 0;

   width: 100%;

   height: 300px;

   padding: 50px 20px;

}

.box:hover .overbox {

   opacity: 0.75;

}

.box .overtext {

   -webkit-transition: all 300ms ease-out;

   -moz-transition: all 300ms ease-out;

   -o-transition: all 300ms ease-out;

   -ms-transition: all 300ms ease-out;

   transition: all 300ms ease-out;

   transform: translateY(40px);

   -webkit-transform: translateY(40px);

}

.box .title {

   font-size: 1.5em;

   text-transform: uppercase;

   opacity: 0;

   transition-delay: 0.1s;

   transition-duration: 0.2s;

}

.box:hover .title,

.box:focus .title {

   opacity: 1;

   transform: translateY(0px);

   -webkit-transform: translateY(0px);

}

.box .tagline {

   font-size: 0.8em;

   opacity: 0;

   transition-delay: 0.2s;

   transition-duration: 0.2s;

}

.box:hover .tagline,

.box:focus .tagline {

   opacity: 1;

   transform: translateX(0px);

   -webkit-transform: translateX(0px);

}

</style>


The Detail contains what will actually be visible on the site. In this case we use HTML along with  variables that are used in the Galleries Module. Remember when we made the Category in this app setting “Gallery”? Without  doing that the values for the variables that we want won’t be found. The reason is that the values of those variables are only stored in the “Gallery” Module. Now Let’s look at some code.


<div class="medium-4 columns end" style="margin-bottom:12px;">

<a data-fancybox="gallery" href="/UserControls/DatabaseImage.ashx?RegardingIdentifier=#BLOBIDENTIFIER#">

<div class="box">

<img class="imageShadow" src="/UserControls/DatabaseImage.ashx?RegardingIdentifier=#BLOBIDENTIFIER#&Width:450" alt="#BLOBDESCRIPTION#">

<div class="overbox">

<div class="title overtext">#BLOBDESCRIPTION1#</div>

<div class="tagline overtext">&nbsp;</div>

</div>

</div>

</a>

</div>


The variables must be within hashtags. That being said allow me to explain what these 2  variables are:

  • #BLOBIDENTIFIER# -  This identifier is associated with the image stored in the database.

  • #BLOBDESCRIPTION# -  This represents the descriptions that you filled for your galleries.


Finally we have the footer. In this case and in most cases contains references to scripts that allow some special functionality. All you need to do is make sure it’s in the footer! Here’s the code for that.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>


Then once you have created all 3 of your new app settings confirm that they are the same and correct category, have the same Field Name, and have a header ,detail, footer. You can confirm this by going to the main page of App Settings (Advanced) then typing the Field Name in the Field Name column. Your results should look something like this:




How to display the At Code


If you made it this far I want you to know the hardest part is over and done with. One simple line of code will be enough to display your gallery. You put this code in the Page Content

of the page you want the gallery. The code for this particular instance looks like this:


@GALLERYCOUNTYPHOTOTOUR|CATEGORY:COUNTY%20PHOTO%20TOUR%20IMAGE@

As you can see when referencing an At Code there are no spaces, all caps, and the header,detail, and footer are not used in reference. The bar is then used to start search with within the Gallery module database. In this case it’s searching the Category variable for “COUNTY%20PHOTO%20TOUR%20IMAGE”. The “%20” represent spaces in the Category name.


Now… There’s actually no reason why we use Category as the common field (the field all the images in the galler have in common) that ties the gallery together, apart from a logical association. In other words it just makes sense to use the Category field. However if you wanted to use any other field as the common field then you could! Additionally if you wanted to utilize other information from the Galleries module in your At Code you could. Below is a list of all the information you can gather from a Galleries:


  tempString = tempString.Replace("#BLOBCATEGORY#", string.Format("{0}", item.BlobCategory));

                   tempString = tempString.Replace("#BLOBFILENAME#", string.Format("{0}", item.BlobFilename));

                   tempString = tempString.Replace("#BLOBDESCRIPTION#", string.Format("{0}", item.BlobDescription));

                   tempString = tempString.Replace("#BLOBCONTENTTYPE#", string.Format("{0}", item.BlobContentType));

                   tempString = tempString.Replace("#BLOBFILESIZE#", string.Format("{0:n0}", item.BlobFilesize));

                   tempString = tempString.Replace("#BLOBGROUPNAME#", string.Format("{0}", item.BlobGroupName));

                   tempString = tempString.Replace("#BLOBDESCRIPTIONLONG#", string.Format("{0}", item.BlobDescriptionLong));

                   tempString = tempString.Replace("#BLOBDESCRIPTION1#", string.Format("{0}", item.BlobDescription1));

                   tempString = tempString.Replace("#BLOBDESCRIPTION2#", string.Format("{0}", item.BlobDescription2));

                   tempString = tempString.Replace("#BLOBDESCRIPTION3#", string.Format("{0}", item.BlobDescription3));

                   tempString = tempString.Replace("#BLOBDESCRIPTION4#", string.Format("{0}", item.BlobDescription4));

                   tempString = tempString.Replace("#BLOBDESCRIPTION5#", string.Format("{0}", item.BlobDescription5));

                   tempString = tempString.Replace("#GALLERYALTERNATEVIEW#", string.Format("{0}", item.GalleryAlternateView));

                   tempString = tempString.Replace("0", string.Format("{0}", item.DisplayOrder));


                   tempString = tempString.Replace("#CREATEDBY#", string.Format("{0}", item.CreatedBy));


                   if (tempString.Contains("#CREATEDDATE"))

                   {

                       tempString = UtilitiesCore.StringToDateConversion(tempString, item.CreatedDate, "#CREATEDDATE");

                   }


                   tempString = tempString.Replace("#MODIFIEDBY#", string.Format("{0}", item.ModifiedBy));


                   if (tempString.Contains("#MODIFIEDDATE"))

                   {

                       tempString = UtilitiesCore.StringToDateConversion(tempString, item.ModifiedDate, "#MODIFIEDDATE");

                   }


                   tempString = tempString.Replace("#BLOBIDENTIFIER#", string.Format("{0}", item.BlobIdentifier));

                   tempString = tempString.Replace("587eca20-86d0-42b1-85f1-09632d803542", string.Format("{0}", item.BlobIdentifier));

                   tempString = tempString.Replace("#REGARDINGIDENTIFIER#", string.Format("{0}", item.RegardingIdentifier));