Issues with Ruby image styles causing improper resizing of images

Looking for some guidance on how to address this issue. I added the following code to post.rb

has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" }
 validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/

Then in my index.html.erb, I have the following code snippet

      <div class="row">
    <% @posts.each do |post| %>   
    <div class="col-md-4">
      <div class="card mb-4 shadow-sm ">
        <img class="bd-placeholder-img card-img-top img-fluid "   ><%= image_tag post.image.url(:medium) %></img>
        <div class="card-body">
          <p class="card-text"><h3><%= post.title %> </h3> <%= post.body %></p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                    <%= link_to "View", post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
                    <%= link_to "Edit", edit_post_path(post), :class =>'btn btn-md btn-outline-secondary' %>
              </div>
<small class="text-muted">9 mins</small>
          </div>
        </div>
      </div>
    </div>

<% end %>

</div>

Having trouble with image resizing when uploading different images. Check out the issue here: Currently using Paperclip and Magick for image uploads.

Answer №1

After reviewing the documentation for Paperclip, it seems that directives such as 300x300> and 100x100> are instructions passed to ImageMagick.

According to , using 300x300> will resize the image to fit within a 300x300 space. So, if you have an image that is 500x300, it will resize down to 300x180.

It looks like the line of code to adjust for resizing is

{ medium: "300x300>", thumb: "100x100>" }
.

The image that displays correctly is likely close to a square shape in its original form, while the one that doesn't may be a wide rectangle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to store CSS style properties in an array

In the midst of building a React-datagrid project, I am streamlining CSS properties for an array. However, there seems to be redundant CSS properties that I would like to consolidate into an array format. let _columns = []; let commonStyle = {"width":"20 ...

When implementing dynatable with Meteor, the outcomes may vary between the demonstration in a fiddle and the actual application

Here is the fiddle I created for this question: https://jsfiddle.net/ereday/82wzwem8/2/ In the fiddle, you'll notice that the table header has a green background. Now, let me share the code snippet from my meteor project: simple-todos.html <head ...

Problem involving the h1 tag nested within a div container

I have two files, one in .html format and the other in .css format. Here is a snippet of their content: #left, #right { display: inline-block; } #left { width: 15%; height: 550px; margin-bottom: 100px; margin-left: 10px; border: 1px solid bl ...

Troubleshoot mobile overflow-x problem when expanding div beyond container boundaries

Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolli ...

Creating dynamic forms using AngularJSIn this tutorial, we will explore how to generate

I need help creating an HTML form. I have an object that stores an array of form elements like { "formFields": [ { "type": "select", "label": "Fabric", "name": "fabric", "options": [ ...

Top align a flexbox layout with three columns

I am facing a challenge in aligning my 3 columns at the top with multiple "rows". When I apply the CSS property align-items: flex-end;, I achieve the desired layout, but the elements are aligned at the bottom. However, if I attempt to use align-items: flex ...

The combination of Netbeans 8.0.1 and PhoneGap 3.5.0 is a powerful duo

My system is currently running Netbeans 8.0.1 and PhoneGap 3.5.0, but I am facing an issue where Netbeans does not allow me to create a new PhoneGap/Cordova project. According to some sources, this could be due to PhoneGap changing its versioning format, ...

Discovering the chosen value from an asp.net radio button control based on its class can be accomplished using Jquery

Currently, I am working with a radio button control that is defined like this: <asp:RadioButtonList ID="rbQ2" CellSpacing="10" runat="server" class="rbQ2" CssClass="radioButtonList" RepeatDirection="Horizontal" RepeatLayout="Table" onclick="javascript: ...

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

By dynamically creating a script as shown below, the JavaScript source is downloaded asynchronously. let newScript = document.createElement('script'); newScript.src = srcUrl; let firstScript = document.getElementsByTagName('script')[0] ...

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

I am facing an issue with my JS application. I am unable to send data from jQuery to a PHP file, as I encountered this error message: POST https://magazyn.rob-tech.pl/savesettings.php 404 The app is running on PORT=8080 npm run start and the package.json ...

Distribute progress bar evenly around a circular path

I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar. <Progr ...

Stop the body from scrolling when the side panel is opened

Whenever I click on my button with the class "cd-btn," it triggers the toggling of my panel with the class "cd-panel.is-visible." jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ ...

datepicker in bootstrap 4 obscured by the div

I am currently utilizing Bootstrap datepicker v4. However, I am facing an issue where the datepicker view is getting hidden behind the 'map' div. I have attempted to solve this problem by adding overflow: visible, but unfortunately, it does not s ...

What is the best way to apply CSS max-left or min-left positioning to an absolute element?

I currently have an element with the CSS properties: position:absolute; left: 70%; Is there a way to restrict this element from moving more than 900px from the left side? Similar to max-width but for positioning? ...

Displaying the value of a jquery variable in an HTML document

I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic. My goal is to increment the transform value of a div every 5 seconds: <div style="transform: translateX(0px);" id="slide_ima ...

What steps can be taken to address the build problem with Angular version 13?

Encountering a problem while working with Angular 13: https://i.sstatic.net/CbAUhh6r.png Attempting to build using ng build --configuration=test, however facing errors as mentioned above. Interestingly, if I remove the reference to bootstrap.min.css in t ...

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

Our website is optimized for use on Android tablets. I have added the following CSS to the input's class: text-transform: uppercase; While this successfully displays typed letters in uppercase, it does not change the appearance of the on-screen keyb ...

Webpage video stalling due to buffering

Currently, I am developing personalized video controls and have integrated a @progress event to monitor the video buffering progress and adjust the width of a progress bar div: <video @progress="videoBuffer($event)"> videoBuffer(e) { if ...