The Best of British

[effingpot]

I've just completed a total rework of my old effingpot.com site using GetSimple, a bootstrap theme and the help of a friend who's done it before. The old site I made in editpad by hand and you can still see it here.

The new site is responsive and looks much slicker here.

I'm now learning how to do this unaided as I have a few more sites to refresh. I found a nice youtube video by Timbo and did the 10 min tutorial. Are there other good training resources around that I may have missed?

The one thing I've messed about with and still can't figure out is simple I'm sure. On the effingpot.com site at the top of each chapter I want to leave the image centralised as it is but add another smaller image to the right and a few words under it telling people to click to visit my new creation (passwordpig.co.uk) a bit like how it is on the homepage (but smaller). However I'm struggling to figure out how to do that so any pointers would be welcome.

Thanks
Mike 

[Raeven]

What does the toolbar in your 'pages' editor look like?  Do you have the Source button available?

If not, then pop your gsconfig.php file open and change

Code:

# WYSIWYG toolbars (advanced, basic or [custom config])
#define('GSEDITORTOOL', 'advanced');

to

Code:

# WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL', 'advanced');

(un-commenting the second line)

or change it to
    # WYSIWYG toolbars (advanced, basic or [custom config])
    define('GSEDITORTOOL', 'full');
Advanced is neater, but Full shows you everything you have to work with.  From there you'll probably want to create a custom toolbar stripping out anything you don't want to use.

Once you have Source on the toolbar you can switch to that and do the image up with the caption.

I work with a couple of people who can't use Source so for them I came up with another solution.  The (Full) editor's toolbar has a useful tools called Templates. I added 3 templates in, each a block containing the img and caption (one left aligned, one right, one without alignment).  They can insert this code into the page with a click a button, replace the placeholder image and caption with the real thing. Unfortunately, it is easily scrambled up afterward if they are being indecisive.
(If you do decide you'd like to use the Templates tool for this sorta thing, make sure to include templates_replaceContent : false to the GSEDITOROPTIONS in your gsconfig.php)

I imagine a GS plugin would do a better job, but I have not been able to find one (yet?)

[effingpot]

Thank you. I'm making slow progress. However, my tool bar is quite good and yes I can access source (phew!). With a combination of using the little purple bootstrap add on thingie and some hand coding I think I managed to do it. The bootstrap builds the "tables" that I could align the images and text in but the wrapping for smaller screens was more interesting, but now seems to work with a few extra tweaks. All the main pages on effingpot.com now have the image and text added to the top right and they wrap correct, and centralised as you shrink the screen. I think on PC and phone I have what I wanted. Thanks for the pointers. 

[shawn_a]

I think there is an image caption widget, plugin for ckeditor now, that allows images with captions.
Another option since its is on every page would be to add a component to your template.

[Bigin]

Another option would be to use ItemManager and Im-Extra-Fields, if you wish to try it out:

• Download and install latest ItemManager
  
• Create a category with WYSIWYG field named "brand"
  
• Enter a default value for the field, something like this, for example:
  

Code:

<div class="thumbnail with-caption">    
    <img src="/data/uploads/pig.png" alt="My image">    
    <p>Check out our new App</p>
</div>

• Install latest IM Extra Fields plugin
  
• open /plugins/im_extra_fields.php file and change this:
  define('HIGH_DATA_CAPACITY', false); to define('HIGH_DATA_CAPACITY', true);
  
  
• Create (or edit if it already exists) the functions.php file in your theme folder, copy and paste this snippet in this file: https://gist.github.com/bigin/2a147c9fbd...80f41a1410
  
  
• replace the $category = 9; with the id of the category you have created.
  

Now, when editing the chapter page, you can select your category under the page options and add [[brand]] placeholder to your page content where you want to add your image

that is all

[Raeven]

@shawn_a,  I think you mean Enhanced Image http://ckeditor.com/addon/image2
Unfortunately, that one removes the image properties' Advanced tab. (booo)  Otherwise it seemed like it was a pretty good one, yeah.

Another option since its is on every page would be to add a component to your template.

OH! On every page? I misunderstood. Absolutely the way to go, then.

@effingpot Awesome! Glad you got it working the way you want!