Loading ...

How to Remove User from Photos in Carousel template | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » How to Remove User from Photos in Carousel template
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

How to Remove User from Photos in Carousel template

Subscribe to RSS
  • Hello again team Axero.

    My question today is how to remove the "User" (person who uploaded photo or created photo album) from the display in the carousel (carousel with sidebar). 

    Thanks for your help.

    Jennifer

  • Also how to remove the User (image and name) from the photo itself and use the profile image & name of the person in the photo:

  • Hi Jennifer,

    For the first point, what is the widget template that is being used for this widget? I can edit the template to remove the author.

    For the second, do you want the author gone from all photo uploads, or just in one specific space?

    Thanks,
    Foster

  • Hi Foster - 

    The widget template is: Carousel with sidebar

    Yeah, we probably want to remove the author from all photo uploads.

    Thanks!

    jennifer

     

  • Hi Jennifer,

    For the widget template, please go to your templates and click add new template. (cdrhhome.fda.gov/admin/uibuilder/templates) 

    Make sure that the widget type is named Content List, and the Subtype is also Content list. I named the widget in this example Carousel with Sidebar - No Author

    Please enter the following in the template:

    <div id="awesomeCarousel" class="carousel carousel-fade slide">
    		<div class="carousel-inner">
    			{{#each Contents}}
    			<div class="item">
    				<img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    				<div class="carousel-caption">
    					<h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
    					<p>{{{Summary}}}</p>
    					
    				</div>
    			</div>
    			{{/each}}
    		</div>
    		<div class="list-group-container">
    			<ul class="list-group">
    				{{#each Contents}}
    				<li data-target="#awesomeCarousel" data-slide-to="{{@index}}" class="list-group-item">
    					<div class="active-indicator"><i class="icon-caret-left"></i></div>
    					<img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    					<div class="item-info">
    						<h4>{{{Title}}}</h4>
    						<p class="more-info">{{DateCreatedString}} {{../Resources.GlobalByText}} <a class="axero-user-card-link" href="{{AuthorUserProfileURL}}" data-user="{{{AuthorUserID}}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a></p>
    					</div>
    				</li>
    				{{/each}}
    			</ul>
    		</div>
    		<div class="carousel-controls">
    			<a class="left carousel-control" href="#awesomeCarousel" data-slide="prev">&#8249;</a>
    			<a class="right carousel-control" href="#awesomeCarousel" data-slide="next">&#8250;</a>
    		</div>
    	</div>
    	<script type="text/javascript">
    	$(document).ready(function(){
        
    		var clickEvent = false;
    		$('#awesomeCarousel').carousel({
    			interval:   10000	
    		}).on('click', '.list-group li', function() {
    				clickEvent = true;
    				$('.list-group li').removeClass('active');
    				$(this).addClass('active');		
    		}).on('slid.bs.carousel', function(e) {
    			if(!clickEvent) {
    				var count = $('.list-group').children().length -1;
    				var current = $('.list-group li.active');
    				current.removeClass('active').next().addClass('active');
    				var id = parseInt(current.data('slide-to'));
    				if(count == id) {
    					$('.list-group li').first().addClass('active');	
    				}
    			}
    			clickEvent = false;
    		});
    		$('#awesomeCarousel').find('div.item:eq(0)').addClass('active');
    		$('#awesomeCarousel').find('li.list-group-item:eq(0)').addClass('active');
    	});
    	</script>

    This will remove the Author form this widget. I will get back to you soon on removing the author from photos.

    Thanks,
    Foster

  • thanks Foster! That worked great on the main photo, but not in the sidebar:

  • To remove the author from photos when viewing, please add the following to your CSS Overrides 

    .ax-en-dt-bar.ax-en-dt-bar-photo .ax-en-dt-bar-left .p-user{display:none;}

    Thank you!
    Foster

  • Answered

    Hi Jennifer, 

    Please use this template instead. 

     

    <div id="awesomeCarousel" class="carousel carousel-fade slide">
    		<div class="carousel-inner">
    			{{#each Contents}}
    			<div class="item">
    				<img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    				<div class="carousel-caption">
    					<h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
    					<p>{{{Summary}}}</p>
    					
    				</div>
    			</div>
    			{{/each}}
    		</div>
    		<div class="list-group-container">
    			<ul class="list-group">
    				{{#each Contents}}
    				<li data-target="#awesomeCarousel" data-slide-to="{{@index}}" class="list-group-item">
    					<div class="active-indicator"><i class="icon-caret-left"></i></div>
    					<img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    					<div class="item-info">
    						<h4>{{{Title}}}</h4>
    					</div>
    				</li>
    				{{/each}}
    			</ul>
    		</div>
    		<div class="carousel-controls">
    			<a class="left carousel-control" href="#awesomeCarousel" data-slide="prev">&#8249;</a>
    			<a class="right carousel-control" href="#awesomeCarousel" data-slide="next">&#8250;</a>
    		</div>
    	</div>
    	<script type="text/javascript">
    	$(document).ready(function(){
        
    		var clickEvent = false;
    		$('#awesomeCarousel').carousel({
    			interval:   10000	
    		}).on('click', '.list-group li', function() {
    				clickEvent = true;
    				$('.list-group li').removeClass('active');
    				$(this).addClass('active');		
    		}).on('slid.bs.carousel', function(e) {
    			if(!clickEvent) {
    				var count = $('.list-group').children().length -1;
    				var current = $('.list-group li.active');
    				current.removeClass('active').next().addClass('active');
    				var id = parseInt(current.data('slide-to'));
    				if(count == id) {
    					$('.list-group li').first().addClass('active');	
    				}
    			}
    			clickEvent = false;
    		});
    		$('#awesomeCarousel').find('div.item:eq(0)').addClass('active');
    		$('#awesomeCarousel').find('li.list-group-item:eq(0)').addClass('active');
    	});
    	</script>

     

    I apologize for missing that the first time around. 

    Best,
    Foster

  • Thanks Foster! That worked!

    Much appreciated.

    Jennifer

Page 1 of 1 (9 items)