Align image in a blog post

Support
#1

I want to build my pinterest account and add to my blog posts pinnable pins:

Therefore I have the following questions:

  1. How can I align the image to the right and simultaniously reduce it to 33% of its size, but in a way that when it is pinned it will have the original size. I tried this, but it doesn’t work.

instead of width=”735″ height=”1102″ I replaced it with style=”width:43%”

  1. I want to hide specific images to not overload the post. But once the visitor clicks on a specific button a white page pops up, where all pins of the post are displayed.

I’m not sure how I can make it: I use

image html
to hide it (this works) but how do I make the pop up (full width white background) ?
  1. If the images (pins) are in different hights, how would you display them best? via a gallery?
    Could I also add it below the individual blog post?

Thank you!

Nimue

#2

Hi Nimue,

Thanks for reaching out.

  1. It depends of which image, is it standard image or image element from the builder, and how does the image implemented? It could be done through CSS, example add this to Theme Options > CSS 
.float_right_image {
max-width: 43%;
float: right;
}

Then your image should have class float_right_image, like <img class="float_right_image". I assume you’re only referring to standard image content of a post, then adding that CSS

  1. I think that would require a plugin but I’m not sure which, or custom development. What you need is a popup with pinterest integration which currently not available feature of the theme and builder. It’s a complex one so you may need to contact a developer.

Thanks!

#3

Thank you for the quick reply!

One last question: how I best display the images collection below the post? With a gallery? or just tables?
Thank you!
Nimue

#4

It’s not working:

I added it to the main CSS plus here

Thank you!
Nimue

#5

Hi Nimue,

To setup gallery, you can use our responsive gallery shortocode explained here (https://theme.co/apex/forum/t/features-galleries/100). Or else, you can also utilize Envira Gallery plugin as explained here (https://theme.co/apex/forum/t/extension-envira-gallery/67).

With regard to your CSS issue, when you’re assigning a CSS class to an element, you just need to use the class name. In your case, instead of class="float_right_image", just use the class name in that field, that is float_right_image.

Let us know how it goes.
Thanks!

#6

Thank you, now it’s working!
But I still need the text to flow around the picture. At the moment they are in separate rows.

How do I do that?

Thanks again!
Nimue

#7

Hi Nimue,

Would you mind providing a sample URL? It seems to be it’s a gallery (set of images) and adding the class on a single image will have no effect. It should be added as a group class instead.

Thanks!

#8

Sorry for not being specific enough :frowning:
I mean the image in the post. The text should flow around the picture instead of only being above and below.
Thank you!
Nimue

#9

Hello Nimue,

When you have inserted the image? If you are using the default WP editor, the image should be inserted before the paragraph texts but still in the same paragraph.

Meanwhile, to assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

#10

Thank you, i found my error!

My last question, hopefully for now :slight_smile:
Can I add specifications to the main css so that there is a small distance between text and image?

Thank you!

#11

Hi Nimue,

Since you have added the class float_right_image to the image and you have the code:

.float_right_image {
   max-width: 43%;
   float: right;
}

You can just update the CSS to:

.float_right_image {
   max-width: 43%;
   float: right;
   margin-left: 20px;
}

Please note that since this is a custom code, you will have to maintain the code in the future in case you require changes or it will stop working.

Hope this helps.

#12

Thank you! It works ! :-)))

#13

You’re welcome, Nimue.

#14

Now I still have a question :slight_smile:

if I manually reduce the size of the image in the blogpost, how can I make it show on mobile in full size?
Is this possible to define in the css too?

Thank you!
Nimue

#15

Hello Nimue,

Thanks for updating the thread.

Yes, you can use CSS media queries to limit the changes. Please add following CSS under X/Pro > Theme Options > CSS:

@media screen and (min-width: 900px) {
 .float_right_image {
   max-width: 43%;
   float: right;
   margin-left: 20px;
}
}

To learn more about media queries, please refer following resource:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.