Jump to content

Archived

This topic is now archived and is closed to further replies.

jane_l

Flipper - changing the image size shown

Recommended Posts

Khepri

I am with Jane. I would like to know where to start resizing this to fit my specifics. The Boot strap and icon DOCS information is excellent. But the pictures for sliders and Mastheads seems to be nothing more than that, photos with no actual instructions. Did I miss something? Am I looking in the wrong place? Did you guys release this before you were ready with proper support? I know Pagelines is awesome, how can I help move this forward? I can't talk you up if things are going to be difficult for potential clients.


✔There is no perfect recipe for success! 
✔There is no failure, only feedback. 
✔There are no mistakes, only rainbow bridges to insights and wisdom. 

Share this post


Link to post
Share on other sites
Rob

When you add it to the page by dragging Flipper to the page, you'll see (on the right, top) an option to edit (a pencil) which opens the edit options. Simply select the number of items (the default in the content area is 3. You can add a custom class, then apply custom code to resize images.  Remember, if you're selecting the post thumbnails and those are 150px square (the WP default) you can also change that via Dashboard > Appearance > Media and update your post thumbs using a plugin to regenerate the thumbnails.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jane_l

Thanks.  I wish that the docs had a better example of how to do this sort of thing.  So I just put in say "flipper1" as my custom class and then in the Custom CSS/LESS page, I enter

 

 
img.flipper1 {height:100px; width:200px;}
 
 
It would be great if you could provide some general examples of how to use the custom class, particularly if you want more than one.  

Share this post


Link to post
Share on other sites
Rob

Jane, our docs are now made ready for member contributions.  You can help build them by editing any page you wish.  See the footer at the bottom of any page in the Docs.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jane_l

Rob, I would be happy to add to the documentation, but I don't know what I'm doing.  The above example does not work. I'm suggesting that pagelines provides examples on how to use this, particularly given that it uses sections. I don't really understand the customized CSS and CSS classes and the pagelines docs set does not provide any examples. I understood DMS to be a product that non developers could use.  

 

In sum, my question about how to use custom classes and custom css in order to achieve uniformity in something like the flipper or in a carousel isn't being answered.  

Share this post


Link to post
Share on other sites
Rob

Sorry Jane.

 

As I mentioned in an earlier reply, you can try using the post source for Flipper, then changing the settings for post thumbs via Dashboard > Settings > Media. However, if you want to do this with CSS, add a unique class to the flipper in the classes field.  Something like my-flipper-img.

 

Then, in Custom Code you can add something like:

.my-flipper-img {

height:  200px;

width: 300px;

}

 

Change the numbers to the ones you desire.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

If that fails, you might try:

.attachment-aspect-thumb wp-post-image {width: 300px;

height: 200px;}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jane_l

The custom CSS method you suggested doesn't work because it restricts the entire height of the flipper, not just the image. What we need to do is restrict just the image size which problematic. 

 

Neither does ".attachment-aspect-thumb-wp-post-image {width: 300px; height 200px}"  or .attachment-aspect-thumb wp-post-image {width: 300px; height 200px}

Share this post


Link to post
Share on other sites
Rob

Please use Chrome's Inspection Tools or Firebug for Firefox to inspect the elements of your site. Either of these will help you to identify the specific element you wish to change.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jane_l

Yes, I've tried that (and let me say that this isn't very easy/clear either and it goes against the supposed ethos of DMS).  But the class and element is:  

 
img.attachment-aspect-thumb.wp-post-image
 
I've tried 
 
img.attachment-aspect-thumb.wp-post-image {width: 300px; height 200px} and that does nothing.
 
But more importantly, I don't want to affect all thumbnails, just the images in the flipper.  Surely there is a way to constrain the images into a certain size in the flipper much like they are constrained in a slider or carousel?

Share this post


Link to post
Share on other sites
davekeys

I had some luck using:

li .flipper-item {width:140px !important;}

 

This proportionally re-sizes the images but not the flipper item, exactly. The flipper still only puts in 4 images across when I want six. I'll keep experimenting and if I get some joy, I'll be sure to post it here.

 

As @One smart egg says, inspection tools will get you a long way toward where you need to go. It's a new platform and I'm sure these specifics are going to get ironed out over time.

 

