Docs

[spaulgal]

Hi-
We currently have 11 episode pages like this one:

The Church::Episode 11

I need to now build a central page that will serve as central hub with links to each of them.
Possibly better yet, put some element on my main page, that will allow the viewer to select which episode page they want to see.
Might you recommend a good mechanism to do that?
Maybe some sort of scrolling Lightbox element?
What are the options in X?

Thanks as always

Steve

[Lely]

Hello Steve,

Thanks for posting in.
We can use BLOCK GRID ELEMENT. Inside each grid we can add image with link to those specific page. Please clarify what you meant by scrolling lightbox element. We do have lightbox element:http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/

Hope this helps.

[spaulgal]

Hi The Block Grid Element will work great.
A few quick questions.

1) Do I simply paste the code into a text element in cornerstone?

2) What is the ideal size for the thumbails?

3) Most importantly, where is the target link set for each thumbnail? I don’t see any target in the code

Thanks

[Christopher]

Hi there,

#1 You can use block grid element in cornerstone without adding shortcode.

#2 The image dimensions should be around 800*531px.

#3 You can use following shortcode inside block grid element :

[x_image src="http://yoursite.com/image.jpg" alt="Place Alt Text Here" type="thumbnail" href="ADD URL HERE"]

Hope that helps.

[spaulgal]

This reply has been marked as private.

[Lely]

Hi There,

Please try this code:

[x_image src="http://colorsstudios.com/wp-content/uploads/2016/04/1-800x531.jpg" alt="Place Alt Text Here" link="true" type="thumbnail" href=" http://colorsstudios.com/?page_id=2154"]
<h6 class="mtn"> Episode 001<br>
"No Prisoners, No Nazi's, Just Church"</h6>

I have added this link=”true” parameter on image shortcode.
Then remove the <br> after image.
Lastly, add class="mtn". This will reset default top margin to zero.
This link might help:https://community.theme.co/kb/css-class-index/

Always,
X

[spaulgal]

One small thing.. if you’ll notice in the screen shot, the images are not centered, they are right-side heavy.

The Church::Episodes

Also, on MOBILE, I noticed that quite often the wrong images can load when the site is site is first loaded. If I refresh, it usually fixes the problem. IS this a known issue?

Thanks

Steve

[Rue Nel]

Hello There,

Thanks for the screenshot. To center the images inside the block grid, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

li.x-block-grid-item {}
@media (max-width: 480px){
  .x-block-grid{
    margin: 0 auto;
  }
  
  .x-block-grid.four-up>.x-block-grid-item {
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
  }
}

I noticed that you are using an older version of X(4.0.6) and Cornerstone(1.0.5). X 4.4.2 and Cornerstone 1.2.4 are now available! This release contains several bug fixes and we’re quite excited about the new features, so be sure to check out the changelog. Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[spaulgal]

I can get step by step directions on how to update both X and cornerstone?
Keep in mind we;re running a child theme.

thanks!

[Paul R]

Hi,

You may refer to the link below.

https://community.theme.co/kb/updating-your-theme-and-plugins/

Hope that helps.

[Author]

Posts