Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding an image between Event List items


viiicks

Question

Hey there,  I'm trying to make an image display in between individual events on an events list page. I'm not sure what the best way to do this is. Is is possible to insert a horizontal line after each event? That way I could just replace all horizontal lines with this method. Is there an easier way? Thanks so much in advance.

Link to comment

11 answers to this question

Recommended Posts

  • 0

Please post the URL for the event list on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

I think this may only possible with some Javascript. It would require the business plan or above.

What the code would do would be to insert the images directly without the need for the CSS hr background image trick. The technique cited can't be used in your circumstance as there is no way to insert the hr in the event list without the use of Javascript.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 6/22/2021 at 5:29 PM, creedon said:

I think this may only possible with some Javascript. It would require the business plan or above.

Thanks for responding! I have just upgraded to a business plan, is it possible with the use of code injection?

Link to comment
  • 0

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d7/twcsl.js"></script>

 

Add the following to Event Settings > Advanced > Page Header Code Injection for the event page.

 

<!--

  begin add image tags between event list items
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : jQuery
                  
                  twcsl
  
  Note          : the code is comprised of several tags. all are needed for the
                  full effect to work
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <script>
  
    const imageUrl = '[enter image url here between single quotes]';
    
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    .twc-event-separator {
    
      display : block;
      margin : auto;
      margin-top : 68px;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( twcsl.eventPage.isDetail ) return; // bail if detail
      
      $( '.eventlist-event:not( :last )' ).each ( function ( ) {
      
        $imageTag = $( '<img class="twc-event-separator">' )
        
          .attr ( 'src', imageUrl )
          
          .insertAfter ( $( this ) );
          
        } );
        
      } );
      
    </script>
    
  <!-- end add image tags between event list items -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 6/23/2021 at 4:09 AM, viiicks said:

Sure sorry about that. My site is not public yet.

https://toucan-tiger-ph64.squarespace.com/
password = temppass

Thank you!

Just found some minor problems. Do you want to fix these?

Site URL: https://toucan-tiger-ph64.squarespace.com/

1. (Tablet – About) Increase text width?

https://toucan-tiger-ph64.squarespace.com/about

 

toucan-tiger-ph64.squarespace.com-01-min

2. (All devices – Homepage/Show) When i click on more infor, the site can’t be reach.

toucan-tiger-ph64.squarespace.com-02-min

3. (Mobile-Events) Reduce pagination title size?

https://toucan-tiger-ph64.squarespace.com/shows/wtt99aeo15oytuh1no8sw43zkdl97n-ehbmp-93pfz-s8r4y-zr3rc

toucan-tiger-ph64.squarespace.com-03-2-m

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...