I suspect that pre-sizing or re-sizing images ahead of time will get the job done the right way. Honestly, we're probably all just trying to shortcut that bit of Photoshop work with CSS.

 

Creating same size or near same size images and then fine-tuning with CSS is probably the best approach.

Share this post


Link to post
Share on other sites
Rob

Thanks Dave!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jane_l

I had some luck using:

li .flipper-item {width:140px !important;}

 

This proportionally re-sizes the images but not the flipper item, exactly. The flipper still only puts in 4 images across when I want six. I'll keep experimenting and if I get some joy, I'll be sure to post it here.

 

 

1) presizing really doesn't do much good when a) You don't want the thumbnail images to always be 200x300 or b) that you already have over 4000 posts and don't really care to resize and upload new images.

 

2) li. flipper-item css only controls the link hover rather than the image of the flipper.   li .attachment-aspect-thumb.wp-post-image did work, however, so thanks for the tip in the right direction.  

 

3) pagelines should allow for some kind of processing of images. I currently use Themify and it allows for that. 

Share this post


Link to post
Share on other sites
Rob

Hi,

 

I don't think you're carefully reading what's being written to you. 

 

Dave was giving you a CSS solution without having to resize via Settings, so your reply in 1 is a bit off target.  As for 1 a., I mentioned you could regenerate the thumbnails.  This is done with a plugin, and whether you have 4 or 40,000 posts and thumbs, it will do the job. You would not have to resize and upload images (which no one ever suggested).

 

I'm happy to hear this is resolved and that you have it working.  PageLines generally doesn't do image processing.  WordPress handles that, or you do with a graphics editor.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jane_l

Rob, 

 

First, I did read what was written carefully as exemplified by the 2 point in my comment that I actually go the CSS to work. Isn't that evidence that I PAID attention?

 

Point 1 was to respond to his suggestion that images be preprocessed before posting. I replied that wasn't feasible.

 

Second, your suggestion that I regenerate the thumbnails was previously addressed when I said that I didn't want to change the look of the thumbnails everywhere. Just for the flipper.  

 

Finally, image processing happens in themes all of the time. Look, for example, at the image icons generated in rapid tabs for recent posts. Those smaller images are a reduction of a thumbnail.  

 

I understand that you are under quite a bit of stress but I've read most of the help threads here in an effort to learn about DMS and hopefully adopt it, and I have to say that your tone and your manner of responding to people is really poor.  If this is the example of the type of Customer Service that comes with Pagelines DMS, it is really offputting. 

Share this post


Link to post
Share on other sites
Rob

I apologize if you're offended or if I have responded to people in a poor way.   I will point out that in reading my replies, you may have missed a large volume of demanding, impatient and intolerant comments I've had to respond to over the past week.  While this is no excuse, I would hope you'd put things in context.

 

As for this comment: 

"Finally, image processing happens in themes all of the time."

I just want to point out that DMS is a Document Management System, not a theme.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
diretornak

What worked for me was this:

 

.flipper-wrap .flipper-items > li img {max-height:200px;}

 

Since the responsive nature of the section takes care of the width, i just needed to set a max-height value to get em all standardized.

Share this post


Link to post
Share on other sites
James B

Thanks for sharing your solution, this will help other users in the future.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tiltcreative

I am having problems with this too. I'd like six flipper images - I have it set to six, and have set it to use the custom size I added into the media > image sizes. I have also tried a number of other thumbnail sizes, and it never changes. I tried setting it using css too but that didn't work either.

Share this post


Link to post
Share on other sites
GetMeWebDesign

tiltcreative - you will have to play with this width to get your desired display, but this should work:

 

.caroufredsel_wrapper li {
  width: 160px !important;
}

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

tiltcreative - This topic is set to resolved. Therefore, if you're having issue with Flipper and image sizes, please create your own topic and provide screenshots of what you're currently seeing and what you wish to achieve.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tiltcreative

Thanks, the code that GetMeWebDesign posted worked perfectly, while the one listed as the answer only changed the image size, so it's worth leaving up for other people. The help is much appreciated!

Share this post


Link to post
Share on other sites
GetMeWebDesign

tiltcreative It is a pleasure. It made me think of an answer to a question I had myself :)


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

×