[SOLVED] custom display of images

agata
Topic Author
Offline
Elite Member

9 years 7 months ago - 8 years 9 months ago #53385 by agata

[SOLVED] custom display of images was created by agata

Hi,
I need to display an unordered list of images, however those images need to have custom classes. I'm loading the values of that field outside of flexicontent and my code looks like this:

Code:

<ul class="hotel-carousel__items list-bare js-hotel-carousel">
<?php FlexicontentFields::getFieldDisplay($item, "field_slideshow", null, "display_large");
echo $item->fields["field_slideshow"]->display_large; ?>
</ul>

the output of this is as follows:

Code:

<ul class="hotel-carousel__items list-bare js-hotel-carousel">
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Roofterrace.jpg" alt="25hours Boutique Hotel Frankfurt, Roofterrace" class="fc_field_image" /></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom.jpg" alt="25hours Boutique Hotel Frankfurt, Bedroom" class="fc_field_image" /></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom2.jpg" alt="25hours Boutique Hotel Frankfurt, Bedroom2" class="fc_field_image" /></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom3.jpg" alt="25hours Boutique Hotel Frankfurt, Bedroom3" class="fc_field_image" /></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bathroom.jpg" alt="25hours Boutique Hotel Frankfurt, Bathroom" class="fc_field_image" /></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Restaurant2.jpg" alt="25hours Boutique Hotel Frankfurt, Restaurant2" class="fc_field_image" /></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Hall.jpg" alt="25hours Boutique Hotel Frankfurt, Hall" class="fc_field_image" /></li>
</ul>

However as I mentioned I need the images to have a specific class. So what I tried was:

Code:

<ul class="hotel-carousel__items list-bare js-hotel-carousel">
<?php
FlexicontentFields::getFieldDisplay($item, "field_slideshow");
foreach ($item->fields['field_slideshow']->thumbs_src['large'] as $img) :
echo '<li class="hotel-carousel__item"><img src="'.$img.'" class="hotel-carousel__img"></li>';
endforeach; ?>
</ul>

The output of this code is as follows:

Code:

<ul class="hotel-carousel__items list-bare js-hotel-carousel">
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Roofterrace.jpg" class="hotel-carousel__img"></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom.jpg" class="hotel-carousel__img"></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom2.jpg" class="hotel-carousel__img"></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom3.jpg" class="hotel-carousel__img"></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bathroom.jpg" class="hotel-carousel__img"></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Restaurant2.jpg" class="hotel-carousel__img"></li>
<li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Hall.jpg" class="hotel-carousel__img"></li>                    </ul>

Which is almost perfect BUT I lose the alt="" attributes. How should I modify the second code to get the alts?

Thanks,
Agata

Last edit: 8 years 9 months ago by agata.

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

9 years 7 months ago #53387 by ggppdk

Replied by ggppdk on topic custom display of images

Hello

you can duplicate these files:
carousel.php
carousel.xml
/carousel/ (folder)
/carousel/carousel2.css

as:
carousel2.php
carousel2.xml
/carousel2/ (folder)
/carousel2/carousel2.css

Optionally:

then you can edit carousel2.php
<div class="carousel mod_flexicontent_wrapper

replace with:
<div class="carousel2 mod_flexicontent_wrapper

then edit
carousel2.css

and replace
.carousel
with
.carousel2

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

agata
Topic Author
Offline
Elite Member

9 years 7 months ago #53391 by agata

Replied by agata on topic custom display of images

Hi,
I don't think I explained myself correctly. I'm not using any carousel script that came with Flexicontent, all I need is to obtain an unordered list of images with alts and class="hotel-carousel__img". It all boils down to being able to load alt values in the second code I pasted in my previous post.
Thanks,
Agata

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

9 years 7 months ago #53392 by ggppdk

Replied by ggppdk on topic custom display of images

Hello

you can get an array with the image URLs

see here:
About custom display of image / gallery field

Please Log in or Create an account to join the conversation.

agata
Topic Author
Offline
Elite Member

9 years 7 months ago #53394 by agata

Replied by agata on topic custom display of images

Yes I know this article and that's what I'm doing but it doesn't mention how to get the alt attributes.

Code:

<ul class="hotel-carousel__items list-bare js-hotel-carousel">
<?php
FlexicontentFields::getFieldDisplay($item, "field_slideshow");
foreach ($item->fields['field_slideshow']->thumbs_src['large'] as $img) :
echo '<li class="hotel-carousel__item"><img src="'.$img.'" class="hotel-carousel__img"></li>';
endforeach; ?>
</ul>

Thanks,
Agata

Please Log in or Create an account to join the conversation.