Skip to content

Instantly share code, notes, and snippets.

@yunusemredilber
Created October 9, 2019 11:12
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save yunusemredilber/ee4dd5b2c7fc7d24851c803685f3aead to your computer and use it in GitHub Desktop.
Bootstrap grid of images responsive [Rails] [Stimulus]
<div class="row">
<% photos.each_with_index do |photo, i| %>
<% if i == 0 %>
<%= render partial: 'image', locals: { image: image, col_length: 12, square: false }, cached: true %>
<% else %>
<%= render partial: 'image', locals: { image: image, col_length: 4, square: true }, cached: true %>
<% end %>
<% end %>
</div>
<%= link_to image_tag(photo.variant(resize: "250"), class: 'img-fluid object-fit-contain', width: "100%", height: "100%", data: { target: square ? 'square-image.image': '' }), photo, class: "col-#{col_length.to_s} p-1", data: { controller: square ? 'square-image': '' } %>
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["image"];
connect() {
console.log('square-images_controller connected...');
console.log(this.imageTarget.width);
this.imageTarget.style.height = this.imageTarget.width + 'px';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment