Browse Source

feat(img_enlarged): Prepares code

pull/49/head
sovanna 2 years ago
parent
commit
a0314e60ef
  1. 1
      content/about-us/_index.md
  2. 4
      sass/css/_base.scss
  3. 4
      sass/css/_layout.scss
  4. 25
      templates/_base.html
  5. 4
      templates/shortcodes/layout_text_img.html

1
content/about-us/_index.md

@ -2,7 +2,6 @@
title = "About us"
weight = 4
sort_by = "weight"
template = "customs/about-us.html"
[extra]
title = "About us"

4
sass/css/_base.scss

@ -203,4 +203,8 @@ ul:not(.navbar-nav) li {
.badge-primary {
background-color: $brand-color;
}
.modal-lg {
max-width: 90%;
}

4
sass/css/_layout.scss

@ -111,6 +111,10 @@ h3, h2, h1 {
padding-top: .5rem;
margin-top: 12px;
}
.modal-lg {
max-width: 70%;
}
}
// Extra large devices (large desktops, 1200px and up)

25
templates/_base.html

@ -140,6 +140,20 @@
<!-- ./FOOTER -->
<!-- MODAL for enlarged picture -->
<div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="" id="enlarged" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
@ -153,6 +167,17 @@
</script>
<script>
$(function () {
$('[data-popup]').click(function (evt) {
var _self = $(this);
var _img_enlarged = _self.data('nsrc');
$('#enlarged').attr('src', _img_enlarged);
$('#modalEnlarged').modal('show');
});
});
</script>
</body>
</html>

4
templates/shortcodes/layout_text_img.html

@ -13,7 +13,7 @@
<div class="card {% if shadow %}shadow{% endif %}">
{% if src %}
<img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
<img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
</div>
@ -27,7 +27,7 @@
<div class="card {% if shadow %}shadow{% endif %}">
{% if src %}
<img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
<img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
</div>

Loading…
Cancel
Save