“Making image with caption responsive and word wrap”

  • Robert Handford

    Can you tell me the right syntax for making an image with caption, responsive and word wrap. I'm just going around in circles here without success.

    Below is a near starting point which displays OK previiewing in Video Composer but doesnk work when published - the captions do not work as previewed.

    I'm presuming that to make it responsive I need to delete the image sizes and I'm unsure if  I use the img class responsiveimg in the syntax as in your FAQ..

    Can you simply take the syntax below produced bt the Visual Composer and edit it so that it is responsive, with a caption Tower Bridge, left aligned with an 8px margin around the image

    [caption id="attachment_2437" align="alignleft" width="400"]<img style="margin: 8px;" alt="Alt" src="http://localhost/wordpress/wp-content/uploads/2013/12/tower_london.jpg" width="400" height="300" /> Tower London[/caption]

    lasdsad

    sadkasd

    3:51 on January 13, 2014

  • Ruben Bristian

    Hi

    1. Make sure that you run the latest version of the theme: 2.3.4

    2. Paste this code into the custom css area:

    .wp-caption {
    max-width: 100% !important; }

    It should fix your issues.

    3:51 on January 14, 2014

  • Robert Handford

    Thanks I still cannot get this to work as a responsive image. It's fine until I start trying to make the image responsive and start introducing the responsiveimg parameter.
    If I take the image size parameters out the image expands to the full width of the screen. If I leave the sizes in no responsiveness.
    Introducing the responsiveimg parameter also stops the caption facility working.

    Current syntax is:

    [caption id="attachment_2437" align="alignleft" width="400"]Alt Tower of London[/caption]


    3:51 on January 14, 2014

  • Ruben Bristian

    Do you have the latest version of the theme? 2.3.4? Forget about the responsiveimg tag.. Just have the latest version and use that code i gave you. It's tested.

    If it doesn't work, send a link.

    3:51 on January 14, 2014

  • Robert Handford

    I have 2.3.4.

    Example link is at the url below, (the small map at the top of the main text)

    http://www.londontoolkit.com/blog/daytrips/outsidetours/where-is-the-best-place-to-join-my-day-tour-from-london/

    I think the only real problem on this image is the caption, which is unlike how it previews in the Video Composer utility, no backgrounf colour and not centre justified.

    The syntax is:

    [caption id="attachment_1624" align="alignright" width="183"]London Tour Hotels Hotel Pick-Up List[/caption]

    I would also appreciate if you can give me a guide on how to get rid of the big bottom margin of the header where I disabled the control showing date, template, number of comments


    3:51 on January 14, 2014

  • Ruben Bristian

    I don't see any issue. I see the image and it's caption below. It has no styling because i haven't added any styling to it yet. Use this css code for a starting point in styling the caption:

    .wp-caption-text {
        font-style: italic;
        margin: -5px 0 5px;
        text-align: center;
    
    
    }

    To hide the footer completely, use this css code:

    #footer2 {
      display: none !important;
    }

    For more css tweaking, please see this: http://rubenbristian.ticksy.com/ticket/28525/

    Regards,
    Ruben.


    3:51 on January 15, 2014

  • Robert Handford

    Thanks!
    However the images are still not responsive.
    Better seen on the coach/ship image on this page:

    http://www.londontoolkit.com/blog/airports/your-questions-answered-about-pick-ups-drop-locations-in-london-for-cruise-bus-services-2014/


    3:51 on January 16, 2014

  • Ruben Bristian

    What do you mean they are not responsive? I am looking at the site and the image works just fine. It is totally responsive. 

    What would you expect to see?

    3:51 on January 17, 2014

  • Robert Handford

    I guess my expectation is that the image would function like on our main web site.

    Here the image gets smaller proportionately as the viewport width get smaller and there is a parameter in the css which in our case was set to 50% that meant that the image never took more than 50% of the section it was located in (when located within triggering div's). 

    3:51 on January 17, 2014

  • Ruben Bristian

    I am sorry, but this is not how this theme works. You have an image which has a certain width. If you make your browser size smaller than that width, the image will get smaller. That's how it works.

    If you want more tweaking, you should hire a freelancer to do specific tweaks for you.

    3:51 on January 17, 2014

  • Robert Handford

    Ok, I'll work with that

    3:51 on January 17, 2014

Updating...