Select to view content in your preferred language

How to remove expand icon from HTML images in story map

3204
2
Jump to solution
04-21-2016 01:29 PM
MarkHoover1
Deactivated User

I am working on a story map journal and after several posts on here as well as some HTML5 and bootstrap courses I have been able to dive in and be somewhat successful in the coding world....


I created a bootstrap grid that goes from 4 columns on a large screen to 1 on mobile that consisted of project types that one could click on and a main stage action would display the desired project.  I decided that it would be nice if each project text was paired with an image icon. I went back, found some code and pushed it up on my server.  While the images are there, along with the caption, each image has expand arrows on them.  See below

I am not sure where these arrows are coming from.  The example code I found on-line did not have them and when i put the code in an editor like w3 school the arrows are not there.  Below is my code for this page. 

<div class="row">

<div class="col-sm-6 col-md-3">

<div class="thumbnail"><img alt="Generic placeholder thumbnail" src="http://s3.amazonaws.com/nfwf-photos/medium/232.jpg" /></div>

<div class="caption">

<h3>Site 1</h3>

</div>

</div>

<div class="col-sm-6 col-md-3">

<div class="thumbnail"><img alt="Generic placeholder thumbnail" src="http://s3.amazonaws.com/nfwf-photos/medium/232.jpg" /></div>

<div class="caption">

<h3>Site 2</h3>

</div>

</div>

<div class="col-sm-6 col-md-3">

<div class="thumbnail"><img alt="Generic placeholder thumbnail" src="http://s3.amazonaws.com/nfwf-photos/medium/232.jpg" /></div>

<div class="caption">

<h3>Site 3</h3>

</div>

</div>

<div class="col-sm-6 col-md-3">

<div class="thumbnail"><img alt="Generic placeholder thumbnail" src="http://s3.amazonaws.com/nfwf-photos/medium/232.jpg" /></div>

<div class="caption">

<h3>Site 4</h3>

</div>

</div>

</div>

Unfortunately I am unable to make this story map public at this time.  Any advice would be greatly appreciated.

Thank You

0 Kudos
1 Solution

Accepted Solutions
GregoryL_Azou
Deactivated User

Sorry about that, Map Journal is a bit aggressive and add this button to every image (except in some condition but you can't replicate them as you are using a bootstrap grid). The most simple would be to hide it through a CSS rules: (just add that rule through the source mode)

<style>
.btn-fullscreen {
display: none;
}
</style>

In that case it will hide all the expand button in your Journal, if you only want to hide those particular button but keep them in rest of the Journal, you could use the thumbnail class that you define on those to be more specific:

<style>
.thumbnail .btn-fullscreen {
display: none;
}
</style>

View solution in original post

2 Replies
GregoryL_Azou
Deactivated User

Sorry about that, Map Journal is a bit aggressive and add this button to every image (except in some condition but you can't replicate them as you are using a bootstrap grid). The most simple would be to hide it through a CSS rules: (just add that rule through the source mode)

<style>
.btn-fullscreen {
display: none;
}
</style>

In that case it will hide all the expand button in your Journal, if you only want to hide those particular button but keep them in rest of the Journal, you could use the thumbnail class that you define on those to be more specific:

<style>
.thumbnail .btn-fullscreen {
display: none;
}
</style>
MarkHoover1
Deactivated User

That did the trick!


Thank You

0 Kudos