17

I could use help with creating a style sheet to override the default ones from Magnific Popup (https://github.com/joshuajansen/magnific-popup-rails).

I have the code for a user to select their default_profile_id from their uploaded images. The problem I have is I need code that will allow the current user to make that decision from their page. For example the current user hovers over their photo, and the text "Make Profile Photo" appears on it (https://s18.postimg.cc/arl81snll/mouse.jpg). I don't know how to create a style sheet or modify what I do have so that this action can work.

Any help with adding this action to the photos would be much appreciated.

Photos Controller:

 def new 
    @photo = Photo.new
  end

  def create
    @photo = Photo.new(params[:photo])
    @photo.user = current_user
    if @photo.save
      flash[:notice] = "Successfully created photos."
      redirect_to :back
    else
      render :action => 'new'
    end
  end

  def resize(width, height, gravity = 'Center')
    manipulate! do |img|
      img.combine_options do |cmd|
        cmd.resize "#{width}"
        if img[:width] < img[:height]
          cmd.gravity gravity
          cmd.background "rgba(255,255,255,0.0)"
          cmd.extent "#{width}x#{height}"
        end
      end
      img = yield(img) if block_given?
      img
    end
  end
  def edit
    @photo = Photo.find(params[:id])
  end

  def update
    @photo = Photo.find(params[:id])
    if @photo.update_attributes(paramas[:photo])
      flash[:notice] = "Successfully updated photo."
      redirect_to @photo.gallery
    else
      render :action => 'edit'
    end
  end

  def destroy
    @photo = Photo.find(params[:id])
    @photo.destroy
    flash[:notice] = "Successfully destroyed photo."
    redirect_to @photo.gallery
  end

  def choose_default_photo
    @photo = Photo.find params[:photo_id]
    current_user.default_photo = @photo
    redirect_to '/profile' # or wherever I want to send them
  end
end

Photo model:

  attr_accessible :title, :body, :gallery_id, :name, :image, :remote_image_url
  belongs_to :gallery
  has_many :gallery_users, :through => :gallery, :source => :user
  belongs_to :user
  mount_uploader :image, ImageUploader

  LIMIT = 5


  validate do |record|
    record.validate_photo_quota
  end


  def validate_photo_quota
    return unless self.user
    if self.user.photos(:reload).count >= LIMIT
      errors.add(:base, :exceeded_quota)
    end
  end
end

User Model:

  has_many :photos
  belongs_to :default_photo, :class_name => "Photo"
  after_create :setup_gallery

  private
  def setup_gallery
     Gallery.create(user: self)
   end
end

User Controller:

  def new
    @user = User.new
  end

  def show
    @user = User.find(params[:id])
  end

  def destroy
     User.find(id_params).destroy
     flash[:success] = "User deleted."
     redirect_to users_url
   end

    def choose_default_photo
      @photo = Photo.find params[:photo_id]
      current_user.default_photo = @photo
      redirect_to '/profile'
    end

The columns for the photos table are: id, created_at, updated_at, image, name, user_id

Users table has the following related columns: id, default_photo_id (integer)

Cœur
  • 37,241
  • 25
  • 195
  • 267
xps15z
  • 1,769
  • 1
  • 20
  • 38
  • What CSS have you tried? What does your markup look like? What are the current styles on the element you're trying to style? Do you need help only with the CSS or do you also need help with what happens when someone clicks on an image to make it their profile photo? – carols10cents Nov 04 '13 at 14:31
  • I need help with the CSS as I have no experience with it. I haven't worked with it before, but I am going to need to implement it throughout the app. Seeing one small section done in CSS should help me finish the rest myself. I just need to get a good idea of how to write the CSS and then add the action to it. – xps15z Nov 04 '13 at 17:29
  • Ok, so what does your markup look like now, and what does the display look like now? Do you have an image showing on the page? Do you have the corners rounded? I don't know how much Magnific Popup gives you, so I don't know how much you need to get to where you want to be. – carols10cents Nov 04 '13 at 18:05
  • 1
    I haven't customize any of it. I only added the lightbox. I don't need the corners rounded as shown in the uploaded example. I was just pointing out how to add the text 'Make Profile Image' over the photos when the mouse hovers over. I just need help with adding that to the style sheet so the action for make default photos works. I used the gem for it so the files are in the pipeline. To do any modifications I would have to create a new style sheet I believe. I'm not experience with CSS so I am not sure. – xps15z Nov 04 '13 at 18:47

2 Answers2

1

You can either have two images and swap images when a mouse-over occurs or you can use CSS effects such as :hover and opacity to make the image appear as you like.

Sample CSS showing em, px, and % for a 190x190 pixel image. Sizing and position would need to be adjusted to suite your needs.

/* resize so easier to view */
img.profImg {
    width: 480px;
    /* z-index: 1; */
}
/* all hover items */
.overImg {
  background: #111111;
  color: white;
  opacity: 0.6;
  border-radius: 0.5em;
  width: 190px;
  height: 190px;
  /* z-index: 2; */
}
/* hover effects */
.carImg:hover .overImg  { display:block; }
.carImg .overImg { display:none; }
/* specific to car image, will need to be adjusted */
.car-over-2 {
  position: absolute;
  top: 310px;
  left: 25px;
}
.car-over {
  position: absolute;
  top: 36px;
  left: 25px;
}
/* text near bottom of image */
.overText {
    color: white;
    font-size: 1.1em;
    position: relative;
    top: 85%;
    left: 12.5%;
    z-index: 3;
}
/* X button to close: should use an icon for this */
.closer {
    background-color: white;
    color: black;
    font-size: 0.8em;
    border-radius: 5em;
    padding: 0.2em;
    width: 2em;
    height: 1em;
    position: relative;
    left: 85%;
    top: -8px;
}

Corresponding HTML:

  <a class="carImg">
    <img src="http://s18.postimg.org/arl81snll/mouse.jpg" class="profImg">
    <span class="overImg car-over">
      <div class="msgFlash overText">Make Profile Photo</div>
      <b class="icon icon-close closer">X</b>
    </span>
  </a>

And a plunker file: http://plnkr.co/edit/44G96cTdYsfJh6NCQUjE?p=preview

user508994
  • 1,567
  • 11
  • 13
0

for your backend code

 def choose_default_photo
   @photo = Photo.find params[:photo_id]
   current_user.default_photo = @photo
   redirect_to '/profile'
 end

doesn't work, you have to use current_user.update default_photo: @photo

and then on front end, it's easier to use Javascript, you can send Ajax request to server when the photo been clicked by user
you can use what css :hover to show hidden text, as @user508994's answer, following is the main part

.carImg:hover .overImg  { display:block; }
.carImg .overImg { display:none; }
Saiqul Haq
  • 2,287
  • 16
  • 18