I would like to change how images are inserted in a page

  • Unknown's avatar
    ilanchillinproject · Member ·

    So here is the page I would like to edit :

    https://strasbourgmun.wordpress.com/about-us/

    The last section of the pages with our faces,
    I would like to have a static caption, not a one that come up when the mouse comes and then go away.

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • staff-eleanor · Staff ·

    Hi there,

    Here is some information about your theme: Lodestar.

    I tested the theme, and its seems that you have added your three images as a gallery instead of individually. The individual images can have a caption underneath, while the gallery style has the pop-up caption.

    You’ll have to go back and insert the images one at a time.

    Here’s some information about Image Settings: https://en.support.wordpress.com/images/image-settings/

  • Unknown's avatar
    ilanchillinproject · Member ·

    Thanks !

  • Unknown's avatar
    ilanchillinproject · Member ·

    hey guys so look at the page,

    My images have now caption but they don’t align like I want…

    Here is how I implemented them… But they won’t follow the instructions…

    I would like to have them of the same size, 3 per ligne, as I will have more staff to add to the secretariat…

    Thanks

    <h2 style="text-align: center;">The Secretariat of SIMUN 2018</h2>
<div style="columns: 3;">

[caption id="attachment_131" align="alignnone" width="180"]<img class="alignnone size-thumbnail wp-image-131" src="https://strasbourgmun.files.wordpress.com/2017/07/11988639_10205000597879362_1345355473473036423_n.jpg" alt="Strasbourg MUN" width="180" height="180" /> Abdelhamid Atmani Secretary General[/caption]

[caption id="attachment_132" align="alignnone" width="180"]<img class="alignnone size-thumbnail wp-image-132" src="https://strasbourgmun.files.wordpress.com/2017/07/20134706_10213569127641463_128656776_n.jpg" alt="Strasbourg MUN" width="180" height="180" /> Moaad Laalam Director General[/caption]

[caption id="attachment_133" align="alignnone" width="180"]<img class="alignnone size-thumbnail wp-image-133" src="https://strasbourgmun.files.wordpress.com/2017/07/20353897_10154655569710079_67414298_o.png" alt="Strasbourg MUN" width="180" height="180" /> Ilan Ohayon Treasurer[/caption]

</div>
  • Unknown's avatar
    ilanchillinproject · Member ·

    I have done some manipulation,

    The result is almost as expected beside the fact that it is not centered and image size are wrong…

    <div style="float:left;columns:3;text-align:center;margin:auto;">

[caption id="attachment_131" align="alignleft" width="160"]<img class="alignnone size-thumbnail wp-image-131" src="https://strasbourgmun.files.wordpress.com/2017/07/11988639_10205000597879362_1345355473473036423_n.jpg" alt="Strasbourg MUN" width="160" height="160" /> Abdelhamid Atmani Secretary General[/caption]

[caption id="attachment_132" align="aligncenter" width="160"]<img class="alignnone size-thumbnail wp-image-132" src="https://strasbourgmun.files.wordpress.com/2017/07/20134706_10213569127641463_128656776_n.jpg" alt="Strasbourg MUN" width="160" height="160" /> Moaad Laalam Director General[/caption]

[caption id="attachment_133" align="alignright" width="160"]<img class="alignnone size-thumbnail wp-image-133" src="https://strasbourgmun.files.wordpress.com/2017/07/20353897_10154655569710079_67414298_o.png" alt="Strasbourg MUN" width="160" height="160" /> Ilan Ohayon Treasurer[/caption]

</div>
  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, first off, I would suggest making all your images square, like the one one the left, and make them all the same size by resizing and cropping in an image editing program. That will make sure that all images display as the same size. Right how you have three different image sizes and only one that is square (height and width the same).

    I see that the div the images are in are now centered. Let’s start with the reworking of the images I suggest and then go from there.

  • Unknown's avatar
    ilanchillinproject · Member ·

    Hi guys,

    So its finally almost ok,

    The only detail is that it wont get centered… Even if I margin auto my divs… How can I solve it ?

    <h2 style="text-align: center;">The Secretariat of SIMUN 2018</h2>
<div style="margin: auto;">
<div style="display: inline-block;">

[caption id="attachment_200" align="alignnone" width="150"]<img class="alignnone size-thumbnail wp-image-200" src="https://strasbourgmun.files.wordpress.com/2017/07/18788264_1275414382575921_1315533051_n-e1501000033216.jpg" alt="president simun" width="150" height="150" /> Abdelamid Atmani  President of MSS[/caption]

</div>
<div style="display: inline-block;">

[caption id="attachment_132" align="alignnone" width="150"]<img class="alignnone size-thumbnail wp-image-132" src="https://strasbourgmun.files.wordpress.com/2017/07/20134706_10213569127641463_128656776_n-e1501000058236.jpg" alt="Strasbourg MUN" width="150" height="150" /> Moaad Laalam Secretary General[/caption]

</div>
<div style="display: inline-block;">

[caption id="attachment_133" align="alignnone" width="150"]<img class="alignnone size-thumbnail wp-image-133" src="https://strasbourgmun.files.wordpress.com/2017/07/20353897_10154655569710079_67414298_o-e1501000240979.png" alt="Strasbourg MUN" width="150" height="150" /> Ilan Ohayon<br />Treasurer[/caption]

</div>
</div>
<div style="display: inline-block;">
<div style="display: inline-block;">

[caption id="attachment_210" align="alignnone" width="150"]<img class="alignnone size-thumbnail wp-image-210" src="https://strasbourgmun.files.wordpress.com/2017/07/sarah-e1501002749437.jpg" alt="Chief of Staff" width="150" height="150" /> Sarah El Moubarak Chief of Staff[/caption]

</div>
</div>
  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I see you have trashed the About page, so I cannot look at it. Can you move it back out of the trash and then, if you do not want it to show, set it to draft?

  • Unknown's avatar
    ilanchillinproject · Member ·

    Sorry I have changed the page about us to the page the secretariat,

    https://strasbourgmun.wordpress.com/secretariat/

    Same trouble in the page https://strasbourgmun.wordpress.com/partners/

    Images are centered, I have my images in div, which are in a main div,
    margin auto in main div and inline block in each image div,

    It works but I cannot place them in the middle of the page :(

  • kathrynwp · Staff ·

    ilanchillinproject – both those pages no longer exist. If you still need help, could you provide a link to the new pages?

  • Unknown's avatar
    ilanchillinproject · Member ·

    Sorry, I changed the website entirely in fact…

    Bureau of MSS 2017-2018

    Partners

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, on the secretariat page, on the div with the three images, add a text-align style like this.
    <div style="margin:auto;text-align:center;">
    On the div with Sarah, change inline-block to block and add the text-align like this.
    <div style="text-align: center;display:block;">
    On the Partners page, on the divs holding the images, do text align center like this.
    <div style="text-align: center;">
    If you also want the headings you have above the images to be centered, add text align center to the h2 elements like this.
    <h2 style="text-align: center;">

  • Unknown's avatar
    ilanchillinproject · Member ·

    wow such magic !

    Thanks a lot !!

  • The topic ‘I would like to change how images are inserted in a page’ is closed to new replies.