AT Code for Galleries

 Modified Date: 2/20/2022 |  User Level: Regular User |  Views: 2,866

Summary

In this KB article we will be covering the codes available for use when working with photo galleries. By the end of this article you'll learn how to automate the display of gallery images by using At Codes. We will break things down into the following steps:

  • Preparing your gallery
  • What is an AT code
  • Headers, Details, and Footers Oh My!
  • How to display the At code

Requirements

Below are a list of KB articles that will also be beneficial for you when working with the gallery module.

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 galleryies 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 “galleryies” 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

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.

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 galleryies 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.

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 galleryies.

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.

Available Codes

Now... There's actually no reason why we use Category as the common field (the field all the images in the gallery 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 galleryies module in your At Code you could. Below is a list of all the information you can gather from a galleryies:

  • #BLOBCATEGORY# - The category the image is assigned to.
  • #BLOBFILENAME# - The filename of the image.
  • #BLOBDESCRIPTION# - The short description of the image.
  • #BLOBCONTENTTYPE# - The content type of the image.
  • #BLOBFILESIZE# - The filesize of the image.
  • #BLOBGROUPNAME# - The group name of the image.
  • #BLOBDESCRIPTIONLONG# - The long description of the image.
  • #BLOBDESCRIPTION1# - Description Line #1 of the image.
  • #BLOBDESCRIPTION2# - Description Line #2 of the image.
  • #BLOBDESCRIPTION3# - Description Line #3 of the image.
  • #BLOBDESCRIPTION4# - Description Line #4 of the image.
  • #BLOBDESCRIPTION5# - Description Line #5 of the image.
  • #GALLERYALTERNATEVIEW# - The VIEW of the image.
  • 0 - The display order of the image.
  • #CREATEDBY# - Who originally uploaded the image.
  • #CREATEDDATE___# - The original upload date for the image.
  • #MODIFIEDBY# - Who last modified the image.
  • #MODIFIEDDATE___# - The last modified date of the image.
  • #BLOBIDENTIFIER# - The unique identifier for the image.
  • 587eca20-86d0-42b1-85f1-09632d803542 - The unique identifier for the image.
  • #REGARDINGIDENTIFIER# - Any module relation for the image (e.g., user, account, job posting, etc.)

Digital Marketing Partners We Work With

Fawkes Digital Marketing works with industry leaders to help you grow your business with an emphasis on getting leads and turning potential customers in customers. We strive to continue the education process so that your current customesr stay loyal and become cheerleaders of your brand.