I'm new to rails and stack over flow, I would be grateful to you all if I can guided here.
I'm developing a test site which is like a personal blog just to add portfolio for one user.
I have a scaffold "Images" which is used to add images in the application the scaffold have only two fields one to upload the image and other for the photographer name.
- The images will be shown on the home page - which is working absolutely fine.
- However, when I click the image the image gets zoomed in and the user can use the right and left arrows to scroll the pictures.
- My problem - When the image is click the images are not getting fetched and it shows the message "This image could not be loaded.
Below is my code for your kind reference, I'm sure I'm making some mistake in this line
<a href="image_tag image.photo.url" title="<%= image.by %>" >
However, unable to rectify it yet.
any help or suggestion would be great.
My Code
<!-- start portfolio section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-md-12 no-padding xs-padding-15px-lr">
<div class="filter-content overflow-hidden">
<ul class="portfolio-grid work-3col hover-option4 lightbox-gallery gutter-small">
<li class="grid-sizer"></li>
<!-- start portfolio item -->
<% @images.order('created_at DESC').each do |image| %>
<li class="grid-item web branding design wow fadeInUp">
<a href="image_tag image.photo.url" title="<%= image.by %>" >
<figure>
<div class="portfolio-img bg-extra-dark-gray">
<%= image_tag image.photo.url, class: "project-img-gallery", alt: "" %>
</div>
<figcaption>
<div class="portfolio-hover-main text-center">
<div class="portfolio-hover-box vertical-align-middle">
<div class="portfolio-hover-content position-relative">
<i class="ti-zoom-in text-white fa-2x"></i>
</div>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<% end %>
<!-- end portfolio item -->
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- end portfolio section -->